AngularJS中ui-router全攻略

Darren Ji發表於2016-01-29

首先是angular-ui-router的基本用法。

■ 如何引用依賴angular-ui-router

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

■ $stateProvider.state(stateName, stateConfig)

stateName是string型別
stateConfig是object型別

//statConfig可以為空物件
$stateProvider.state("home",{});

//state可以有子父級
$stateProvider.state("home",{});
$stateProvider.state("home.child",{})

//state可以是鏈式的
$stateProvider.state("home",{}).state("about",{}).state("photos",{});

stateConfig包含的欄位：template, templateUrl, templateProvider, controller, controllerProvider, resolve, url, params, views, abstract, onEnter, onExit, reloadOnSearch, data

■ $urlRouteProvider

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

■ $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

■ ui-sref

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

■ ui-view

==沒有名稱的ui-view

<div ui-view></div>

$stateProvider.state("home",{
    template: "<h1>hi</h1>"
})

或者這樣配置：

$stateProvider.state("home"{
    views: {
        "": {
            template: "<h1>hi</h1>"
        }
    }
})

==有名稱的ui-view

<div ui-view="main"></div>

$stateProvider.state("home",{
    views: {
        "main" : {
            template: "<h1>hi</h1>"
        }
    }
})

==多個ui-view

<div ui-view></div>
<div ui-view="data"></div>

$stateProvider.state("home",{
    views: {
        "":{template: "<h1>hi</h1>"},
        "data": {template: "<div>data</div>"}
    }
})

■ 專案檔案結構

node_modules/
partials/
.....about.html
.....home.html
.....photos.html
app.js
index.html

■ 建立state和view

app.js

var photoGallery = angular.module('photoGallery',["ui.router"]);

photoGallery.config(function($stateProvider, $urlRouterProvider){
    $urlRouterProvider.otherwise('/home');

    $stateProvider
        .state('home',{
            url: '/home',
            templateUrl: 'partials/home.html'
        })
        .state('photos',{
            url: '/photos',
            templateUrl: 'partials/photos.html'
        })
        .state('about',{
            url: '/about',
            templateUrl: 'partials/about.html'
        })
})

index.html

<!DOCTYPE html>
<html lang="en" ng-app="photoGallery">
<head>
  <meta charset="UTF-8">
  <title></title>
  <link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.css"/>
</head>
<body>

  <h1>Welcome</h1>
  <div ui-view></div>

<script src="node_modules/jquery/dist/jquery.js"></script>

<script src="node_modules/angular/angular.js"></script>
<script src="node_modules/angular-ui-router/release/angular-ui-router.js"></script>
<script src="node_modules/angular-animate/angular-animate.js"></script>

<script src="node_modules/bootstrap/dist/js/bootstrap.js"></script>
<script src="node_modules/angular-bootstrap/ui-bootstrap-tpls.js"></script>

<script src="app.js"></script>
</body>
</html>

■ state之間的跳轉

index.html

<nav class="navbar navbar-inverse">
<div class="container-fluid">
  <div class="navbar-header">
    <button class="navbar-toggle collapsed" type="button" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
    </button>
    <a ui-sref="home" class="navbar-brand">Home</a>
  </div>
  <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
    <ul class="nav navbar-nav">
      <li>
        <a ui-sref="photos">Photos</a>
      </li>
      <li>
        <a ui-sref="about">About</a>
      </li>
    </ul>
  </div>
</div>
</nav>

<div ui-view></div>

以上通過ui-sref屬性完成state之間的跳轉。

■ 多個view以及state巢狀

有時候，一個頁面上可能有多個ui-view，比如：

<div ui-view="header"></div>
<div ui-view="body"></div>

假設，以上頁面屬於一個名稱為parent的state中。

我們知道在ui-router中，一個state大致是這樣設定的：

.state('content.photos',{
    url: 'photos',
    views:{
        "body@content":{templateUrl: 'partials/photos.html'}
    }
})

所有state下views下的所有鍵值對(類似 "body@content":{templateUrl: 'partials/photos.html'})都被放到一個鍵值集合中。而ui-view的工作原理就是根據自己的屬性值，到這個鍵值集合中去找匹配的鍵，找到就把對應的頁面顯示出來。

點選header對應的頁面連結，可能會跳轉到另外的子頁面出現在<div ui-view="body"></div>這個位置。這時候頁面出現了子父關係，而每個頁面都屬於某個state,這樣state間就出現了子父關係。這些跳轉的子頁面，在路由設定中，可能被稱為parent.son1, parent.son2...這就是state的巢狀。

在現有的檔案結構上增加content.html, header.html,檔案結構變為：

node_modules/
partials/
.....about.html
.....home.html
.....photos.html
.....content.html
.....header.html
app.js
index.html

content.html 包含了多各ui-view, 一個ui-view和頁頭相關，保持不變；令一個ui-view和會根據頁頭上的點選呈現不同的內容

<div ui-view="header"></div>
<div ui-view="body"></div>

header.html 把原先indext.html中nav部分放到這裡來

<nav class="navbar navbar-inverse">
  <div class="container-fluid">
    <div class="navbar-header">
      <button class="navbar-toggle collapsed" type="button" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a ui-sref="content.home" class="navbar-brand">Home</a>
    </div>
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav">
        <li>
          <a ui-sref="content.photos">Photos</a>
        </li>
        <li>
          <a ui-sref="content.about">About</a>
        </li>
      </ul>
    </div>
  </div>
