ui-router的使用_html/css_WEB-ITnose

使用时需要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>(7) 事件

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 id="stateParams-blogID">' + $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