angular路由
北京小课堂
分享人：吴昊杰
目录
1.背景介绍
2.知识剖析
3.常见问题
4.解决方案
5.编码实战
6.拓展思考
7.参考文献
8.更多讨论
1.背景介绍
一般来说，我们认为AngularJS是一套前端的MVC框架。那么，为了实现视图的中转，肯定会涉及到路由的概念。这里我们就来说说有关AngularJS的路由——ngRoute。
首先谈谈APP应用。平时我们用的app总是多页面，如果用原生安卓或者苹果，那当然很流畅啦。但是当我们用一般的html页面做移动端，简单时候我们可以用这样的标签去链接页面时，速度还是可以的。 但是当我们的应用越来越多时，切换起来没那么流畅。又是碍于网速，页面加载进来有点慢。但是在angular里面，我们可以用路由进行切换。因为在angular里面，我们用户一般在加载这样的应用时，会整个的缓存在手机上。我们用路由进行切换时，不用再发起HTTP请求了。体验比原来好。
2.知识剖析
ngRoute是一个AngularJS的模块。其不是在AngularJS的核心库当中。
在使用ngRoute的时候，实际上，我们是在应用的主模块中引入ngRoute模块并添加$routeProvider服务到主模块的config方法中来达到我们的目标。这与其他一些库的使用方式是类似的，如ng-grid。
在ngRoute中，主要有$route、$routeProvider、$routeParams三个服务项目。
$routeProvider用于在主应用主模块的配置方法中。$route与$routeParams一般常见于控制器中。
服务$routeProvider用来定义一个路由表，即地址栏与视图模板的映射
服务$routeParams保存了地址栏中的参数
服务$location用来实现用于获取当前url以及改变当前的url,并且存入历史记录
服务$route完成路由匹配，并且提供路由相关的属性访问及事件，如访问当前路由对应的controller
指令ngView用来在主视图中指定加载子视图的区域
angular路由可以实现多视图的单页Web应用。 当请求一个url时，根据路由配置匹配这个url，然后请求模板片段，并插入到ng-view中去。这种做法使网页局部刷新，减少了切换网页时带来的突兀感， 也减少了项目的代码量。
3.常见问题
ngRoute实现原理和如何使用路由？
ngRoute实现原理
我们知道，设置
<ahref="#div1">div1</a>
<ahref="#div2">div2</a>
<ahref="#div3">div3</a>
<divid="div1">我是div1</div>
<divid="div2">我是div2</div>
<divid="div3">我是div3</div>
这样的锚点，a链接会在同一页面中跳转。ngRoute利用了这一特性将锚点出的文件设置为模板，在锚点被链接时，监听到url的变化，加载相应的模板文件。
4.解决方案
NGROUTE包含以下部分：
服务$routeProvider用来定义一个路由表，即地址栏与视图模板的映射
服务$routeParams保存了地址栏中的参数
服务$location用来实现用于获取当前url以及改变当前的url,并且存入历史记录
服务$route完成路由匹配，并且提供路由相关的属性访问及事件，如访问当前路由对应的controller
指令ngView用来在主视图中指定加载子视图的区域
$routeProvider提供了定义路由表的服务，它有两个核心方法，when(path,route)和otherwise(params)。
ngRoute的使用
a.引入两个文件，angular和angular-route：
<script src="angular.min.js"></script>
<script src="angular-route.min.js"></script>
b.主页面中设置容器ng-view
c.然后在ng-app中注入ngRoute
d.最后配置路由表
一个简单的ngRoute结构示例
<script>
angular.module('indexApp', [ngRoute])
.config(['$routeProvider', function($routeProvider) {
$routeProvider
.when('/div1', {
template: '<p>这是div1{{text}}</p>',
controller: 'div1Controller'
})
.when('/div2', {
template: '<p>这是div2{{text}}</p>',
controller: 'div2Controller'
})
.when('/div3', {
template: '<p>这是div3{{text}}</p>',
controller: 'div3Controller'
})
.when('/content/:id', {
template: '<p>这是content{{id}}</p>',
controller: 'div4Controller'
})
.otherwise({
redirectTo: '/div1'
});
}]);
</script>
5.参考文献
菜鸟教程
AngularJS路由二三事（一）：ngRoute
ngRoute 模块_AngularJS中文网
6.更多讨论
为什么推荐用ui-router替代ngRoute
ngRoute在路由配置时用$routeProvider。
ui-router路由配置时用 $stateProvider 和$urlRouterProvider。
ngRoute是官方路由。
ui-route是第三方路由。
ngroute是用AngularJS框架的核心部分。
ui-router是一个社区库，它是用来提高完善ngroute路由功能的。
ui-router允许嵌套视图(nested views)和多个命名视图(multiple named views)。
问题一: 为什么ui-router可以嵌套路由而ng-router不能嵌套路由
答:因为ng-router没有明确的父子层级关系,ui-router明确了这一点
问题二:不同页面之间如何传参?
.controller('pageOneCtrl', function ($scope, $state) {
$scope.toPage2 = function (id) {
$state.go('page2', {ID:id});
};
//接收页面：
.controller('pageTwoCtrl’, function ($scope, $state, $stateParams) {
var receivedId = $stateParams.ID;
console.log(receivedId);
//打印的结果即为id
});
可以通过点击事件进行传参
html中：
ng-click=“toPage2(name,number)”
控制器中：
.controller('pageOneCtrl', function ($scope, $state) {
$scope.toPage2 = function (name,number) {
$state.go('page2', {
args:{
NAME:name,
NUMBER:number
});
};
});
在第二个页面中通过$staeParams获得参数ID。
.controller('pageTwoCtrl’, function ($scope, $state, $stateParams) {
var receivedName = $stateParams.args.NAME;
var receivedNumber = $stateParams.args.NUMBER;
});
问题三:paramr是做什么用的
params是路由之中页面的参数传递方式.
this.$router.push({
path:"/detail",
params:{
name:'nameValue',
code:10011
}
});
腾讯视频链接: https://v.qq.com/x/page/z0548ysulwk.html
PPT链接:https://ptteng.github.io/WEB/ppt/AngularRouter.html#/
鸣谢
感谢大家观看
BY : 李仁 | 吴昊杰
angular路由
小课堂
分享人: 吴昊杰