</nav>

index.html 這時變成了這樣

<div ui-view></div>

app.js 路由現在這樣設定

var photoGallery = angular.module('photoGallery',["ui.router"]);

photoGallery.config(function($stateProvider, $urlRouterProvider){
    $urlRouterProvider.otherwise('home');

    $stateProvider
        .state('content',{
            url: '/',
            views:{
                "":{templateUrl: 'partials/content.html'},
                "header@content":{templateUrl: 'partials/header.html'},
            }
        })
        .state('content.home',{
            url: 'home',
            views:{
                "body@content":{templateUrl: 'partials/home.html'}
            }
        })
        .state('content.photos',{
            url: 'photos',
            views:{
                "body@content":{templateUrl: 'partials/photos.html'}
            }
        })
        .state('content.about',{
            url:'about',
            views:{
                "body@content":{templateUrl: 'partials/about.html'}
            }
        })
})

這時候，頁面是這樣呈現出來的：

→ 來到home這個路由

.state('content.home',{
    url: 'home',
    views:{
        "body@content":{templateUrl: 'partials/home.html'}
    }
})

以上，告訴我們partials/home.html將會被載入到與"body@content"匹配的ui-view中。暫時對應的ui-view還沒有出現，於是等待。

→ 路由看到index.html上的<div ui-view></div>

.state('content',{
    url: '/',
    views:{
        "":{templateUrl: 'partials/content.html'},
        "header@content":{templateUrl: 'partials/header.html'},
    }
})

於是，就找到了content這個state下views下的 "":{templateUrl: 'partials/content.html'}這個鍵值對，把partials/content.html顯示出來。

→ 分別載入partials/content.html頁面上的各個部分

看到<div ui-view="header"></div>，就載入如下：

"header@content":{templateUrl: 'partials/header.html'},

看到<div ui-view="body"></div>，先載入 "body@content":{templateUrl: 'partials/home.html'}

→ 點選header上的連結

點選<a ui-sref="content.photos">Photos</a>，來到：

.state('content.photos',{
    url: 'photos',
    views:{
        "body@content":{templateUrl: 'partials/photos.html'}
    }
})

把partials/photos.html顯示到<div ui-view="body"></div>中去。

點選<div ui-view="body"></div>，來到：

.state('content.about',{
    url:'about',
    views:{
        "body@content":{templateUrl: 'partials/about.html'}
    }
})

把partials/about.html顯示到<div ui-view="body"></div>中去。

■ state多級巢狀

以上，在路由設定中，state名稱有content, content.photos有了這樣的一層巢狀。接下來，要實現state的多級巢狀。

在photos.html頁面準備載入一個子頁面，叫做photos-list.html；
與photo-list.html頁面相鄰的還有一個頁面，叫做photo-detail.html；
在photo-detail.html頁面上載入一個子頁面，叫做photos-detail-comment.html;

這樣，頁面有了巢狀關係，state也相應的會有巢狀關係。

現在，檔案結構變成：

node_modules/
partials/
.....about.html
.....home.html
.....photos.html
.....content.html
.....header.html
.....photos-list.html
.....photo-detail.html
.....photos-detail-comment.html
app.js
index.html

photos.html 加一個容納子頁面的ui-view

photos
<div ui-view></div>

如何到達這個子頁面呢？修改header中的相關部分如下：

<nav class="navbar navbar-inverse">
  <div class="container-fluid">
    <div class="navbar-header">
      <button class="navbar-toggle collapsed" type="button" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a ui-sref="content.home" class="navbar-brand">Home</a>
    </div>
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav">
        <li>
          <a ui-sref="content.photos.list">Photos</a>
        </li>
        <li>
          <a ui-sref="content.about">About</a>
        </li>
      </ul>
    </div>
  </div>

以上，通過<a ui-sref="content.photos.list">Photos</a>來到photos.html的子頁面photos-list.html.

photos-list.html 通過2種途徑到相鄰頁photo-detail.html

<h1>photos-list</h1>
<ul>
  <li><a ui-sref="^.detail">我通過相對路徑到相鄰的state</a></li>
  <li><a ui-sref="content.photos.detail">我通過絕對路徑到相鄰的state</a></li>
</ul>

photo-detail.html 又提供了來到其子頁面photos-detail-comment.html的ui-view

<h1>photo-details</h1>
<a class="btn btn-default" ui-sref=".comment">通過相對路徑去子state</a>
<div ui-view></div>

photos-detail-comment.html 則很簡單：
<h1>photos-detail-comment</h1>

app.js state多級巢狀的設定為

var photoGallery = angular.module('photoGallery',["ui.router"]);

photoGallery.config(function($stateProvider, $urlRouterProvider){
    $urlRouterProvider.otherwise('home');

    $stateProvider
        .state('content',{
            url: '/',
            views:{
                "":{templateUrl: 'partials/content.html'},
                "header@content":{templateUrl: 'partials/header.html'},
            }
        })
        .state('content.home',{
            url: 'home',
            views:{
                "body@content":{templateUrl: 'partials/home.html'}
            }
        })
        .state('content.photos',{
            url: 'photos',
            views:{
                "body@content":{templateUrl: 'partials/photos.html'}
            }
        })
        .state('content.photos.list',{
            url: '/list',
            templateUrl: 'partials/photos-list.html'
        })
        .state('content.photos.detail',{
            url: '/detail',
            templateUrl: 'partials/photos-detail.html'
        })
        .state('content.photos.detail.comment',{
            url: '/comment',
            templateUrl: 'partials/photos-detail-comment.html'
        })
        .state('content.about',{
            url:'about',
            views:{
                "body@content":{templateUrl: 'partials/about.html'}
            }
        })
})

