一个应用是由若个视图组合而成的，根据不同的业务逻辑展示给用户不同的视图，路由则是实现这一功能的关键。
-
路由
在后端开发中通过URL地址可以实现页面（视图）的切换，但是AngularJS是一个纯前端MVC框架，在开发单页面应用时，所有功能都在同一页面完成，所以无需切换URL地址（即不允许产生跳转），但Web应用中又经常通过链接（a标签）来更新页面（视图），当点击链接时还要阻止其向服务器发起请求，通过锚点（页内跳转）可以实现这一点。
实现单页面应用需要具备：
a、只有一页面
b、链接使用锚点
在单一页面中可以能过hashchange事件监听到锚点的变化，进而可以实现为不同的锚点准不同的视图，单页面应用就是基于这一原理实现的。而在AngularJS中对这一实现原理进行了封装，将锚点的变化封装成路由（Route）,这是与后端路由的根本区别。
-
使用
1、引入angular-route.js
<!--引入angularjs核心库-->
<script src="js/angular.min.js"></script>
<!--引入angularjs路由模块-->
<script src="js/angular-route.js"></script>
2、实例化模块（App）时，当成依赖传进去（模块名称叫ngRoute）。
//作为依赖传入
var App = angular.module('App',['ngRoute']);
3、配置路由模块
App.config(['$routeProvider',function ($routeProvider) {
$routeProvider.when('/index',{
template:'<h1>这是index页面！！！！！</h1>'
// templateUrl:'index.html'
})
.when('/book',{
template:'<h1>这是book页面！！！！！</h1>'
})
.when('/collect',{
template:'<h1>这是collect页面！！！！！</h1>'
})
.when('/home',{
template:'<h1>这是home页面！！！！！</h1>'
})
.otherwise({
redirectTo:'/index'
})
}])
在这里通过调用config方法配置路由，里面有两个参数，第一个参数为所要配置的服务，第二个参数为一个对象，配置当前路由的参数，如视图、控制器等，其中template就是字符串形式的视图模板，打印出一些内容，这个参数还可以是templateUrl,这样就会定位到外部文件。如果这个参数为 controller,就要结合控制器来使用， 这里的$routeProvider.when就相当于switch... case...语句，就是当锚点后面的值满足什么时会在当前显示什么内容,otherwise方法就是在不做任何点击操作时，所显示的内容。
4、布局模板
通过ng-view指令布局模板，路由匹配的视图会被加载渲染到些区域。
<ul class="list">
<li><a href="#/index">index</a></li>
<li><a href="#/book">book</a></li>
<li><a href="#/collect">collect</a></li>
<li><a href="#/home">home</a></li>
</ul>
<div class="content">
<!--视图会被加载并渲染到此处-->
<div ng-view=""></div>
</div>
Paste_Image.png
当配置路由其中有个参数是
controller的时候,要依赖控制器，代码如下：
App.config(['$routeProvider',function ($routeProvider) {
$routeProvider.when('/index',{
//定位到abc.html,使用控制器
templateUrl:'abc.html',
controller:'demoController'
})
.when('/book',{
template:'<h1>这是book页面！！！！！</h1>'
})
.when('/collect',{
template:'<h1>这是collect页面！！！！！</h1>'
})
.when('/home',{
template:'<h1>这是home页面！！！！！</h1>'
})
.otherwise({
redirectTo:'/index'
})
}])
App.controller('demoController',['$scope','$http','$routeParams', function ($scope,$http,$routeParams) {
$scope.content = "正在学习AngularJs路由；"
}])
abc.html中代码：
<body>
<div>{{content}}</div>
</body>
Paste_Image.png
-
路由参数
1、提供两个方法匹配路由，分别是when和otherwise，when方法需要两个参数，otherwise方法做为when方法的补充只需要一个参数，其中when方法可以被多次调用。
2、第1个参数是一个字符串，代表当前URL中的hash值。
3、第2个参数是一个对象，配置当前路由的参数，如视图、控制器等。
a)、template 字符串形式的视图模板
b)、templateUrl 引入外部视图模板
c)、controller 视图模板所属的控制器
d)、redirectTo跳转到其它路由，只能在otherwise方法中使用
4、获取参数，在控制中注入$routeParams可以获取传递的参数
Paste_Image.png
网友评论