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