■ 抽象state

如果一個state,沒有通過連結找到它，那就可以把這個state設定為abstract:true,我們把以上的content和content.photos這2個state設定為抽象。

.state('content',{
    url: '/',
    abstract: true,
    views:{
        "":{templateUrl: 'partials/content.html'},
        "header@content":{templateUrl: 'partials/header.html'},
    }
})
...


.state('content.photos',{
    url: 'photos',
    abstract: true,
    views:{
        "body@content":{templateUrl: 'partials/photos.html'}
    }
})

那麼，當一個state設定為抽象，如果通過ui-sref或路由導航到該state會出現什麼結果呢？

--會導航到預設路由上

$urlRouterProvider.otherwise('home');

即

.state('content.home',{
    url: 'home',
    views:{
        "body@content":{templateUrl: 'partials/home.html'}
    }
})

最終把partials/home.html顯示出來。

■ 使用控制器

在實際專案中，資料大多從controller中來。

首先在路由中設定state所用到的控制器以及控制器別名。

var photoGallery = angular.module('photoGallery',["ui.router"]);

photoGallery.config(function($stateProvider, $urlRouterProvider){
    $urlRouterProvider.otherwise('home');

    $stateProvider
        .state('content',{
            url: '/',
            abstract: true,
            views:{
                "":{templateUrl: 'partials/content.html'},
                "header@content":{templateUrl: 'partials/header.html'},
            }
        })
        .state('content.home',{
            url: 'home',
            views:{
                "body@content":{
                    templateUrl: 'partials/home.html',
                    controller: 'HomeController',
                    controllerAs: 'ctrHome'
                }
            }
        })
        .state('content.photos',{
            url: 'photos',
            abstract: true,
            views:{
                "body@content":{
                    templateUrl: 'partials/photos.html',
                    controller: 'PhotoController',
                    controllerAs: 'ctrPhoto'
                }
            }
        })
        .state('content.photos.list',{
            url: '/list',
            templateUrl: 'partials/photos-list.html',
            controller: "PhotoListController",
            controllerAs: 'ctrPhotoList'
        })
        .state('content.photos.detail',{
            url: '/detail',
            templateUrl: 'partials/photos-detail.html',
            controller: 'PhotoDetailController',
            controllerAs: 'ctrPhotoDetail'
        })
        .state('content.photos.detail.comment',{
            url: '/comment',
            templateUrl: 'partials/photos-detail-comment.html'
        })
        .state('content.about',{
            url:'about',
            views:{
                "body@content":{templateUrl: 'partials/about.html'}
            }
        })
})

新增controller.js,該檔案用來定義所用到的controller.現在的檔案結構為：

asserts/
.....css/
.....images/
..........image1.jpg
..........image2.jpg
..........image3.jpg
..........image4.jpg
node_modules/
partials/
.....about.html
.....home.html
.....photos.html
.....content.html
.....header.html
.....photos-list.html
.....photo-detail.html
.....photos-detail-comment.html
app.js
index.html

controllers.js

photoGallery.controller('HomeController',['$scope', '$state', function($scope, $state){
    this.message = 'Welcome to the Photo Gallery';
}]);

//別名：ctrPhoto
photoGallery.controller('PhotoController',['$scope','$state', function($scope, $state){
    this.photos = [
        { id: 0, title: 'Photo 1', description: 'description for photo 1', imageName: 'image1.jpg', comments:[
            {name: 'user1', comment: 'Nice'},
            { name:'User2', comment:'Very good'}
        ]},
        { id: 1, title: 'Photo 2', description: 'description for photo 2', imageName: 'image2.jpg', comments:[
            { name: 'user2', comment: 'Nice'},
            { name:'User1', comment:'Very good'}
        ]},
        { id: 2, title: 'Photo 3', description: 'description for photo 3', imageName: 'image3.jpg', comments:[
            {name: 'user1', comment: 'Nice'}
        ]},
        { id: 3, title: 'Photo 4', description: 'description for photo 4', imageName: 'image4.jpg', comments:[
            {name: 'user1', comment: 'Nice'},
            { name:'User2', comment:'Very good'},
            { name:'User3', comment:'So so'}
        ]}
    ];

    //給子state下controller中的photos賦值
    this.pullData = function(){
        $scope.$$childTail.ctrPhotoList.photos = this.photos;
    }
}]);

//別名：ctrPhotoList
photoGallery.controller('PhotoListController',['$scope','$state', function($scope, $state){
    this.reading = false;
    this.photos = new Array();

    this.init = function(){
        this.reading = true;
        setTimeout(function(){
            $scope.$apply(function(){
                $scope.ctrPhotoList.getData();
            });
        }, 1500);
    }

    this.getData = function(){

        //呼叫父state中controller中的方法
        $scope.$parent.ctrPhoto.pullData();

        /*this.photos = $scope.$parent.ctrPhoto.photos;*/
        this.reading = false;

    }
}]);


