AngularJS学习笔记（二）
五、angularjs的路由：
1.1 路由
现在开发中的视图越来越多，为了支持多个视图之间的跳转，引入了路由的概念。通过路由我们可以实现页面之间的跳转。
为什么需要路由?
因为ajax请求不会在浏览器中留下history,这对SEO（Search Engine Optimization 搜索引擎优化）是一种毁灭性打击。
1.2 传统路由
从1.2版本开始，AngularJS将ngRoutes从核心代码中剥离出来成为独立的模块。我们需要安
装并引用它，才能够在AngularJS应用中正常地使用路由功能
这行载入AngularJS脚本：
<script src="http://s1.phprm.com/min/f=angularjs/angular.js"></script>
这行载入AngularJS脚本：
<script src="http://s1.phprm.com/min/f=angularjs/angular-route.js"></script>
route/demo4.html源代码
<!DOCTYPE html> <html ng-app="my"> <head> <meta charset="utf-8" /> <title>路由</title> <script src="http://s1.phprm.com/min/f=angularjs/angular.js"></script> <script src="http://s1.phprm.com/min/f=angularjs/angular-route.js"></script> <script src="../js/demo4.js"></script> </head> <body> <div ng-view> </div> </body> </html>
在route目录下创建4个html文件。
route/a.html源代码
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> aaaaaaaaaaaaaaaaaa<br> <a href="#/">list.jsp</a> </body> </html>
route/b.html源代码
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> bbbbbbbbbbbbb </body> </html>
route/c.html源代码
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> cccccccccccc </body> </html>
route/list.html源代码
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <a href="#/a">a.html</a><br> <a href="#/b">b.html</a><br> <a href="#/c">c.html</a><br> <!--href值不在是 xxx.html路径，它需要指定的是angularJS中路由规定的url--> </body> </html>
访问/angularjs/route/demo4.html将会自动跳转到/angularjs/route/demo4.html#/
所有的链接访问都会改变浏览器地址栏的url。
1.3 高级路由
AngularJS社区还构建了很多可以用来最大限度地提升应用能力的
优秀的库.我们介绍AngularUI库所提供的最有用的库之一便是ui-router。它是一个路由框架，允许你通过状态机
组织接口，而不是简单的URL路由。
在使用ui-router我们要确保导入angular-ui-router.js（注意，这个文件我们要单独下载）
同时还需要将ui.router作为依赖注入到你的应用中：
angular.module('myApp', ['ui.router']);
在处理ngRoute服务时我们不再使用ng-view，而改为使用ui-view指令。
相比传统路由的优点：
支持多层嵌套
传统路由是基于url，而高级路由基于status（状态）
本文链接:http://blog.zhengshuiguang.com/js/angularjs-2.html
收藏随意^^请保留教程地址.
评论已关闭