angular.js之路由的选择方法

来源：税程财经网

在一个单页面中，我们可以添加多个模块，使得网页只在需要的时候加载这个模块。模块的切换大致上可以代替网页的切换，于是，我们便可以通过模块的切换实现网页的切换，这个切换是按需加载的。

乍一看非常普通的东西，但是仔细想想就可以发现，这种思想可以解决非常多的资源。

例如，假如有一个页面，需要显示1000种商品的信息，每个商品的表现形式各不相同（设他们有各自的css和js），那么一般来说，我们就需要准备1000张网页去加载这些信息。但是，使用这种模块化思想，我们就可以仅仅在后台设定1000个各不相同的模块，然后根据需要将需要的商品的对应模块加载到唯一一张页面上而已。

而要做到上面介绍的功能就必须使用路由功能了。

主体思路：

1. 后台设立多个的模块

2. 建立一个路由控制模块

3. 根据需要通过路由提取需要模块加载到主页上

4. 加载的同时，将其他模块隐藏。

那么，路由模块的建立需要多少功夫呢？其实意外地简单：

首先，主页面上，写上对应的代码：

<ng-view></ng-view>这个代表路由区域和视图区域，只有写了这个标签才会触发路由事件：

<html ng-app="myTodo"><head>
 <meta charset="utf-8">
 <title>angularjs ? TodoMVC</title>
 <link rel="stylesheet" href="node_modules/todomvc-common/base.css">
 <link rel="stylesheet" href="node_modules/todomvc-app-css/index.css">
 <style>
 .pagination {
 overflow: hidden;
 padding: 20px;
 }
 .pagination ul li {
 width: 60px;
 height: 30px;
 line-height: 30px;
 border:1px solid black;
 float: left;
 list-style-type: none;
 margin-right: 10px;
 text-align: center;
 }
 </style>
 </head>
 <body>
 <ng-view></ng-view> <!-- 路由区域，视图区域-->
 <footer id="info">
 <p>Double-click to edit a todo</p>
 <p>Created by <a href="http://sindresorhus.com">Sindre Sorhus</a></p>
 <p>Part of <a href="http://todomvc.com">TodoMVC</a></p>
 </footer>
 
 <script src="node_modules/angular/angular.js"></script>
 <script src="node_modules/angular-route/angular-route.js"></script>
 <script src="js/app.js"></script>
 
 
</body>
</html>

其他的东西都是装饰，只要看第24行就可以了。

在路由区域和视图区域中，我们可以添加内容进去——甚至添加一个网页进去。

接下来请看对应的app.js。

var app = angular.module("myTodo", ['ngRoute']);
//路由的配置：
app.config(function($routeProvider) {
 var routeconfig = {
 templateUrl: "body.html",
 controller: "myTodoCtrl"
 /*controller: 'myTodoCtrl'*/
 }
 
 var ohter_config = {
 templateUrl: "other.html"
 }
 
 $routeProvider.
 when("",routeconfig).
 //status ： 它对应我们页面的hash: all completed active
 //路由规则的优先级按写法的顺序所决定的
 when("/other", ohter_config).
 when("/:aaa", routeconfig ).
 otherwise( { redirectTo: "/all" });
});
app.controller("myTodoCtrl", function($scope, $routeParams, $filter){
 console.log($routeParams);
 
});

如果仅仅使用路由的话，以上的代码就足够使用了。它会保证;

1.当页面停留在主页或者其他奇怪的地方的时候自动跳转到

/all
上面，网址是——http://127.0.0.1:8020/finishAngularJS-mark2/index.html#/all
只需要注意index后面的就可以了。

2. 当页面跳转方向是/other的时候，跳转到

http://127.0.0.1:8020/finishAngularJS-mark2/iother.html
上
3. 当出现特定的跳转的时候（这里规定跳转的是/active,/complete/all三个)，也会跳转到对应页面，但这是在index下的跳转——

http://127.0.0.1:8020/finishAngularJS-mark2/index.html#/active

http://127.0.0.1:8020/finishAngularJS-mark2/index.html#/all

http://127.0.0.1:8020/finishAngularJS-mark2/index.html#/complete

【尤其注意的一点：除了2会跳出这个页面，其他的跳转是显示在规定的视图区和路由区上面的，body网页上的内容会被加载过来。】

接下来我们讲解原理：

app.config(function($routeProvider)

这便是用来设定路由的代码，直接写就好

var routeconfig = {
 templateUrl: "body.html",
 controller: "myTodoCtrl"
 /*controller: 'myTodoCtrl'*/
 }
 
 var ohter_config = {
 templateUrl: "other.html"
 }

这是两个跳转，跳转是一个对象，templateUrl，即模板是body.html，这就是为什么index.html会加载body.html的原因。第二个参数是为这个模板添加控制器，名字是——myTodoCtrl。

第二个跳转因为不重要所以pass。

$routeProvider.
 when("",routeconfig).
 //status ： 它对应我们页面的hash: all completed active
 //路由规则的优先级按写法的顺序所决定的
 when("/other", ohter_config).
 when("/:aaa", routeconfig ).
 otherwise( { redirectTo: "/all" });
});

