在上一篇文章【 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还在处于不断积累阶段，欢迎各种大牛指教。

【AngularJS】——核心特性之路由