针对 angularjs-ui-router(v0.3.1)
创建ng应用
引入ui-router依赖,以数组形式引入,每个依赖逗号隔开
var app = angular.module('app',[
'ui.router'
]);
1.路由配置:
配置如下,login状态对应#/login路由,缺省#;同理#/login对应login状态,可设置引入模版页面和模版页面引入的控制器
app.config(['$logProvider', '$stateProvider','$urlRouterProvider', function($logProvider, $stateProvider,$urlRouterProvider){
//路由配置
$stateProvider
//首页
.state('index',{
url: '/',
data:{
pageTitle:'首页'
},
controller: "indexController",
templateUrl: 'tpl/login.html'
})
//登录
.state('login',{
url: '/login',
data:{
pageTitle:'登录'
},
controller: "loginController",
templateUrl: 'tpl/login.html'
})
}]);
2.路径过滤和路径拦截:
app.config(['$logProvider', '$stateProvider','$urlRouterProvider', function($logProvider, $stateProvider,$urlRouterProvider){
//错误路由跳转
$urlRouterProvider
.when('/c?id', '/contacts/:id')
.when('/accounts', '/accounts/my_account')
.when('/companyAccounts', '/companyAccounts/my_account')
.otherwise('/');
}]);
3.初始化设置:
把$state服务挂在在根作用域下某个自定义属性,供页面使用
app.run(
['$rootScope', 'loginService', '$state', '$urlRouter','$window',
function($rootScope, loginService, $state, $urlRouter, $window) {
$rootScope.state=$state;
}
]
);
$state服务:常用方法属性介绍
$state.reload() 刷新当前状态,会重新载入引用的页面模版
$state.go("statename") 跳转到指定状态(路由跳转)
$state.includes("statename") 当前路由对应状态与statename相同放回true
模版页面使用:
<a name="state.includes('login')">登录</a>
路径出在#/login对应状态为login,name=true“”
4.根作用域事件:
注释提示就是执行的时间,回调会返回各个对象:
事件对象,当前状态,当前状态参数,上一个状态,上一个状态参数
app.run(
['$rootScope', 'loginService', '$state', '$urlRouter','$window',
function($rootScope, loginService, $state, $urlRouter, $window) {
$rootScope.state=$state;
//路由变化事件处理 开始
$rootScope.$on('$stateChangeStart', function(event, toState, toParams, fromState, fromParams){
});
//路由变化事件处理 成功
$rootScope.$on('$stateChangeSuccess', function(event, toState, toParams, fromState, fromParams){
});
//路由变化事件处理 失败
$rootScope.$on('$stateNotFound', function(event, unfoundState, fromState, fromParams){
});
//路由变化事件处理 错误
$rootScope.$on('$stateChangeError', function(event, toState, toParams, fromState, fromParams, error){
});
}
]
);
返回上一个状态功能实现:
可封装在一个方法内,供使用
//路由变化事件处理 成功
$rootScope.$on('$stateChangeSuccess', function(event, toState, toParams, fromState, fromParams){
$rootScope.previousState_name = fromState.name;
$rootScope.previousState_params = fromParams;
$state.go($rootScope.previousState_name,$rootScope.previousState_params);
});
5.提供者对象服务
$urlRouterProvider:
提供路径处理
$stateProvider:
提供状态处理
6.指令 ui-sref
解析为 href="#/login" 看app.config配置
<a ui-sref="login" >登录</a>
6.指令 ui-sref-active
当路径路由分析出的状态和ui-sref设置相同,添加active类名
<a ui-sref="login" ui-sref-active="active">登录</a>