AngularJS-UI-Router

標籤：包括   dashboard   not   log   url   abstract   ict   top   ide   

涉及知識點：

$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