angularJS 路由：（分发需求）

angularJS 中路由是单独提供的功能模块，ngRoute  也是一个单独发行的文件

可以通过 npm 去安装这个包：angular-route

  1. <script type='text/javascript' src='bower_components/angular/angular.js'></script>
  2. <script type='text/javascript' src='bower_components/angular-route/angular-route.js'></script>
  3. <script type="text/javascript">
  4. // 创建一个模块
  5. var myApp = angular.module('myApp',['ngRoute']);
  6. //配置路由
  7. myApp.config(['$routeProvider',function($routeProvider){
  8.  
  9. }]);
  10. </script>

做路由的配置：

配置路由的规则就是：什么样的请求，就找到什么样的控制器；

when就是"当"的意思，”当“这个的时候，请求这个控制器：

  1. <script type='text/javascript' src='bower_components/angular/angular.js'></script>
  2. <script type='text/javascript' src='bower_components/angular-route/angular-route.js'></script>
  3. <body ng-app="myApp">
  4.     <ul>
  5.         <li><a href="#/a">a</a></li>
  6.         <li><a href="#/b">b</a></li>
  7.         <li><a href="#/c">c</a></li>
  8.     </ul>
  9.     <div ng-view></div>
  10. </body>
  11. <script type="text/javascript">
  12. // 创建一个模块
  13. var myApp = angular.module('myApp',['ngRoute']);
  14. //配置路由
  15. myApp.config(['$routeProvider',function($routeProvider){
  16.     $routeProvider
  17.     .when('/students/:name?',{
  18.         controller:'AController',
  19.         templateUrl:'./view/a.html'
  20.     })
  21.     .when('/a',{
  22.         controller:'AController',
  23.         templateUrl:'./view/a.html'
  24.     })
  25.     .when('/b',{
  26.         controller:'BController',
  27.         templateUrl:'./view/b.html'
  28.     })
  29.     .when('/c',{
  30.         controller:'CController',
  31.         templateUrl:'./view/c.html'
  32.     })
  33.     .otherwise({
  34.         //重定向，做跳转
  35.         redirectTo:'/c'
  36.     });
  37. }]);
  38. myApp.controller('AController',['$scope','$routeParams',function($scope,$routeParams){
  39.     $scope.title = '你好'+$routeParams+'这里是A控制器';
  40. }]);
  41. myApp.controller('BController',['$scope',function($scope){
  42.     $scope.title = '这里是B控制器';
  43. }]);
  44. myApp.controller('CController',['$scope',function($scope){
  45.     $scope.title = '这里是C控制器';
  46. }]);
  47. </script>

在页面请求这个路由的时候，会发现多加载了一个View模板文件：

解决方法：使用 script 标签

另外的一种写视图的方法：（写到这个里面）

  1. <script type="text/ng-template"></script>
注意：script标签，只有当 type='text/javascript' 才会被当作JavaScript脚本执行；
script 就算不能执行，也不能在页面上显示；所以很多时候，会把模板写到script 里面：
  1. <script id="a_tmpl" type="text/ng-template">
  2.     <h1>{{title}}</h1>
  3. </script>

修改模板文件：

  1. .when('/a',{
  2.     controller:'AController',
  3.     templateUrl:'a_tmpl'
  4. })

这里是：找是否存在一个 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”去匹配任意的字符串：

  1. //.when('/students/:name?',{
  2. .when('/students/:name',{
  3.     controller:'AController',
  4.     templateUrl:'./view/a.html'
  5. })

这里的 “：”号是一个占位符，“？”说明这个位置可以省略：
例如：请求这个地址，也是跳转到a控制器，就是后面的？表示后面的可以省略
http://127.0.0.1/angularjs/domo/22.ng-route01.html#/students/

如何去拿这个传入的名字：
方法：重新传入一个新的对象：
  1. myApp.controller('AController',['$scope','$routeParams',function($scope,$routeParams){
  2.     $scope.title = '你好'+$routeParams+'这里是A控制器';
  3. }]);
 
$routeParams：是拿路由传递过来的参数；
例如：
我们请求的是 /students/zhangsan 这个地址
拿/students/:name这个规则去匹配
它能提取出来一个 键值：{name:zhangsan}
复杂一点的：
例如请求的是 /students/zhangsan
用/:role/:name去匹配：
提取出来的键值：{role:students,name:zhangsan}
  1. .when('/students/:name',{
  2.     controller:'AController',
  3.     templateUrl:'./view/a.html'
  4. })
  5. myApp.controller('AController',['$scope','$routeParams',function($scope,$routeParams){
  6.     $scope.title = '你好'+$routeParams+'这里是A控制器';
  7. }]);

例如请求这个：

http://127.0.0.1/angularjs/domo/22.ng-route01.html#/student/zhangsan

看到的结果就是：你好zhangsan这里是A控制器