//別名：ctrPhotoDetail
photoGallery.controller('PhotoDetailController',['$scope', '$state', function($scope,$state){

}]);

以上，通過$scope.$$childTail.ctrPhotoList在父state中的controller中拿到子state中的controller；通過$scope.$parent.ctrPhoto在子state中的controller中拿到父state中的controller。

photos-list.html

<h1>photos-list</h1>
<div ng-init="ctrPhotoList.init()">
  <div style="margin:auto; width: 40px;" ng-if="ctrPhotoList.reading">
    <i class="fa fa-spinner fa-5x fa-pulse"></i>
  </div>

  <div class="well well-sm" ng-repeat="photo in ctrPhotoList.photos">
    <div class="media">
      <div class="media-left" style="width:15%;">
        <a ui-sref="content.photos.detail">
          <img class="img-responsive img-rounded" src="../asserts/images/{{photo.imageName}}" alt="">
        </a>
      </div>
      <div class="media-body">
        <h4 class="media-heading">{{photo.title}}</h4>
        {{photo.description}}
      </div>
    </div>
  </div>
</div>

■ state間如何傳路由引數

在content.photos.detail這個state設定接收一個路由引數。

.state('content.photos.detail',{
    url: '/detail/:id',
    templateUrl: 'partials/photos-detail.html',
    controller: 'PhotoDetailController',
    controllerAs: 'ctrPhotoDetail'
})

photos-list.html 送出一個路由引數

<h1>photos-list</h1>
<div ng-init="ctrPhotoList.init()">
  <div style="margin:auto; width: 40px;" ng-if="ctrPhotoList.reading">
    <i class="fa fa-spinner fa-5x fa-pulse"></i>
  </div>

  <div class="well well-sm" ng-repeat="photo in ctrPhotoList.photos">
    <div class="media">
      <div class="media-left" style="width:15%;">
        <a ui-sref="content.photos.detail({id:photo.id})">
          <img class="img-responsive img-rounded" src="../asserts/images/{{photo.imageName}}" alt="">
        </a>
      </div>
      <div class="media-body">
        <h4 class="media-heading">{{photo.title}}</h4>
        {{photo.description}}
      </div>
    </div>
  </div>
</div>

以上，通過<a ui-sref="content.photos.detail({id:photo.id})">把路由引數送出。

controller.js PhotoDetailController控制器通過$stateParams獲取路由引數

...
//別名：ctrPhotoDetail
photosGallery.controller('PhotoDetailController', ['$scope', '$state', '$stateParams',
    function($scope, $state, $stateParams){

        var id = null;
        this.photo = null;
        this.init = function(){
            id = parseInt($stateParams.id);
            this.photo = $scope.ctrPhoto.photos[id];
        }

    }
]);

photos-detail.html 從以上的PhotoDetailController中獲取資料。

<h1>photo-details</h1>
<a class="btn btn-default" ui-sref=".comment">通過相對路徑去子state</a>
<a ui-sref="content.photos.list" style="margin-left: 15px;">
  <i class="fa fa-arrow-circle-left fa-2x"></i>
</a>

<div ng-init="ctrPhotoDetail.init()">
  <img class="img-responsive img-rounded" ng-src="../assets/images/{{ctrPhotoDetail.photo.imageName}}"
       style="margin:auto; width: 60%;">
  <div class="well well-sm" style="margin:auto; width: 60%; margin-top: 15px;">
    <h4>{{ctrPhotoDetail.photo.title}}</h4>
    <p>{{ctrPhotoDetail.photo.description}}</p>
  </div>

  <div style="margin:auto; width: 80%; margin-bottom: 15px;">
    <button style="margin-top: 10px; width:100%;"
            class="btn btn-default" ui-sref=".comment">Comments</button>
  </div>
</div>


<div ui-view></div>

■ state間如何傳字串引數

在路由中這樣設定：

.state('content.photos.detail.comment',{
    url:'/comment?skip&limit',
    templateUrl: 'partials/photos-detail-comment.html',
    controller: 'PhotoCommentController',
    controllerAs: 'ctrPhotoComment'
})

controllers.js 中修改如下

photoGallery.controller('HomeController',['$scope', '$state', function($scope, $state){
    this.message = 'Welcome to the Photo Gallery';
}]);

