AngularJS-UI-Router

涉及知识点：

$stateProvider,$urlRouteProvider

ui-href

$stateParams,$state

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

angular.module('app',["ui.router"])
　　.config(function($stateProvider){
　　　　$stateProvider.state(stateName, stateCofig);
})

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})'

6.详述

大多数应用中的states有一个url与他们相关联，URL Routing是需要在一开始就设计好的。

基本状态设置：

$stateProvider
    .state('contacts', {
        url: "/contacts",
        templateUrl: 'contacts.html'
    })

现在当用户输入index.html/contacts，'contacts' state将会被激活且主的ui-view将会和contacts.html一起生成。另一种方式，如果用户通过transitionTo('contacts')来transition to contact状态，则url将会更新成index.html/contacts。

URL参数

$stateProvider
    .state('contacts.detail', {
        url: "/contacts/:contactId",
        templateUrl: 'contacts.detail.html',
        controller: function ($stateParams) {
            // If we got here from a url of /contacts/42
            expect($stateParams).toBe({contactId: "42"});
        }
    })

或者可以选用花括号形式，效果是一样的：

url: "/contacts/{contactId}"

例子：

    '/hello/'  //Matches only if the path is exactly '/hello/'. There is no special treatment for trailing slashes, and patterns have to match the entire path, not just a prefix.
    '/user/:id' //Matches '/user/bob' or '/user/1234!!!' or even '/user/' but not '/user' or '/user/bob/details'. The second path segment will be captured as the parameter 'id'.
    '/user/{id}'  //Same as the previous example, but using curly brace syntax.
    '/user/{id:int}' //The param is interpreted as Integer.

在link中使用parameters

<a ui-sref="contacts.detail({contactId: id})">View Contact</a>

参考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