发表于： 2017-06-07 23:56:17
1 1098
今天完成的事情：
完成找精英搜索页面；
明天计划的事情：
编写关于我们
遇到的问题：
暂无
收获：
如何让AngularJS实现了站内路由，其本质还是通过hash来完成的
[html] view plain copy
<!doctype html>
<html ng-app="bookStoreApp">
<head>
<meta charset="UTF-8">
<title>BookStore</title>
<!--当express直接访问/的时候被重定向到这里，然后静态资源文件如js等都是在public目录下进行加载的-->
<script src="1.3.0.14/angular.js"></script>
<script src="1.3.0.14/angular-route.js"></script>
<script src="1.3.0.14/angular-animate.js"></script>
<!--然后加载app.js，这是一个模块，定义了该模块依赖的一些如控制器，过滤器，服务，指令等-->
<script src="app.js"></script>
<script src="controllers.js"></script>
<script src="filters.js"></script>
<script src="services.js"></script>
<script src="directives.js"></script>
</head>
<body>
<!--这里是视图显示区域-->
<div ng-view>
</div>
</body>
</html>
我们再来看看app.js中如何指定了依赖模块，同时是如何实现站内路由的。注意：ng-view是由ngRouter模块提供的一个特殊指令，他的独特之处是在HTML中给$router对应的视图内容占位，他会创建自己的作用域并将模版嵌套在内部。ng-view是一个优先级为1000的终极指令，angularjs不会运行同一个元素上的低优先级指令。ngView指令遵循下面的规则：
。每次触发$routeChangeSuccess事件视图都会更新
。如果某个模版和当前的路由相关联：
(1)创建一个新的作用域；(2)移除上一个视图，同时上一个作用域也会被清除；(3)将新的作用域和当前模版关联在一起；(4)如果路由中有相关的定义，那么就把对应的控制器和当前作用域关联起来；(5)触发$viewContentLoaded事件；(6)如果提供了onload属性，调用该属性指定的函数。
[javascript] view plain copy
//定义了一个模块bookStoreApp，第二个参数是该模块依赖的模块。其中<bookStoreCtrls>是一个模块，其中封装了两个控制器分别为bookStoreCtrls，BookListCtrl
//其中模块<bookStoreFilters>是一个过滤器
//模块<bookStoreServices>定义了一个服务
//模块<bookStoreDirectives>定义了一个指令集合
var bookStoreApp = angular.module('bookStoreApp', [
'ngRoute', 'ngAnimate', 'bookStoreCtrls', 'bookStoreFilters',
'bookStoreServices', 'bookStoreDirectives'
]);
//在这个app模块中我们配置了路由，如果是访问了hello就会重定向到http://localhost:3008/hello这个视图文件
//同时这个视图文件通过HelloCtrl这个控制器进行渲染
bookStoreApp.config(function($routeProvider) {
$routeProvider.when('/hello', {
templateUrl: 'http://localhost:3008/hello',
controller: 'HelloCtrl'
}).when('/list',{
//如果是list那么渲染视图http://localhost:3008/bookList，同时渲染工作由BookListCtrl来完成
templateUrl:'http://localhost:3008/bookList',
controller:'BookListCtrl'
}).otherwise({
redirectTo: '/hello'
})
});
很显然是通过模块的config方法来完成的，同时实现了注入$routeProvider对象，最后通过这个对象的when...otherwise方法来实现路由的。记住，上面的ng-view是指定了视图的显示区域。其站内路由还是通过hash来完成的：
我们谈谈ajax:ajax的页面浏览器回退按钮会失效；无法分享页面，也就无法加书签；SEO无法起作用，于是就有了前端路由的观点。前端路由的原理：通过hash值#;HTML5提供的API也可以完成;路由的核心是给应用定义"状态";使用路由会影响应用整体的编码方式(预先定义好状态);考虑兼容性问题与优雅降级。
返回列表
评论