angularJS 路由：（分发需求）

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

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

<script type='text/javascript' src='bower_components/angular/angular.js'></script>

<script type='text/javascript' src='bower_components/angular-route/angular-route.js'></script>

<script type="text/javascript">

// 创建一个模块

var myApp = angular.module('myApp',['ngRoute']);

//配置路由

myApp.config(['$routeProvider',function($routeProvider){

}]);

</script>

做路由的配置：

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

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

<script type='text/javascript' src='bower_components/angular/angular.js'></script>

<script type='text/javascript' src='bower_components/angular-route/angular-route.js'></script>

<body ng-app="myApp">

    <ul>

        <li><a href="#/a">a</a></li>

        <li><a href="#/b">b</a></li>

        <li><a href="#/c">c</a></li>

    </ul>

    <div ng-view></div>

</body>

<script type="text/javascript">

// 创建一个模块

var myApp = angular.module('myApp',['ngRoute']);

//配置路由

myApp.config(['$routeProvider',function($routeProvider){

    $routeProvider

    .when('/students/:name?',{

        controller:'AController',

        templateUrl:'./view/a.html'

    })

    .when('/a',{

        controller:'AController',

        templateUrl:'./view/a.html'

    })

    .when('/b',{

        controller:'BController',

        templateUrl:'./view/b.html'

    })

    .when('/c',{

        controller:'CController',

        templateUrl:'./view/c.html'

    })

    .otherwise({

        //重定向，做跳转

        redirectTo:'/c'

    });

}]);

myApp.controller('AController',['$scope','$routeParams',function($scope,$routeParams){

    $scope.title = '你好'+$routeParams+'这里是A控制器';

}]);

myApp.controller('BController',['$scope',function($scope){

    $scope.title = '这里是B控制器';

}]);

myApp.controller('CController',['$scope',function($scope){

    $scope.title = '这里是C控制器';

}]);

</script>

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

解决方法：使用 script 标签

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

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

    <h1>{{title}}</h1>

</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控制器

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. MySql C++调用库Connector/c++编译 和 接口封装【三】Connector/c++ 使用总结及封装

    工程需要加上各个路径: 库使用需要几个文件: 1.include 文件夹 c/c++ /常规/附加包含目录 Connector/c++ 的安装版里面的Include 文件夹.或者把 /driver以及 ...

  2. 用CSS创建打印页面

    用CSS创建打印页面,不必为打印而专门建立一个HTML文件,可以节省一些体力,其前提是按“WEB标准”用CSS+DIV布局HTML页面. 第一.在HTML页面加入为打印机设置的CSS文件 <li ...

  3. (一) Qt Model/View 的简单说明

    (一) Qt Model/View 的简单说明 .预定义模型 (二)使用预定义模型 QstringListModel例子 (三)使用预定义模型QDirModel的例子 (四)Qt实现自定义模型基于QA ...

  4. Spring 4 官方文档学习（十）数据访问之DAO支持

    1.介绍 Spring 中 Data Access Object (DAO)支持 的目标是以一种一致的方式更简单的使用JDBC.Hibernate.JPA或JDO等数据访问技术.可以在前面说的几种数据 ...

  5. C#有关的vshost、exe、config格式说明

    vshost.exe.config是程序运行时的配置文本 exe.config是程序运行后会复制到vshost.exe.config app.config是在vshost.exe.config和exe ...

  6. erlang的Socket的积压的消息的数量

    转自:http://blog.csdn.net/pkutao/article/details/8572216 {ok, Listen} = gen_tcp:listen(?defPort, [bina ...

  7. perl 函数的参数列表

    在perl中,定义一个函数的时候,不需要在圆括号内指定具体的参数,所有的参数都从@_ 这个列表中得到 代码示例: sub test { my ($a, $b) = @_; print qq{$a\t$ ...

  8. sqlldr导入数据（以PostgreSql>>>Oracle为例）

    1.在目标数据库中创建表 1.1点击源表,复制创建语句 1.2 修改数据类型以匹配目标数据库,如: 字符串类型:character varying(20)>>>varchar2(20 ...

  9. 感谢各位亲们的大力支持，免费的HTML5学习课程《HTML5网页开发实例具体解释》连载已经结束了！

    感谢各位亲们的大力支持,免费的HTML5学习课程<HTML5网页开发实例具体解释>连载已经结束了.  有兴趣的读者能够看我的博客,也能够看以下的链接逐个学习: 当里个当.免费的HTML5连 ...

  10. sudo 之后 unable to resolve host的问题解决办法

    gedit /etc/hosts #127.0.0.1 localhost #127.0.0.1 Masterback或者其他 把后面的Masterback 或者其他改成新的主机名,应该是最近修改过主 ...