【AngularJS】——核心特性之路由
在上一篇文章【 AnglularJS】——几大核心特性（一）中，分享了AngularJS的两个特性：MVC和ng的模块化。今天介绍一下ng的路由机制。
1、AngularJS路由介绍
AngularJS路由功能主要实现一个视图跳转的功能，合理管理用户在使用过程中看到的界面。通过路由的设置，根据当前访问的URL展示对应的视图。
ng的路由机制是靠ngRoute提供的，是一个单独的模块，包含以下内容：
§ 服务$routeProvider用来定义一个路由表，即地址栏与视图模板的映射
§ 服务$routeParams保存了地址栏中的参数，例如{id : 1, name : 'yxm'}
§ 服务$route完成路由匹配，并且提供路由相关的属性访问及事件，如访问当前路由对应的controller
§ 指令ngView用来在主视图中指定加载子视图的区域
2、ng路由使用
1）添加：index.html
index页是主页面，包含ng-app和视图ng-view以及所有需要的引用。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title>routeTest</title>
<link href="lib/ionic/css/ionic.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above
<link href="css/ionic.app.css" rel="stylesheet">
-->
<!-- ionic/angularjs js -->
<script src="lib/ionic/js/ionic.bundle.js"></script>
<!-- cordova script (this will be a 404 during development) -->
<script src="cordova.js"></script>
<!-- your app's js -->
<script src="js/app.js"></script>
<script src="js/controllers.js"></script>
<script src="js/directives.js"></script>
<script src="js/routes.js"></script>
<script src="js/services.js"></script>
</head>
<body ng-app="itoo-basic-choosecourse">
<ion-nav-view></ion-nav-view>
</body>
</html>
2）增加：/templates/tabs.html
这个页面是布局页面，是HTML的代码片段，通过这些按钮，可以进入相应的详细页面
<ion-tabs class="tabs-icon-top tabs-color-active-balanced">
<ion-tab title="已选课程" icon-on="ion-star" icon-off="ion-star" ui-sref="tab.selectedCourses">
<ion-nav-view animation="slide-left-right" name="tab-selectedCourses">已选课程</ion-nav-view>
</ion-tab>
<ion-tab title="学生选课" icon-on="ion-pie-graph" icon-off="ion-pie-graph" ui-sref="tab.chooseCourses">
<ion-nav-view animation="slide-left-right" name="tab-chooseCourses">学生选课</ion-nav-view>
</ion-tab>
<ion-tab title="学生退课" icon-on="ion-person" icon-off="ion-person" ui-sref="tab.dropCourses">
<ion-nav-view animation="slide-left-right" name="tab-dropCourses">学生退课</ion-nav-view>
</ion-tab>
</ion-tabs>
3）增加/templates/detail.html
这个是内容模板，通过不同的URL进行加载访问
<div class="bar bar-header bar-balanced">
<h1 class="title">学生退课</h1>
</div>
<ion-content class="padding">
<br>
<br>
<div class="list">
<div class="item item-avatar calm-bg">
<img src="img/影视文学.jpg">
<h2>影视文学</h2>
<p>时间：周三</p>
<p>剩余人数：35</p>
</div>
<div class="item item-avatar PaleGreen-bg">
<img src="img/鬼谷子.jpg">
<h2>鬼谷子</h2>
<p>时间：周五</p>
<p>剩余人数：50</p>
</div>
<div class="item item-avatar">
<img src="img/影视文学.jpg">
<h2>影视文学</h2>
<p>时间：周三</p>
<p>剩余人数：35</p>
</div>
<div class="item item-avatar">
<img src="img/鬼谷子.jpg">
<h2>鬼谷子</h2>
<p>时间：周五</p>
<p>剩余人数：50</p>
</div>
</div>
</ion-content>
4）/js/route.js
添加的route，对页面跳转进行配置。angularjs提供了when和otherwise两个方法来定义路由。用config函数在特定的模块或应用中定义路由。
angular.module('itoo-basic-choosecourse.routes', [])
.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
//如果是tab状态被激活，加载tabs.html模板，注意这里的abstract:true
//表示tab只有在子状态显示的时候，它才显示，它本身是无法主动被激活的
.state("tab", {
url: "/tab",
abstract: true,
templateUrl: "templates/tabs.html",
})
//tab.message状态被激活，会显示tab-message.html模板，tab.message状态
//是在tabs.html中的ui-sref中设置的。
//同时注意views中的tab-message名字，这个也需要跟tabs.html中的ion-nav-view中的name一致
.state('tab.selectedCourses', {
url: '/selectedCourses',
views: {
'tab-selectedCourses': {
templateUrl: 'templates/tab-selectedCourses.html',
controller: "selectedCoursesCtrl"
}
}
})
//退课路由跳转，当url是dropCourses的时候，则跳转到templates/detail.html
.state('tab.dropCourses', {
url: '/dropCourses',
views:{
'tab-dropCourses':{
templateUrl: "templates/detail.html",
controller: "dropCoursesCtrl"
}
}
})
//选课路由跳转，当url是chooseCourses的时候，则跳转到templates/chooseCourses.html 未建立此测试页
.state('tab.chooseCourses', {
url: '/chooseCourses',
views:{
'tab-chooseCourses':{
templateUrl: "templates/tab-chooseCourses.html",
controller: "chooseCoursesCtrl"
}
}
})
//默认状态时tab.message
$urlRouterProvider.otherwise("/tab/selectedCourses");
});
实现效果：
3、ng-view显示解析
ngView指令遵循以下规则：
1、每次路由转换时触发$routeChangeSuccess事件，视图都会更新。
2、如果某个模版同当前的路由相关联：创建一个新的作用域。移除上一个视图，同时上一个作用域也会被清楚。
将新的作用域同当前摹本关联在一起。
如果路由中有相关的定义，那么就把对应的控制器同当前作用域关联起来。
触发$viewContentLoaded事件。
如果提供了onload属性，调用该属性所指定的函数。
------------------------------写在最后--------------------------
AngularJS还在处于不断积累阶段，欢迎各种大牛指教。