AngularJS-UI-Router

Posted 2020-08-22 不积小流，无以成江海

涉及知识点：

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

 

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