angular UI-Router路由

angular UI-Router路由 （重要）

通过 AngularJS 可以实现多视图的单页Web应用。
AngularJS 路由 就通过 # + 标记 帮助我们区分不同的逻辑页面并将不同的页面绑定到对应的控制器上。

angular UI-Router路由

UI-Router被认为是AngularUI为开发者提供的最实用的一个模块。开发者可以创建嵌套分层的视图、在同一个页面使用多个视图、让多个视图控制某个视图等更多的功能。即使是非常复杂的web应用，UI-Router也可以极佳地驾驭。

1、ui-sref 指令链接到特定状态
Contacts   跳转页面

2、包含模块
angular.module('uiRouter', ['ui.router']);

3、ui-sref-active 查看当前激活状态并设置 Class

About

4、ng-view
该 div 内的 HTML 内容会根据路由的变化而变化。

  嵌套 View

 5、方便获得当前状态的方法，绑到根作用域

app.run(['$rootScope', '$state', '$stateParams',
     function($rootScope, $state, $stateParams) {
         $rootScope.$state = $state;
         $rootScope.$stateParams = $stateParams;
    }
]);

6、abstract 抽象模板（虚拟路由abstract:true先执行user， 再进入controller）

抽象模板不能被激活，但是它的子模板可以被激活。抽象模板可以提供一个包括了多个有名的视图的模板，或者它可以传递作用域变量$scope给子模板。

7、路由重定向 $urlRouterProvider

app.config(['$stateProvider', '$urlRouterProvider',
       function($stateProvider, $urlRouterProvider) {
            $urlRouterProvider.otherwise('/');
            // 错误的路由重定向
               $stateProvider
                   //登录入口
                     .state('homeIndex', {
                          url: '/console',  //浏览器显示的地址
                          templateUrl: 'views/homeIndex.html',  //模板，页面显示
                          controller: 'HomeCtrl' ， //控制器，业务处理
                           resolve: {
                                /*这部分实现按需加载，固定写法*/
                                dep: ['$ocLazyLoad', function ($ocLazyLoad) {
                                      return $ocLazyLoad.load('views/console/console.js')
                                    }],
                                 })
                        }
                ]);

知识点：
（1）$stateProvider 替换 $routeProvider （ng本身）
（2）$urlRouterProvider主要目的：
          一是建立一个默认路由，用于管理未知的URL（统一跳转到某处）。
          二是监听浏览器地址栏URL的变化，重定向到路由定义的状态中。
（3）AngularJS 通过 ocLazyLoad 实现动态（懒）加载模块和依赖。

相关地址：
http://www.cnblogs.com/youngdze/p/4025538.html
http://www.runoob.com/angularjs/angularjs-tutorial.html