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. Spark1.0.0 学习路线指导

    转自:http://www.aboutyun.com/thread-8421-1-1.html 问题导读1.什么是spark?2.spark编程模型是什么?3.spark运维需要具有什么知识?4.sp ...

  2. Mastering the game of Go with deep neural networks and tree search浅析

    Silver, David, et al. "Mastering the game of Go with deep neural networks and tree search." ...

  3. (转)x264代码详细阅读之x264.c,common.c,encoder.c

    转自:http://alphamailpost.blog.163.com/blog/static/201118081201281103931932/ x264代码详细阅读第一之x264.chttp:/ ...

  4. Ironic , Openstack Baremetal Hypervisor

    Ironic , Openstack Baremetal Hypervisor,首发于UnitedStack Inc.. 转自: http://ju.outofmemory.cn/entry/4876 ...

  5. Golang - OSX配置VIM下的Golang开发环境 (MacOS为例)

    测试环境 MacOS 10.12.6 首先安装VIM brew install vim 我已经安装了 Vim 8.0版本 然后安装 Vundle ,这是一个vim包管理器 git clone http ...

  6. sip 认证分析

    转自:http://blog.csdn.net/wangqi0079/article/details/11569489 SIP类似Http协议.其认证模式也一样.Http协议(RFC 2616 )规定 ...

  7. jQuery为动态生成的select元素添加事件的方法

    项目中需要在点击按钮时动态生成select元素,为防止每次点击按钮时从服务器端获取数据(因为数据都是相同的),可以这样写代码 1.首先定义全局js变量 var strVoucherGroupSelec ...

  8. shell基础篇(二)-shell变量

    1. 定义变量 1).定义变量时,变量名不加美元符号($),如: var="hello world"2).注意,变量名和等号之间不能有空格,这可能和你熟悉的所有编程语言都不一样.同 ...

  9. editplus修改配置文件保存位置

    虚拟桌面默认保存位置为:

  10. PHP防止跨站表单提交与同站跨页伪造表单的攻击

    在以前的防止跨站攻击的时候,使用了验证提交的页面是否是同一个站点,这样可以防止普通的攻击,ereg("blog.qita.in",$_SERVER['HTTP_REFERER']) ...