angularJS 路由:(分发需求)
angularJS 中路由是单独提供的功能模块,ngRoute 也是一个单独发行的文件
可以通过 npm 去安装这个包:angular-route
做路由的配置:
配置路由的规则就是:什么样的请求,就找到什么样的控制器;
when就是"当"的意思,”当“这个的时候,请求这个控制器:
在页面请求这个路由的时候,会发现多加载了一个View模板文件:
解决方法:使用 script 标签
另外的一种写视图的方法:(写到这个里面)
注意:script标签,只有当 type='text/javascript' 才会被当作JavaScript脚本执行;
script 就算不能执行,也不能在页面上显示;所以很多时候,会把模板写到script 里面:
修改模板文件:
.when('/a',{ controller:'AController', templateUrl:'a_tmpl'})
这里是:找是否存在一个 a_tmpl 的script , 如果有就把他作为模板去使用
还有这样的一种需求:例如这种需求:
http://127.0.0.1/angularjs/domo/22.ng-route01.html#/student/zhangsan
难道我们还要写很多的when吗?
这个是麻烦也解决不了的,不可能为每一个学生,例如“张三”都去写一个控制器和模板:
所有的学生都应该:都应该放到一个控制器使用一个模板
#/a 这用的地址是属于特定的地址;
#/student/zhangsan 这种是属于特定一类的地址;
例如请求:
http://127.0.0.1/angularjs/domo/22.ng-route01.html#/students/zhangsan
我们可以使用 “ : name”去匹配任意的字符串:
//.when('/students/:name?',{.when('/students/:name',{ controller:'AController', templateUrl:'./view/a.html'})
这里的 “:”号是一个占位符,“?”说明这个位置可以省略:
例如:请求这个地址,也是跳转到a控制器,就是后面的?表示后面的可以省略http://127.0.0.1/angularjs/domo/22.ng-route01.html#/students/
如何去拿这个传入的名字:
方法:重新传入一个新的对象:
myApp.controller('AController',['$scope','$routeParams',function($scope,$routeParams){ $scope.title = '你好'+$routeParams+'这里是A控制器';}]);
$routeParams:是拿路由传递过来的参数;
例如:
我们请求的是 /students/zhangsan 这个地址
拿/students/:name这个规则去匹配
它能提取出来一个 键值:{name:zhangsan}
复杂一点的:
例如请求的是 /students/zhangsan
用/:role/:name去匹配:
提取出来的键值:{role:students,name:zhangsan}
.when('/students/:name',{ controller:'AController', templateUrl:'./view/a.html'})myApp.controller('AController',['$scope','$routeParams',function($scope,$routeParams){ $scope.title = '你好'+$routeParams+'这里是A控制器';}]);
例如请求这个:
http://127.0.0.1/angularjs/domo/22.ng-route01.html#/student/zhangsan
看到的结果就是:你好zhangsan这里是A控制器