五、angularjs的路由：
1.1 路由 现在开发中的视图越来越多，为了支持多个视图之间的跳转，引入了路由的概念。通过路由我们可以实现页面之间的跳转。 为什么需要路由? 因为ajax请求不会在浏览器中留下history,这对SEO（Search Engine Optimization 搜索引擎优化）是一种毁灭性打击。 1.2 传统路由 从1.2版本开始，AngularJS将ngRoutes从核心代码中剥离出来成为独立的模块。我们需要安 装并引用它，才能够在AngularJS应用中正常地使用路由功能 这行载入AngularJS脚本：
这行载入AngularJS脚本： route/demo4.html源代码 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | <!DOCTYPE html>
<html ng-app="my">
<head>
<meta charset="utf-8" />
<title>路由</title>
<script src="../js/demo4.js"></script>
</head>
<body>
<div ng-view>
</div>
</body>
</html>
|
在route目录下创建4个html文件。 route/a.html源代码 1 2 3 4 5 6 7 8 9 10 11 | <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
aaaaaaaaaaaaaaaaaa<br>
<a href="#/">list.jsp</a>
</body>
</html>
|
route/b.html源代码 1 2 3 4 5 6 7 8 9 10 | <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
bbbbbbbbbbbbb
</body>
</html>
|
route/c.html源代码 1 2 3 4 5 6 7 8 9 10 | <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
cccccccccccc
</body>
</html>
|
route/list.html源代码 1 2 3 4 5 6 7 8 9 10 11 12 13 | <!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./js/angularjs-2.html 收藏随意^^请保留教程地址.
|
