angular.js学习 ui-router 0.2.15

最新推荐文章于 2024-09-14 15:29:58 发布

avtcpm1927

最新推荐文章于 2024-09-14 15:29:58 发布

阅读量116

点赞数

文章标签： ui javascript ViewUI

原文链接：http://www.cnblogs.com/lifeisshort/p/4948949.html

版权

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