首页 > 代码库 > AngularJS-UI-Router

AngularJS-UI-Router

涉及知识点:

$stateProvider,$urlRouteProvider

ui-href

$stateParams,$state

 

1.如何引用依赖angular-ui-router

1 angular.module(‘app‘,["ui.router"])2   .config(function($stateProvider){3     $stateProvider.state(stateName, stateCofig);4 })

 

2.ui-router配置路由$stateProvider

.config(function($stateProvider) {    $stateProvider.state(‘dashboard.home‘, {         url: ‘/home‘,        views: {           "content": {                    controller: ‘HomeCtrl‘,                    templateUrl: ‘dashboard/home/home.tpl.html‘            }        },        data: { pageTitle: ‘Home‘ },        restricted: true     }); }) 

 

具体参数:$stateProvider.state(stateName, stateConfig)

stateName是string类型,stateConfig是object类型

stateConfig包含的字段:template, templateUrl, templateProvider, controller, controllerProvider, resolve, url, params, views, abstract, onEnter, onExit, reloadOnSearch, data

$stateProvider.state("home",{});//statConfig可以为空对象
//state可以有子父级
$stateProvider.state("home",{});$stateProvider.state("home.child",{})$stateProvider.state("home",{}).state("about",{}).state("photos",{});//state可以是链式的

 

3.$urlRouteProvider

$urlRouteProvider.when(whenPath, toPath)
$urlRouterProvider.otherwise(path)
$urlRouteProvider.rule(handler)

 

4.$state.go

$state.go(to, [,toParams],[,options])
形参to是string类型,必须,使用"^"或"."表示相对路径;
形参toParams可空,类型是对象;
形参options可空,类型是对象,字段包括:location为bool类型默认true,inherit为bool类型默认true, relative为对象默认$state.$current,notify为bool类型默认为true, reload为bool类型默认为false

$state.go(‘photos.detail‘)
$state.go(‘^‘)到上一级,比如从photo.detail到photo
$state.go(‘^.list‘)到相邻state,比如从photo.detail到photo.list
$state.go(‘^.detail.comment‘)到孙子级state,比如从photo.detail到photo.detial.comment

 

5.ui-sref

ui-sref=‘stateName‘
ui-sref=‘stateName({param:value, param:value})‘

 

参考URL:

http://www.cnblogs.com/littlemonk/p/5500801.html

https://github.com/angular-ui/ui-router/wiki/URL-Routing

http://www.cnblogs.com/littlemonk/p/5484322.html

AngularJS-UI-Router