ui-router使用

ui-router官網
ui-router中文網,包含各種歷史版本信息
angularJS中文網

Angularjs ui-router：

前言:

官網原話:0.2.x狀態事件已被棄用。我們建議轉移到Transition Hooks，因爲它們提供更多的靈活性，支持異步，並提供實現有意義的應用程序行爲所需的上下文（Transition等）。

例如:下面這個例子已被廢棄($stateNotFound等也被廢棄)

var app = angular.module('myApp', ['ui.router']);

app.config(["$stateProvider", "$urlRouterProvider", function($stateProvider, $urlRouterProvider) {
    $stateProvider.state("index", {
        url: "/index",//匹配/index/不會匹配/index
        template: "<div ng-controller='testCtrl'><span ng-bind='containerCtrl'></span></div>",
        //注入$state.current可以查看當前state,包括data
        data: {
            customData1: 5,
            customData2: "blue"
        },
        //這裏的控制器的作用域就是當前<ui-view>所在控制器的$scope,該controller會在template裏面的控制器前加載
        controller: function($scope, $stateParams, $state) {
            console.log($scope)
            $scope.containerCtrl = "controller";
            console.log($scope.containerCtrl)
            console.log($stateParams)
            console.log($state.current)
        }
    })
    /*.state("index2", {
        url: "/index/:aa",//匹配/index/不會匹配/index
        template: "<div>/index/:aa</div>",
        data: {
            customData1: 5,
            customData2: "blue"
        },
        controller: function($scope, $stateParams, $state) {
            $scope.aa = $stateParams.aa;
            console.log($stateParams)
            console.log($state.current)
        }
    })*/
    .state("test1", {
        //abstract: true,// 設置爲true時，只能被繼承不能直接切換到此state
        url: "/test1",
        templateUrl: "/test/test1" // 必須包含<ui-view/>
    }).state("test1.detail", {
        url: "/detail",
        templateUrl: "/test/test1"
    }).state("test1.info", {
        url: "/info",
        templateUrl: "/test/test2"
    }).state("test2", {
        url: "/test2",
        templateUrl: "/test/test2",
        //進入頁面時會走該方法
        onEnter: function() {
            console.log('enter');
        },
        //離開時走該方法
        onExit: function() {
            console.log('exit');
        }
    }).state("test3", {
        url: "/test3",
        templateUrl: "/test/test3"
    })

    $urlRouterProvider.otherwise("/index");
    //$urlRouterProvider.when('', '/test3');
}]);

app.controller("containerCtrl", function($rootScope, $scope, $stateParams, $state) {
    $scope.containerCtrl = "containerCtrl";
    console.log($scope)
    console.log($state)
    //console.log($state.current)
});
app.controller("testCtrl", function($rootScope, $scope, $stateParams, $state) {
    $scope.containerCtrl = "testCtrl";
    console.log($scope)
    console.log($state)
    //console.log($state.current)
});

app.run(function($rootScope, $location, $state) {
    $rootScope.$on("$locationChangeStart", function() {
        //監聽url變化，在變化前做想要的處理
        console.log($location.path());
    });
    $rootScope.goTo = function(page) {
        $state.go(page);
    }
});

組件使用:

$stateProvider

$stateProvider.state(stateName, stateConfig)
參數:stateName視圖的名稱
參數:stateConfig爲對象形式，可以接受以下的形式

stateConfig參數

template，templateUrl，templateProvider

三種方法來設置您的模板。每個狀態只使用一個（或查看，見下文）！
template 字符串HTML內容或返回HTML字符串的函數
templateUrl 模板文件或函數的字符串URL路徑，返回URL路徑字符串
templateProvider 函數返回HTML內容字符串

controller， controllerProvider

一個控制器配對狀態
controller 函數或名稱作爲字符串
controllerProvider 函數（injectable）返回實際的控制器函數或字符串。

resolve

應該注入控制器的依賴關係圖
resolve 目的
keys - 要注入控制器的依賴項的名稱
factory -  {string|function}如果字符串，那麼它是服務的別名。否則，如果函數，它被注入並返回它被視爲依賴的值。如果結果是一個承諾，它的價值被注入到控制器之前解決

url

具有可選參數的網址。當一個狀態被導航或轉換到時，$stateParams服務將被傳入的任何參數填充

params

可以選擇配置在url中聲明的參數的映射，或者定義附加的非url參數。如果你不使用，只能在一個狀態內使用url。否則，你可以在url中指定你的參數。當一個狀態被導航或轉換到時，$stateParams服務將被傳入的任何參數填充。

views

abstract:abstract Boolean - (default is false)

onEnter, onExit

reloadOnSearch v0.2.5

data

$sP.decorator(name [, decorator])

$urlRouterProvider

$urlRouterProvider.when(whenPath, toPath)

從一個網址重定向到另一個。
whenPath:String或RegExp或UrlMatcher
toPath:String

$urlRouterProvider.otherwise(path)

處理無效路由通過重定向到path提供。

$urlRouterProvider.rule(handler)

用於自定義網址處理。

$state

服務負責表示狀態以及它們之間的轉換。它還提供了接口來詢問當前的狀態，甚至是來自你的狀態。--注入到控制器中可以查看當前路由的狀態$state.current

網上的例子:

    使用預載入功能，開發者可以預先載入一系列依賴或者數據，然後注入到控制器中。在ngRoute中resolve選項可以允許開發者在路由到達前載入數據保證（promises）。在使用這個選項時比使用angular-route有更大的自由度。
    預載入選項需要一個對象，這個對象的key即要注入到控制器的依賴，這個對象的value爲需要被載入的factory服務。
    如果傳入的時字符串，angular-route會試圖匹配已經註冊的服務。如果傳入的是函數，該函數將會被注入，並且該函數返回的值便是控制器的依賴之一。如果該函數返回一個數據保證（promise），這個數據保證將在控制器被實例化前被預先載入並且數據會被注入到控制器中。

$stateProvider.state('home', {
      resolve: {
        //這個函數的值會被直接返回，因爲它不是數據保證
        person: function() {
          return {
            name: "Ari",
            email: "[email protected]"
          }
        },
        //這個函數爲數據保證, 因此它將在控制器被實例化之前載入。
        currentDetails: function($http) {
          return $http({
            method: 'JSONP',
            url: '/current_details'
          });
        },
        //前一個數據保證也可作爲依賴注入到其他數據保證中！（這個非常實用）
        facebookId: function($http, currentDetails) {
          $http({
            method: 'GET',
            url: 'http://facebook.com/api/current_user',
            params: {
              email: currentDetails.data.emails[0]
            }
          })
        }
      },
      //定義控制器
      controller: function($scope, person, 
                    currentDetails, facebookId) {
          $scope.person = person;
      }
    })