这一段代码是用来进行判断的，当哈希值发生改变的时候，执行对应的跳转对象。

当哈希值为""即第二句，为空的时候，执行routeconfig

当哈希值为"/other",即第五局，执行other_config

当哈希值是一个特殊变量的时候，变量的名称为aaa，值为X（X可以是定义好的任何指，这里是all，complete，active中其中一个），即"/active","/complete","/all"的时候，执行routeconfig。

当哈希值是其他情况的时候，默认跳转到哈希值为"/all"上。

我们得到了哈希值，执行了后面的对象，取出对象的模板，添加在了主页上面，启动了控制器，整个路由便算完成了。

税程财经网还为您提供以下相关内容希望对您有帮助：

angularjs中使用路由,当跳转到某个view的时候我想执行在子页面中写...

1，angularjs有自带的返回上一页的路由，在路由里面用.state('tab.chats',{//路由名字url:'/chats',//路由地址views:{'tab-chats':{templateUrl:'templates/tab-chats.html',//跳转的页面controller:'ChatsCtrl'//控制器}}})2.比如点击物业的时候进入下一个页面，箭头是自带的,当然箭头样式需要自己调整。3.该方法是运用的ionic框架实...

angularJs ui-router路由之多视图实现菜单缓存切换

5.style样式：如果多个模块存在相同名称的选择器，则样式会冲突；还有些问题会在后面慢慢补充。6.页面打开太多会出现卡顿现象 7.一定要引入，否则会出现ui-view没有缓存的情况

angularjs使用路由怎么实现返回上一页,页面内容不会刷新

只要看第24行就可以了。在路由区域和视图区域中，我们可以添加内容进去——甚至添加一个网页进去。接下来请看对应的app.js。 var app = angular.module("myTodo", ['ngRoute']); //路由的配置： app.config(function($routeProvider)...

Angular和Vue.js的区别是什么?Angular和Vue.js的深度对比

5. 生态与工具链Vue.js生态以轻量为核心，官方库仅提供基础功能，第三方库（如Element UI、Vuetify）需手动集成，适合灵活定制。Angular生态则高度集成，官方提供路由、HTTP客户端、国际化等全套解决方案，且与TypeScript深度整合，支持严格的类型检查和IDE智能提示。此外，Angular CLI工具链可自动化生成项目...

ui-router的使用_html/css_WEB-ITnose

ui-router的使用涉及到AngularJS框架，其核心在于配置路由和状态的管理。首先，需要使用ui-view指令指定视图，例如在HTML中，可以通过`ui-view`标签来定义视图区域，ui-router会自动在该区域插入指定的视图。配置路由时，通常使用`$stateProvider`和`$urlRouterProvider`服务，其中`$stateProvider`用于定义状态...

PHP编程中有哪些常见的AngularJS操作?

1. 数据绑定AngularJS的核心特性是双向数据绑定。通过在模板中声明指令（如ng-model），当数据模型变化时，视图会自动更新，反之亦然。在PHP后端中，AngularJS可通过$http服务与PHP接口交互，实现动态数据传输，例如从PHP返回的JSON数据直接绑定到前端视图。2. 路由控制AngularJS的路由模块（如ngRoute）允许...

如何使自动动态面包屑用AngularJS +角UI路由器

4. 这样只有路由是动态载入了，关于每个路由对应的js，如果你也想实现动态载入的话，估计就需要使用类似 requirejs 的东西，比如 marcoslin/angularAMD · GitHub 或者 atian25/angular-lazyload · GitHub 或者自己写一个也可以，原理就是在路由的 resolve 中加载对应的js 5. 模板感觉就不需要动态...

angularjs路由是什么意思

当数据从一个子网传输到另一个子网时，可通过路由器的路由功能来完成。因此，路由器具有判断网络地址和选择IP路径的功能，它能在多网络互联环境中，建立灵活的连接，可用完全不同的数据分组和介质访问方法连接各种子网，路由器只接受源站或其他路由器的信息，属网络层的一种互联设备。

ui-router的使用_html/css_WEB-ITnose

动态生成模板：在路由配置中，可以使用templateProvider函数动态生成HTML模板，基于参数生成不同的HTML内容。总结：uirouter为AngularJS框架提供了一种灵活且强大的路由管理方式，通过配置状态、使用事件处理器、动态传参等方式，开发者可以实现丰富多样的路由逻辑，满足各种复杂的应用需求。

为什么开发者都不喜欢Angular.js内置的路由

Angular.js 的内置路由ngRoute只允许一个视图（ng-view）出现在页面上。这样的情况下，人们可以使用包含页面（ng-include）或者其他的变通方法为应用创建一个布局（layout）或主页（master page）。UI-Router支持多样化视图，并且每一个视图都有自己相应的控制，所以每个区块都是封装好，可以复用到整个...

angular.js之路由的选择方法

猜你还关注