ui-router的使用

使用時須要ui中用ui-view指令指定 如:

<div ui-view></div>

首先配置註冊 ui-route

var mainModule = angular.module('main', ['ui.router']);

因爲run方法是在angular啓動的時候就會執行的，能夠將路由跳轉控制放到run方法中，好比某種條件下禁止路由跳轉 另外全局事件也能夠放到run方法中

mainModule.run(function($rootScope,$state,$http,$stateParams){
    //這裏把$state和$stateParams這兩個對象放到$rootScope上，方便其它地方引用和注入。
    $rootScope.$state = $state;
    $rootScope.$stateParams = $stateParams;
    $rootScope.$on('$stateChangeStart', function(event, toState,
                        toParams, fromState, fromParams) {
                    if (toState.name === "yxlpm") {
                        // 這裏加入調出影響力排名頁面是作出的判斷
                        //使用jquery不使用$http是應爲$http的請求是不定時的，等請求完成頁面已經完成了跳轉，evet事件就無效
                        // 若是好友公司數少於5個側不顯示頁面，跳出提示
                        $.ajax({
                                    method : 'POST',
                                    url : '../userInfo/influence',
                                    async: false,
                                    headers : {
                                        'token' : $rootScope.token
                                    }
                                }).success(
                                function(resp, status, headers, config) {
                                    if (resp.code === 8037) {
//                                        $state.go('wo');   路由跳轉go方式
                                        event.preventDefault();// 取消默認跳轉行爲
                                        alert('您的影響力不足沒法查看');

                                    }
                                });
                    }

                });
})

基本路由配置

mainModule.config(function($stateProvider, $urlRouterProvider) {
        // $urlRouterProvider.otherwise('../dongtai/smdt.html');
        // //在配置（狀態配置和when()方法）中沒有找到url的任何匹配

        $stateProvider.state('news', {
                    url : '/news/:type', // 消息   type爲參數類型  取參數可用$stateParams.type
                    templateUrl : '../grsz/news.html'
                }).state('sousuo.zrssjg', {  
                    url : '/zrssjg/:topic', // 找人結果
                    templateUrl : '../sousuo/zrssjg.html'
                }).state('zwxq', {                    //注意這邊嵌套視圖的寫法
                    url : '/zwxq/:id', // 職位詳情
                    views : {
                        'view1' : {
                            templateUrl : '../wo/zwxq.html'
                        }，
                        ‘view2’：{
                            templateUrl : '../wo/zlxq.html'
                        }
                    }
                })
    });

    html:
    //傳參方式一、/news/1      反斜杆後面爲參數
    <a class="menu-item" href="#/news/1" hideblock>
          消息
    </a>
    //傳參方式二、topic爲參數名    用.號來控制sousuo頁面下的子頁面
    <a class="tag" ui-sref="sousuo.zrssjg({topic:ChildrenPosition.name})"</a>

    //指定路由
    <div ui-view="view1"></div> 
    <div ui-view="view2"></div>

state事件

//狀態改變以前觸發
    $rootScope.$on('$stateChangeStart', function(event, toState, toParams, fromState, fromParams){ ... })

    $rootScope.$on('$stateNotFound', function(event, unfoundState, fromState, fromParams){ ... })
    //example
    // somewhere, assume lazy.state has not been defined
$state.go("lazy.state", {a:1, b:2}, {inherit:false});

// somewhere else
$rootScope.$on('$stateNotFound', 
function(event, unfoundState, fromState, fromParams){ 
    console.log(unfoundState.to); // "lazy.state"
    console.log(unfoundState.toParams); // {a:1, b:2}
    console.log(unfoundState.options); // {inherit:false} + default options
})
//狀態改變成功以後觸發
    $rootScope.$on('$stateChangeSuccess', function(event, toState, toParams, fromState, fromParams){ ... })

    $rootScope.$on('$stateChangeError', function(event, toState, toParams, fromState, fromParams, error){ ... })

view事件

View被加載可是DOM樹構建以前時： 

    $scope.$on('$viewContentLoading', function(event, viewConfig){ ... }); 

    View被加載並且DOM樹構建完成時： 

    $scope.$on('$viewContentLoaded', function(event){ ... });

另外一種傳參方式

$state.go('sousuo.dtssjg', {topic : $scope.keyWord}, {reload : true});
    因爲html中沒法動態綁定ui-sref中的路徑，能夠在控制器中經過state來作跳轉

路由中的其餘配額

templateProvider：返回HTML字符串的函數 
    $stateProvider.state(‘blog.detail', {
    templateProvider: function ($timeout, $stateParams) {
      return $timeout(function () {
        return '<h1>' + $stateParams.blogID + '</h1>'
      }, 100);
    }
  })

  //如下幾個項目中並無進行配置，而是將功能分化到對控制器和指令中，具體功能也不太理解。可參照官方文檔：https://github.com/angular-ui/ui-router/wiki
  controller、controllerProvider：指定任何已經被註冊的控制器或者一個做爲控制器的函數 

  resolve：在路由到達前預載入一系列依賴或者數據，而後注入到控制器中。 

  data：數據不會被注入到控制器中，用途是從父狀態傳遞數據到子狀態。 

  onEnter/onExit：進入或者離開當前狀態的視圖時會調用這兩個函數 

關於angulsrjs入門介紹，可參閱這篇博文:http://www.zouyesheng.com/angular.html#toc66