使用时需要ui中用ui-view指令指定 如:

首先配置注册 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 反斜杆后面为参数 消息 //传参方式2、topic为参数名 用.号来控制sousuo页面下的子页面 (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 '' + $stateparams.blogid + '' }, 100); } }) //以下几个项目中并没有进行配置，而是将功能分化到对控制器和指令中，具体功能也不太理解。可参照官方文档：https://github.com/angular-ui/ui-router/wiki controller、controllerprovider：指定任何已经被注册的控制器或者一个作为控制器的函数 resolve：在路由到达前预载入一系列依赖或者数据，然后注入到控制器中。 data：数据不会被注入到控制器中，用途是从父状态传递数据到子状态。 onenter/onexit：进入或者离开当前状态的视图时会调用这两个函数 关于angulsrjs入门介绍，可参阅这篇博文:http://www.zouyesheng.com/angular.html#toc66