angular.js学习 ui-router 0.2.15

1. ui-router 是以状态驱动的，一个状态等价于该应用内的一个ui部分。

2，使用实例如下，当一个状态被激活后，它所代表的模板html就会被插入到ui-view中。

<!-- in index.html -->
<body ng-controller="MainCtrl">
  <section ui-view></section>
</body>

var myApp = angular.module("myApp", [&apos;ui.router&apos;]);
myApp.config(function ($stateProvider, $urlRouterProvider) {
     $urlRouterProvider.when("", "/PageTab");
     $stateProvider
        .state("PageTab", {
            url: "/PageTab",
            templateUrl: "PageTab.html"
        })
        .state("PageTab.Page1", {
            url:"/Page1",
            templateUrl: "Page1.html"
        })
});

3. 如何激活一个state，方法有三：

　　1.调用$state.go(to [, toParams] [, options]),to参数是以".”来分隔父状态和子状态

$state.go('contact.detail') 将会跳到 'contact.detail'状态
$state.go('^') 将会跳到父状态.
$state.go('^.sibling') 将会跳到兄弟状态.
$state.go('.child.grandchild') 将会跳到子孙状态.

$state.go()
Click a link containing the ui-sref directive. Learn More
Navigate to the url associated with the state. Learn More

4. 如何定义state对应的template

$stateProvider.state('contacts', {   // 直接写入template内容
  template: '<h1>My Contacts</h1>'
})

$stateProvider.state('contacts', {
  templateUrl: 'contacts.html'　　    // 填写template文件地址
})

$stateProvider.state('contacts', {
  templateUrl: function ($stateParams){
    return '/partials/contacts.' + $stateParams.filterBy + '.html'; //template是一个function 返回值为template文件地址
  }
})

$stateProvider.state('contacts', {
  templateProvider: function ($timeout, $stateParams) {
    return $timeout(function () {
      return '<h1>' + $stateParams.contactId + '</h1>'     
    }, 100);
  }
})