ng-route

ng-route是官方的原来就实现的路由器

范例如下:

angular.module('myApp',[])
    .config('myAppCtrl',['$routeProvider',function ( $routeProvider ) {

        $routeProvider
            .when('/',{
                templateUrl: 'views/page-a.html',controller: 'pageACtrl'
            })
            .when('/next',{
                templateUrl: 'views/page-b.html',controller: 'pageBCtrl'
            })

                 /* 对其他不合法的路由进行处理 */
        $routeProvider.otherwise('/404');
    }])

貌似已经足够我们使用了,但是问题是我们会遇到以下的情况

如果说我们有一个网页，左边是菜单栏，右边是各个菜单所对应的视图。那么，如果按照这样的定义，点击每个菜单项，岂不得刷新整个网页？
而且人肉眼会明显的感觉到不平滑感

所以我们需要使用ui-route

ui-route

ui-route是一种嵌套路由,简单的说,就是一个被路由出来的页面,再可以一个路由

• 第一层路由

/* 使用ui-router来进行路由定义，需要注入ui.router模块 */
var myApp = angular.module('myApp',['ui.router']);

/* 注入$stateProvider，$urlRouterProvider */
myApp.config(['$stateProvider','$urlRouterProvider',function ( $stateProvider,$urlRouterProvider ) {

    /* 使用when来对一些不合法的路由进行重定向 */
    $urlRouterProvider.when('','/main');

    /* 通过$stateProvider的state()函数来进行路由定义 */
    $stateProvider.state('main',{
        url: '/main',templateUrl: 'views/main.html',controller: 'MainCtrl'
    }).state('detail',{
        url: '/main/detail/store',templateUrl: 'views/detail.html',controller: 'DetailCtrl'
    })

    $stateProvider.state('404',{
        url: '/404',templateUrl: '404.html'
    })
}]);

在此处好像没有看出跟ng-route的区别,那请看第二层的路由,就明白了

• 第二层路由

<!-- main.html -->;
<div>这是侧边栏的菜单条目</div>
<div ui-view></div>

/* router.js */
var myApp = angular.module('myApp',['ui.router']);

myApp
    .config(['$stateProvider',function($stateProvider,$urlRouterProvider){

            $stateProvider
                    //为主菜单声明abstract属性和template属性
                    //那么视图就会自动加载到ui-view里
                    .state('main',{
                        abstract: true,url: '/main',template: '<ui-view />'
                    })

                    //通过"."的方式声明子视图
                    //这样，就能实现嵌套路由了
                    .state('main.page_a',{
                        url: '/page_a',templateUrl: 'views/template-a.html',controller: 'pageACtrl'
                    })
                    .state('main.page_b',{
                        url: '/page_b',templateUrl: 'views/template-b.html',controller: 'pageBCtrl'
                    })
        }]);

ui-view替代ng-view
abstract来说明是上一级路由的名字

如果需要了解ui-router更深层次的用法，可以查看其官方文档