//別名：ctrPhoto
photoGallery.controller('PhotoController',['$scope','$state', function($scope, $state){
    this.photos = [
        { id: 0, title: 'Photo 1', description: 'description for photo 1', imageName: 'image1.JPG', comments:[
            { name:'User1', comment: 'Nice', imageName: 'man.png'},
            { name:'User2', comment:'Very good', imageName: 'man.png'},
            { name:'User3', comment:'Nice', imageName: 'woman.png'},
            { name:'User4', comment:'Very good', imageName: 'woman.png'},
            { name:'User5', comment:'Very good', imageName: 'man.png'},
            { name:'User6', comment:'Nice', imageName: 'woman.png'},
            { name:'User7', comment:'So so', imageName: 'man.png'}
        ]},
        { id: 1, title: 'Photo 2', description: 'description for photo 2', imageName: 'image2.JPG', comments:[
            { name:'User1', comment: 'Nice', imageName: 'man.png'},
            { name:'User2', comment:'Very good', imageName: 'man.png'},
            { name:'User3', comment:'Nice', imageName: 'woman.png'},
            { name:'User4', comment:'Very good', imageName: 'woman.png'}
        ]},
        { id: 2, title: 'Photo 3', description: 'description for photo 3', imageName: 'image3.JPG', comments:[
            { name:'User1', comment: 'Nice', imageName: 'man.png'},
            { name:'User2', comment:'Very good', imageName: 'man.png'},
            { name:'User3', comment:'Nice', imageName: 'woman.png'},
            { name:'User4', comment:'Very good', imageName: 'woman.png'},
            { name:'User5', comment:'Very good', imageName: 'man.png'},
            { name:'User6', comment:'Nice', imageName: 'woman.png'},
            { name:'User7', comment:'So so', imageName: 'man.png'}
        ]},
        { id: 3, title: 'Photo 4', description: 'description for photo 4', imageName: 'image4.JPG', comments:[
            { name:'User6', comment:'Nice', imageName: 'woman.png'},
            { name:'User7', comment:'So so', imageName: 'man.png'}
        ]}
    ];

    //給子state下controller中的photos賦值
    this.pullData = function(){
        $scope.$$childTail.ctrPhotoList.photos = this.photos;
    }
}]);

//別名：ctrPhotoList
photoGallery.controller('PhotoListController',['$scope','$state', function($scope, $state){
    this.reading = false;
    this.photos = new Array();

    this.init = function(){
        this.reading = true;
        setTimeout(function(){
            $scope.$apply(function(){
                $scope.ctrPhotoList.getData();
            });
        }, 1500);
    }

    this.getData = function(){

        //呼叫父state中controller中的方法
        $scope.$parent.ctrPhoto.pullData();

        /*this.photos = $scope.$parent.ctrPhoto.photos;*/
        this.reading = false;

    }
}]);


//別名：ctrPhotoDetail
photoGallery.controller('PhotoDetailController', ['$scope', '$state', '$stateParams',
    function($scope, $state, $stateParams){

        var id = null;
        this.photo = null;
        this.init = function(){
            id = parseInt($stateParams.id);
            this.photo = $scope.ctrPhoto.photos[id];
        }

    }
]);


photoGallery.controller('PhotoCommentController', ['$scope', '$state', '$stateParams',
    function($scope, $state, $stateParams){
        var id, skip, limit = null;
        this.comments = new Array();

        this.init = function(){
            id = parseInt($stateParams.id);
            var photo = $scope.ctrPhoto.photos[id];


            if($stateParams.skip){
                skip = parseInt($stateParams.skip);
            }else{
                skip = 0;
            }

            if($stateParams.limit){
                limit = parseInt($stateParams.limit);
            }else{
                limit = photo.comments.length;
            }

            this.comments = photo.comments.slice(skip, limit);

        }
    }
]);

也就是，$stateParams不僅可以接收路由引數，還可以接收查詢字串引數。

photo-detail.html 需要把查詢字串引數傳遞出去

<h1>photo-details</h1>
<a class="btn btn-default" ui-sref=".comment">通過相對路徑去子state</a>
<a ui-sref="content.photos.list" style="margin-left: 15px;">
  <i class="fa fa-arrow-circle-left fa-2x"></i>
</a>

<div ng-init="ctrPhotoDetail.init()">
  <img class="img-responsive img-rounded" ng-src="../assets/images/{{ctrPhotoDetail.photo.imageName}}"
       style="margin:auto; width: 60%;">
  <div class="well well-sm" style="margin:auto; width: 60%; margin-top: 15px;">
    <h4>{{ctrPhotoDetail.photo.title}}</h4>
    <p>{{ctrPhotoDetail.photo.description}}</p>
  </div>

  <div style="margin:auto; width: 80%; margin-bottom: 15px;">
    <button style="margin-top: 10px; width:100%;"
            class="btn btn-default" ui-sref=".comment({skip:0, limit:2})">Comments</button>
  </div>
</div>


<div ui-view></div>

以上，通過ui-sref=".comment({skip:0, limit:2})把查詢字串傳遞出去。

photos-detail-comment.html

<h1>photos-detail-comment</h1>

<div ng-init="ctrPhotoComment.init()" style="margin-top:15px;">
  <div ng-repeat="comment in ctrPhotoComment.comments" class="well well-sm" style="margin: auto; width: 60%;">
    <div class="media">
      <div class="media-left media-middle">
        <a href="">
          <img class="img-circle" style="width:60px;" src="../assets/images/{{comment.imageName}}" alt="">
        </a>
      </div>
      <div class="media-body">
        <h4 class="media-heading">{{comment.name}}</h4>
        {{comment.comment}}
      </div>
    </div>
  </div>
</div>

■ state間如何傳遞物件

通過data屬性，把一個物件賦值給它。

.state('content',{
    url: '/',
    abstract: true,
    data:{
        user: "user",
        password: "1234"
    },
    views:{
        "":{templateUrl: 'partials/content.html'},
        "header@content":{templateUrl: 'partials/header.html'},
    }
})

給header.html加上一個對應的控制器，並提供登出方法。