angularJS的路由！的更多相关文章

  1. AngularJS的路由、模块、依赖注入

    AngularJS的路由在实际应用中更多是由另外封装好的angular-ui-router.js实现的! 为什么不用Ajax而要用前端路由?

  2. AngularJs ui-router 路由的介绍

    AngularJs ui-router 路由介绍 野兽之前有写过一篇关于Angular自带的路由:ngRoute.今天来说说Angular的第三方路由:ui-router.那么有人就会问:为什么Ang ...

  3. AngularJS笔记---路由视图

    最近有同事提到过关于ng-view的使用, 其实自己也不懂了,由于最近一直在做AngularJs的Rearch,所以就看了一些关于ng-view的国外博客. 做过ASP.NET MVC4的都知道, 我 ...

  4. AngularJs ng-route路由详解

    本篇基于ng-route来讲下路由的使用...其实主要是 $routeProvider 搭配 ng-view 实现. ng-view的实现原理,基本就是根据路由的切换,动态编译html模板. 更多内容 ...

  5. 关于js单页面实现跳转原理以及利用angularjs框架路由实现单页面跳转

    还记得我们刚开始学习html时使用的锚节点实现跳转吗? <a href="#target">我想跳转至目标位置</a> <p>第一条</p ...

  6. AngularJs ui-router 路由的简单介绍

    之前有写过一篇关于Angular自带的路由:ngRoute.今天来说说Angular的第三方路由:ui-router.那么有人就会问:为什么Angular有了自带的路由,我们还需要用ui-router ...

  7. AngularJS(16)-路由

    AngularJS 路由 本章节我们将为大家介绍 AngularJS 路由. AngularJS 路由允许我们通过不同的 URL 访问不同的内容. 通过 AngularJS 可以实现多视图的单页Web ...

  8. [AngularJS] “多重路由”嵌套模块——AngularJS“路由”嵌套学习资料教程

    这是小编的一些学习资料,理论上只是为了自己以后学习需要的,但是还是需要认真对待的 以下内容仅供参考,请慎重使用学习 1.AngularJS路由嵌套 Angularjs本身自带路由模块,可以满足通过不同 ...

  9. 关于angularjs中路由页面强制更新的问题

    有这么一个问题,在页面内路由页面跳转时,第一次跳入路由页面时是正常的,但是第二次会记住第一次时的状态,有时候并不想这样,想强制更新这个路由页面. 有一种方式就是使用 ui-sref-opts功能,我试 ...

随机推荐

  1. 下载安装 Apache（Windows 64位）

    32位的Apache的下载安装:http://jingyan.baidu.com/album/2f9b480dae458f41cb6cc2ce.html?picindex=2 64位的Apache的下 ...

  2. table获取checkbox是否选中的几种方法

    function test() { $(".table tbody tr").find("td:first input:checkbox").each(func ...

  3. 12款优秀jQuery Ajax分页插件和教程

    在这篇文章中,我为大家收集了12个基于 jQuery 框架的 Ajax 分页插件,这些插件都提供了详细的使用教程和演示.Ajax 技术的出现使得 Web 项目的用户体验有了极大的提高,如今借助优秀的 ...

  4. udhcpc

    /********************************************* * dhcpc * dhcpc是dhcp的客户端,在busybox中实现.今天正好了解一下. * Tony ...

  5. 第三百零七节，Django框架,models.py模块，数据库操作——表类容的增删改查

    Django框架,models.py模块,数据库操作——表类容的增删改查 增加数据 create()方法,增加数据 save()方法,写入数据 第一种方式 表类名称(字段=值) 需要save()方法, ...

  6. 奇葩问题：ListView中Item与Item中的Button不能单击问题

    android中ListView是一个经常要用到的一个组件,用到该组件时经常会碰到ListView的Item和Item中的Button不能单击的问题. 本人在使用时同样也遇到过这样的情况,共有三种情况 ...

  7. 一直误解的memset函数

    1.“想当然”导致的后果 今天犯了一个十分低级的错误,在对一个整型数组用memset进行初始化设置所有元素值为1.可是结果却大出所料,很意外啊!接着,我就做了代码测试. #include <io ...

  8. js计算两个时间相差天数

     //两个时间相差天数 兼容firefox chrome    function datedifference(sDate1, sDate2) {    //sDate1和sDate2是2006-12 ...

  9. Linux(Ubuntu)下搭建ASP.NET Core环境

    今天来学习一下ASP.NET Core 运行在Ubuntu中.无需安装mono . 环境 Ubuntu 14.04.4 LTS 服务器版 全新安装系统. 下载地址:http://mirrors.neu ...

  10. php将汉字转换为拼音和得到词语首字母(二)

    <?php class Pinyin{ private $_outEncoding = "GB2312"; public function getPinyin($str,$p ...