梦见世界

  博客园  :: 首页  :: 新随笔  :: 联系 :: 订阅 订阅  :: 管理
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') 将会跳到子孙状态.
    • 



    

  1. $state.go()
    2. 

  2. Click a link containing the ui-sref directive. Learn More
    3. 

  3. Navigate to the url associated with the state. Learn More
    4. 



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




 






        

	
        

            posted on 
2015-11-09 08:27 
梦见世界 
阅读(204) 
评论(0) 
 
收藏 
举报