$stateProvider
    .state('content',{
        url: '/',
        abstract: true,
        data:{
            user: "user",
            password: "1234"
        },
        views:{
            "":{templateUrl: 'partials/content.html'},
            "header@content":{
                templateUrl: 'partials/header.html',
                controller: function($scope, $rootScope, $state){
                    $scope.logoff = function(){
                        $rootScope.user = null;
                    }
                }
            }
        }
    })

新增一個有關登入頁的state

.state('content.login',{
    url:'login',
    data:{
        loginError: 'User or password incorrect.'
    },
    views:{
        "body@content" :{
            templateUrl: 'partials/login.html',
            controller: function($scope, $rootScope, $state){
                $scope.login = function(user, password, valid){
                    if(!valid){
                        return;
                    }

                    if($state.current.data.user === user && $state.current.data.password === password){
                        $rootScope.user = {
                            name: $state.current.data.user
                        }

                        // Or Inherited

                        /*$rootScope.user = {
                            name: $state.$current.parent.data.user
                        };*/

                        $state.go('content.home');                            
                    }else{
                        $scope.message = $state.current.data.loginError;
                    }

                }
            }
        }
    }

})

新增login.html檔案，現在的檔案結構為：

asserts/
.....css/
.....images/
..........image1.jpg
..........image2.jpg
..........image3.jpg
..........image4.jpg
node_modules/
partials/
.....about.html
.....home.html
.....photos.html
.....content.html
.....header.html
.....photos-list.html
.....photo-detail.html
.....photos-detail-comment.html
.....login.html
app.js
index.html

login.html

<form name="form" ng-submit="login(user, password, form.$valid)">
    <div class="panel panel-primary" style="width:360px; margin: auto;">
        <div class="panel-heading">
            <h3 class="panel-title">Indentification</h3>
        </div>
        <div class="panel-body">
            <input name="user" type="text" class="form-control" ng-model="user" placeholder="User ..." required>
            <span ng-show="form.user.$error.required && form.user.$dirty" class="label label-danger">Enter the user</span>
            <hr>
            <input name="password" type="password" class="form-control" ng-model="password" placeholder="Password ..." required>
            <span ng-show="form.password.$error.required && form.password.$dirty" class="label label-danger">Enter the password</span>            
        </div>
        <div class="panel-footer">
            <button class="btn btn-default" type="submit">Login</button>
            <button class="btn btn-default" type="reset">Reset</button>
            <span class="label label-danger">{{message}}</span>            
        </div>    
    </div>
</form>

header.html 修改如下

<nav class="navbar navbar-inverse">
      <div class="container-fluid">
        <div class="navbar-header">
          <button class="navbar-toggle collapsed" type="button" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">            
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" ui-sref="content.home">Home</a>
        </div>

        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
          <ul class="nav navbar-nav">
                <li>
                    <a ui-sref="content.photos.list">Photos</a>    
                </li>
                <li>
                    <a ui-sref="content.about">About</a>    
                </li> 
          </ul>
            <ul class="nav navbar-nav navbar-right">                
                <li ng-if="user.name" class="dropdown">
                    <a class="dropdown-toggle" role="button" aria-expanded="false" href="#" data-toggle="dropdown">{{user.name}} <span class="caret"></span></a>
                    <ul class="dropdown-menu" role="menu">
                        <li><a ui-sref="content.home" ng-click="logoff()">Sing out</a></li>                        
                    </ul>                    
                </li>                                
                <li ng-if="!user.name">
                    <a ui-sref="content.login">Sing In</a>
                </li>                    
            </ul>    
        </div>
      </div>
    </nav>

■ onEnter和onExit事件

.state('content.photos.detail',{
    url: '/detail/:id',
    templateUrl: 'partials/photos-detail.html',
    controller: 'PhotoDetailController',
    controllerAs: 'ctrPhotoDetail',
    resolve:{
        viewing: function($stateParams){
            return{
                photoId: $stateParams.id
            }
        }
    },
    onEnter: function(viewing){

        var photo = JSON.parse(sessionStorage.getItem(viewing.photoId));
        if(!photo){
            photo = {
                views: 1,
                viewing: 1
            }
        }else{
            photo.views = photo.views + 1;
            photo.viewing = photo.viewing + 1;
        }

        sessionStorage.setItem(viewing.photoId, JSON.stringify(photo));

    },
    onExit: function(viewing){
        var photo = JSON.parse(sessionStorage.getItem(viewing.photoId));
        photo.viewing = photo.viewing - 1;
        sessionStorage.setItem(viewing.photoId, JSON.stringify(photo));
    }
})

在PhotoDetailController中：

photoGallery.controller('PhotoDetailController', ['$scope', '$state', '$stateParams',
    function($scope, $state, $stateParams){

        var id = null;
        this.photo = null;
        this.viewObj = null;
        this.init = function(){
            id = parseInt($stateParams.id);
            this.photo = $scope.ctrPhoto.photos[id];
            this.viewObj = JSON.parse(sessionStorage.getItem($stateParams.id));
        }

    }
]);

photos-detail.html

<h1>photo-details</h1>
<a class="btn btn-default" ui-sref=".comment">通過相對路徑去子state</a>
<a ui-sref="content.photos.list" style="margin-left: 15px;">
  <i class="fa fa-arrow-circle-left fa-2x"></i>
</a>

