zoukankan      html  css  js  c++  java

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

    


    

    
    
                
    
                
              
    • 
              
    
              
  • 

                相关阅读:
    
                
                  package.json文件
                    
    Node.js中模块加载机制
                    
    第三方模块
                    
    系统模块
                    
    Node.js快速入门及模块化开发
                    
    String 的扩展方法
                    
    ES6 的内置对象扩展
                    
    箭头函数
                    
    解构赋值
                    
    let、const、var 的区别
                    
                        
              
    • 
              
    
              
  • 
                原文地址：https://www.cnblogs.com/lifeisshort/p/4948949.html
              
    • 

            

          



          
          

            

            

          

        

      

      



      

      

        

          Copyright © 2011-2022 走看看