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:
    //传参方式1、/news/1      反斜杆后面为参数
    <a class="menu-item" href="#/news/1" hideblock>
          消息
    </a>
    //传参方式2、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