使用时需要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