<div ng-init="ctrPhotoDetail.init()">
  <img class="img-responsive img-rounded" ng-src="../assets/images/{{ctrPhotoDetail.photo.imageName}}"
       style="margin:auto; width: 60%;">
  <div class="well well-sm" style="margin:auto; width: 60%; margin-top: 15px;">
    <div class="well well-sm pull-right" style="width: 100px;">
      <i>Views <span class="badge">{{ctrPhotoDetail.viewObj.views}}</span></i>
    </div>
    <div class="well well-sm pull-right" style="width: 110px;">
      <i>Viewing <span class="badge">{{ctrPhotoDetail.viewObj.viewing}}</span></i>
    </div>

    <h4>{{ctrPhotoDetail.photo.title}}</h4>
    <p>{{ctrPhotoDetail.photo.description}}</p>
  </div>

  <div style="margin:auto; width: 80%; margin-bottom: 15px;">
    <button style="margin-top: 10px; width:100%;"
            class="btn btn-default" ui-sref=".comment({skip:0, limit:2})">Comments</button>
  </div>
</div>


<div ui-view></div>

■ StateChangeStart事件

controller.js 增加如下

photoGallery.controller('RootController', ['$scope', '$state', '$rootScope',
    function($scope, $state, $rootScope){
        $rootScope.$on('$stateChangeStart',
            function(event, toState, toParams, fromState, fromParams){
                if(toState.data.required && !$rootScope.user){
                    event.preventDefault();
                    $state.go('content.login');
                }
            });

    }
]);

修改content這個state:

.state('content',{
    url:'/',
    abstract: true,
    data:{
        user: "user",
        password: "1234"
    },
    views:{
        "":{
            templateUrl: 'partials/content.html',
            controller: 'RootController'
        },
        "header@content":{
            templateUrl: 'partials/header.html',
            controller: function($scope, $rootScope, $state){
                $scope.logoff = function(){
                    $rootScope.user = null;
                }
            }
        }
    }

})

content.photos.detail這個state

    .state('content.photos.detail',{
        url:'/detail/:id',
        templateUrl: 'partials/photos-detail.html',
        controller: 'PhotoDetailController',
        controllerAs: 'ctrPhotoDetail',
        data:{
            required: true
        },
        resolve:{
            viewing: function($stateParams){
                return{
                    photoId: $stateParams.id
                }
            }
        },
        onEnter: function(viewing){
            
            var photo = JSON.parse(sessionStorage.getItem(viewing.photoId));
            if(!photo){
                photo = {
                    views: 1,
                    viewing: 1
                }
            }else{
                photo.views = photo.views + 1;
                photo.viewing = photo.viewing + 1;
            }
            
            sessionStorage.setItem(viewing.photoId, JSON.stringify(photo));
            
        },
        onExit: function(viewing){
            var photo = JSON.parse(sessionStorage.getItem(viewing.photoId));
            photo.viewing = photo.viewing - 1;
            sessionStorage.setItem(viewing.photoId, JSON.stringify(photo));
        }
    })

以上，新增了
data:{
   required: true
}

同理，content.photos.detail.comment這個state

.state('content.photos.detail.comment',{
        url:'/comment?skip&limit',
        templateUrl: 'partials/photos-detail-comment.html',
        controller: 'PhotoCommentController',
        controllerAs: 'ctrPhotoComment',
        data:{
            required: true
        }
    })

■ StateNotFound事件

photosGallery.controller('RootController', ['$scope', '$state', '$rootScope',
            function($scope, $state, $rootScope){
                
                $rootScope.$on('$stateChangeStart', 
                function(event, toState, toParams, fromState, fromParams){
                    
                    if(toState.data.required && !$rootScope.user){
                        event.preventDefault();
                        $state.go('content.login');
                        return;
                    }    
                    
                });
                
                $rootScope.$on('$stateNotFound', 
                function(event, unfoundState, fromState, fromParams){
                    event.preventDefault();
                    $state.go('content.notfound');
                });
            }
]);

新增一個state:

    .state('content.notfound',{
        url:'notfound',
        views: {
            "body@content": {templateUrl: 'partials/page-not-found.html'}    
        }        
    })

page-not-found.html

<div class="well well-sm" style="margin: 20px;">
    <i class="fa fa-frown-o fa-4x pull-left"></i><h3>404 - Sorry! Not found your page.</h3>
</div>

■ StateChangeSuccess事件

photosGallery.controller('RootController', ['$scope', '$state', '$rootScope',
            function($scope, $state, $rootScope){
                
                $rootScope.accessLog = new Array();
                
                $rootScope.$on('$stateChangeStart', 
                function(event, toState, toParams, fromState, fromParams){
                    
                    if(toState.data.required && !$rootScope.user){
                        event.preventDefault();
                        $state.go('content.login');
                        return;
                    }    
                    
                });
                
                $rootScope.$on('$stateNotFound', 
                function(event, unfoundState, fromState, fromParams){
                    event.preventDefault();
                    $state.go('content.notfound');
                });
                
                $rootScope.$on('$stateChangeSuccess', 
                function(event, toState, toParams, fromState, fromParams){
                    $rootScope.accessLog.push({
                        user: $rootScope.user,
                        from: fromState.name,
                        to: toState.name,
                        date: new Date()
                    });
                });
                
            }
]);

