angularJS的路由！
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 id="a_tmpl" type="text/ng-template">
<h1>{{title}}</h1>
</script>
修改模板文件：
.when('/a',{
controller:'AController',
templateUrl:'a_tmpl'
})
这里是：找是否存在一个 a_tmpl 的script ， 如果有就把他作为模板去使用
我们可以使用 “ : 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控制器';
}]);
.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的路由！的更多相关文章
- AngularJS的路由、模块、依赖注入
AngularJS的路由在实际应用中更多是由另外封装好的angular-ui-router.js实现的! 为什么不用Ajax而要用前端路由?
- AngularJs ui-router 路由的介绍
AngularJs ui-router 路由介绍 野兽之前有写过一篇关于Angular自带的路由:ngRoute.今天来说说Angular的第三方路由:ui-router.那么有人就会问:为什么Ang ...
- AngularJS笔记---路由视图
最近有同事提到过关于ng-view的使用, 其实自己也不懂了,由于最近一直在做AngularJs的Rearch,所以就看了一些关于ng-view的国外博客. 做过ASP.NET MVC4的都知道, 我 ...
- AngularJs ng-route路由详解
本篇基于ng-route来讲下路由的使用...其实主要是 $routeProvider 搭配 ng-view 实现. ng-view的实现原理,基本就是根据路由的切换,动态编译html模板. 更多内容 ...
- 关于js单页面实现跳转原理以及利用angularjs框架路由实现单页面跳转
还记得我们刚开始学习html时使用的锚节点实现跳转吗? <a href="#target">我想跳转至目标位置</a> <p>第一条</p ...
- AngularJs ui-router 路由的简单介绍
之前有写过一篇关于Angular自带的路由:ngRoute.今天来说说Angular的第三方路由:ui-router.那么有人就会问:为什么Angular有了自带的路由,我们还需要用ui-router ...
- AngularJS(16)-路由
AngularJS 路由 本章节我们将为大家介绍 AngularJS 路由. AngularJS 路由允许我们通过不同的 URL 访问不同的内容. 通过 AngularJS 可以实现多视图的单页Web ...
- [AngularJS] “多重路由”嵌套模块——AngularJS“路由”嵌套学习资料教程
这是小编的一些学习资料,理论上只是为了自己以后学习需要的,但是还是需要认真对待的 以下内容仅供参考,请慎重使用学习 1.AngularJS路由嵌套 Angularjs本身自带路由模块,可以满足通过不同 ...
- 关于angularjs中路由页面强制更新的问题
有这么一个问题,在页面内路由页面跳转时,第一次跳入路由页面时是正常的,但是第二次会记住第一次时的状态,有时候并不想这样,想强制更新这个路由页面. 有一种方式就是使用 ui-sref-opts功能,我试 ...
随机推荐
- Java的四种引用类型之弱引用
先说结论: 首先,Java中有四种引用类型:强引用.软引用.弱引用.虚引用.-- 在 Java 1.2 中添加的,见 package java.lang.ref; . 其次,这几个概念是与垃圾回收有关 ...
- RequireJS使用小结1——for Effective JavaScript Module Loading
1. require和define的区别 The require() function is used to run immediate functionalities, while define() ...
- asp.net 后端验证
using EntryRegistration.Filters; using EntryRegistration.Models.Entity; using System; using System.C ...
- 【Java面试题】18 java中数组有没有length()方法？string没有lenght()方法？下面这条语句一共创建了多少个对象：String s="a"+"b"+"c"+"d";
数组没有length()这个方法,有length的属性.String有有length()这个方法. int a[]; a.length;//返回a的长度 String s; s.length();// ...
- 对sssp项目搭建的补充，总错误处理。
总错误处理,是为了在程序运行时代码出错能及时在控制台看出错误信息. 1. springMVC配置文件中: -------- 2.controller包中: 新建类FrameControllerAdvi ...
- 建造者模式(build pattern)-------创造型模式
将一个复杂对象的构建与它的标示分离,使得同样的构建过程可以创建不同的标示. 建造者模式是较为复杂的创建型模式,它将客户端与包含多个组成部分(或部件)的复杂对象的创建过程分离,客户端无须知道复杂对象的内 ...
- LINUX 环境变量总结
1.概述 Linux是一个多用户的操作系统.多用户意味着每个用户登录系统后,都有自己专用的运行环境.而这个环境是由一组变量所定义,这组变量被称为环境变量.用户可以对自己的环境变量进行修改以达到对环境的 ...
- Unity3d导出安卓版本
1. 要想导出安卓版,就必须要安装安卓 SDK,这个可以去这里下载. http://developer.android.com/sdk/index.html. 当我们打开后就是看见这个了. 2.当我 ...
- mongodb 安装（windows mongodb 安装）
MongoDB是一个介于关系数据库和非关系数据库之间的产品,是非关系数据库当中功能最丰富,最像关系数据库的.他支持的数据结构非常松散,是类似json的bjson格式,因此可以存储比较复杂的数据类型.M ...
- Entity Framework底层操作封装V2版本号（4）
这个版本号里面.由于涉及到了多库的操作.原有的系统方法不能做到这种事情了.所以这里有了一点差别 这个类的主要用作就是,连接字符串的作用,默认是指向默认配置里面的,可是你能够指向其它的连接 using ...