AngularJS学习（四）——路由angular-route.js

ng-route模块作为主应用模块的依赖模块——angular.module(“mainApp”,[“ngRoute”]);

ng-view指令为当前路由把对应的视图模板载入到布局模板中，以下面的三个链接为例，每一个链接都一个对应的视图和对应的控制器。点击上面任意一个链接，向服务器请求的地址都是一样的（http://baidu.com），这是因为“#！”后面的内容在向服务器请求时会被浏览器忽略掉。当切换url进行跳转是，ng-view所在在标签的内容就会由该路由对应的视图所填充。

 

通过不同的url访问不同的内容，实现多视图单页web应用

http://baidu.com/#!/first

http://baidu.com/#!/second

http://baidu.com/#!/third

（AngularJS1.6以前是用#标记的，在AngularJS1.6以后就由#！标记了）

 

AngularJS路由功能是有$routeProvider服务和ng-view搭配实现，ng-view相当于提供了页面模板的挂载点，当切换url进行跳转时，不同的页面模板会在拥有ng-view指令的标签的位置，然后通过$routeProvider配置的路由映射。

<div ng-app=”myapp”>
       <ul>
              <li><a  href=”#!/”>首页</a></li>
              <li><a  href=”#!/computer”>电脑</a></li>
              <li><a  href=”#!/printers”>打印机</a></li>
       </ul>
       <div ng-view></div>
</div>

//定义主模块，并进行依赖注入
angular.module("myapp",['ngRoute']);
//定义路由
angular.module("myapp").config(["$routeProvider",function($routeProvider){
       $routeProvider.when('/',{
              template:'首页'
       }).when('/computer',{
              template:'这个电脑介绍页'
       }).when('/printers',{
              template:'这是打印机介绍页',
       }). otherwise({
              redirectTo: '/ '//相当于default，默认显示
       });
}]);

 

when函数有两个参数，第一个参数#!后面的字符串，第二个参数是路由配置对象

配置对象参数：

template：

templateUrl：

controller：

controllerUrl：

redirectTo：字符串或function——重定向地址

resolve：object<key,function>当前controller所依赖的其他模块

 

when函数的第一个参数可带参数：

$routeProvider.when('/:params1/params2',{
              template:'首页'
       }).otherwise({
              redirectTo: '/ '//相当于default，默认显示
       });

路由中的$routeParams可以在控制器中拿到这个参数

.controller(“”controllerName”,function($scope,$routeParams){
       $routeParams.params1
       $routeParams.params2
})