新增一個state

    .state('content.log',{
        url:'log',
        data:{
            required: true
        },
        views: {
            "body@content": {templateUrl: 'partials/log.html'}    
        }        
    })

log.html

<h1><i class="fa fa-file-text-o"></i> Access Log</h1>
<div style="margin:auto; width: 380px;">
    <div class="well well-sm" ng-repeat="log in accessLog track by $index">
        <i class="fa fa-pencil fa-2x pull-left"></i>
        {{log.user ? log.user.name: 'anonymous'}} in {{log.date | date: 'longDate'}} at {{log.date | date: 'shortTime'}}
        <p>From: {{log.from}} => to: {{log.to}}</p>
    </div>
</div>

■ StateChangeError事件

photosGallery.controller('RootController', ['$scope', '$state', '$rootScope',
            function($scope, $state, $rootScope){
                
                $rootScope.accessLog = new Array();
                
                $rootScope.$on('$stateChangeStart', 
                function(event, toState, toParams, fromState, fromParams){
                    
                    if(toState.data.required && !$rootScope.user){
                        event.preventDefault();
                        $state.go('content.login');
                        return;
                    }    
                    
                });
                
                $rootScope.$on('$stateNotFound', 
                function(event, unfoundState, fromState, fromParams){
                    event.preventDefault();
                    $state.go('content.notfound');
                });
                
                $rootScope.$on('$stateChangeSuccess', 
                function(event, toState, toParams, fromState, fromParams){
                     $rootScope.accessLog.push({
                         user: $rootScope.user,
                         from: fromState.name,
                         to: toState.name,
                         date: new Date()
                     });
                });
                
                $rootScope.$on('$stateChangeError', 
                function(event, toState, toParams, fromState, fromParams, error){
                    event.preventDefault();
                    $state.go('content.error', {error: error});
                });
                
            }
]);

新增2個state:

    .state('content.profile', {
        url:'profile',
        data:{
            required: true
        },
        resolve:{
            showError: function(){
                throw 'Error in code.';
            }
        },
        views:{
            "body@content": {template: '<div>Error</div>'}
        }    
    })
    
 .state('content.error',{
        url:'error/:error',
        views:{
            "body@content":{
                templateUrl: 'partials/error.html',
                controller: function($scope, $stateParams){
                    $scope.error = {
                        message: $stateParams.error
                    }
                }
            }
        }
    })

error.html

<div class="well well-sm" style="margin: 20px;">
    <i class="fa fa-exclamation-circle fa-2x"> Sorry! But this message was displayed: {{error.message}}</i>
</div>

AngularJS-Learning ui-router angular-transitions
2015-04-01
AngularJSUI
AngularJS ui-router重新整理子頁面路由
2018-07-23
AngularJSUI路由
angularJS中Provider
2016-05-19
AngularJSIDE
angularjs中的$eval方法
2016-09-21
AngularJS
AngularJS中的transclusion案例
2016-01-25
AngularJS
angularjs中的$state.go
2016-10-03
AngularJSGo
angularjs 使用中的積累
2017-04-27
AngularJS
Javacript和AngularJS中的Promises
2016-02-07
JavaAngularJSPromise
AngularJS中的http攔截
2016-02-08
AngularJSHTTP
angularjs中ng-show的使用
2016-09-17
AngularJS
angularjs中響應回車事件
2016-09-23
AngularJS事件
angularjs中ng-class的使用
2016-09-13
AngularJS
angularjs中ng-repeat的使用
2016-09-14
AngularJS
AngularJS 中的一些坑
2013-12-07
AngularJS
理解AngularJS中的Service型別
2014-09-22
AngularJS型別
AngularJS中處理多個promise
2016-02-02
AngularJSPromise
AngularJS中Scope間通訊Demo
2016-01-22
AngularJS
AngularJS中控制器繼承
2016-01-22
AngularJS繼承
在Eclipse中開發angularjs
2016-02-01
EclipseAngularJS
angularjs中的資料繫結
2016-02-01
AngularJS
Angularjs——初識AngularJS
2023-01-13
AngularJS
AngularJS select中ngOptions用法詳解
2020-04-04
AngularJSGo
走進AngularJs(四)自定義指令----（中）
2013-10-30
AngularJS
AngularJS中轉換響應內容
2016-01-27
AngularJS
angularjs中，為什麼要使用resolve？
2018-04-17
AngularJS
AngularJS中Directive間互動實現合成
2015-12-28
AngularJS
AngularJS中頁面呈現html程式碼段
2016-02-03
AngularJSHTML
angularjs中的interval定時執行功能
2016-02-01
AngularJS
ASP中DLL的除錯環境配置全攻略 (轉)
2008-01-21
除錯
[Angular-Scaled web] 4. Using ui-router's named views
2014-11-04
AngularWebUIView
angularJs
2016-11-26
AngularJS
Https全攻略
2016-12-07
HTTP
Windows XP 全攻略
2007-10-13
Windows
angularjs中的ng-src和ng-href
2016-09-13
AngularJS
angularjs中的雙向繫結原理解析
2017-03-31
AngularJS
AngularJS中寫一個包裹HTML元素的directive
2016-02-03
AngularJSHTML
在 AngularJS 中將 XML 轉換為 JSON
2015-11-24
AngularXMLJSON
Angularjs(一)
2017-02-22
AngularJS

AngularJS中ui-router全攻略

相關文章