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. Tomcat负载均衡和集群环境的搭建

    实现此集群的方法参考了网上的很多文章,但由于很多文章都表明是原创的,故无法知道整个操作流程的真正作者是谁.下面就是我用我们真实的项目去实现这个过程.同时修复这过程中一些问题.以下的所有步骤均为亲自测试 ...

  2. 关于Unity中物理引擎的使用

    物理引擎控制刚体,刚体上面贴上图片,所以看起来就是游戏运行起来的状态 物理世界计算刚体的运行状态,通过贴图显现出运算结果. 一.物理引擎 1:Unity 2D物理引擎基于Box2D封装而成;2: 物理 ...

  3. 关于Unity中stretch的分开使用、预制体、Scroll View的UI节点

    一.上次讲的菊花的四个花瓣,只讲了四个花瓣和在一起的时候的作用,现在是分开的菊花的四个花瓣的作用 1.创建一个Canvas2.对Canvas进行初始化3.创建一个Image的UI节点作为Canvas的 ...

  4. 基于jQuery的计算文本框字数的代码-jquery

    用户边输入计算同时进行,告诉用户还剩余多少可输入的字数,当超过规定的字数后,点击确定,会让输入框闪动 一.功能:  1.用户边输入计算同时进行,告诉用户还剩余多少可输入的字数;  2.当超过规定的字数 ...

  5. 修改MySQL的默认密码的四种小方法

    投稿:lijiao 字体:[增加 减小] 类型:转载 时间:2015-09-05我要评论 对于windows平台来说安装完MySQL后,系统就已经默认生成了许可表和账户,下文中就教给大家如何修改MyS ...

  6. (转)深入解析SendMessage、PostMessage

        转自:http://blog.csdn.net/xt_xiaotian/article/details/2778689 本文将使用C++语言,在MFC框架的配合下给出PostMessage.S ...

  7. Sublime Text3打造U盘便携Lua IDE

    下载Sublime Text  链接http://www.sublimetext.com/3 我下载的是win32 portable 版 便于放入U盘携带 解压 注冊: 能够复制下面部分直接贴入注冊栏 ...

  8. Session超时问题(AOP 过滤器)

    public class TimeoutAttribute : ActionFilterAttribute { public override void OnActionExecuting(Actio ...

  9. .net FrameWork各个版本之间的发展[转]

    上个星期看到了.NET 4.0框架退休日期逐渐临近文章,发现自己一直在使用NET  FrameWork,身为一个NET程序员,里面大概的区别自己还是知道的,但是自己要说出个所以然来了,发现还是有点力不 ...

  10. 微服务 通过EnableFeignClients调用其他服务的api

    今天在项目上遇到一个问题,通过当前service服务要调用到其他service服务的api接口时,可通过EnableFeignClients调用其他服务的api,大概的步骤如下: 1.在springb ...