angular Multiple Named Views记录

原创
2015/08/29 10:46
阅读数 216


Notice that the view names are now specified as absolute names, as opposed to the relative name. It is targeting the 'filters', 'tabledata', and 'graph' views located in the root unnamed template. Since it's unnamed, there is nothing following the '@'. The root unnamed template is your index.html.

.state('report',{
    views: {      'filters@': { },      'tabledata@': { },      'graph@': { }
    }
  })

@后面没有名字,默认index.html(入口页面)就是模板文件

例子如下:http://plnkr.co/edit/ujgXbPJXQ3E13F9aFPBc?p=preview

例子中

 .state('route2', {
              url: "/route2",
                  views: {
                    'route2_1@': {
                    	templateUrl: "route2.html",
                      controller: function($scope){
                        alert("bbbb");
                      }
                    },
                    'route2_2@': {
                    	templateUrl: "route2.html",
                      controller: function($scope){
                      alert("aaa");
                      }
                    }
                  }
          })

route2@和route3@的@后面都没有名字,所以默认模板在入口index.html中找对应的ui-view

下面是练手写的一个tab的demo

<!DOCTYPE html>
<html ng-app="myapp">

  <head>
    <link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.1/css/bootstrap.min.css" rel="stylesheet">
  </head>

  <body class="container">
   <div  ui-view="main"></div>
    <!-- Angular -->
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.4/angular.js"></script>
    <!-- UI-Router -->
    <script src="//angular-ui.github.io/ui-router/release/angular-ui-router.js"></script>
    <script>
     var myapp = angular.module('myapp', ["ui.router"]);
    myapp.config(function($stateProvider, $urlRouterProvider){
      
      // For any unmatched url, send to /route1
      $urlRouterProvider.otherwise("/tab/route1")
      
      $stateProvider
        .state('tab', {
            url: "/tab",
             views: {
                     'main@':{
                       templateUrl: "tab.html"
                     }
                     
             }
           
        })
        .state('tab.route1', {
            url: "/route1",
             views: {
                     'tab@tab':{
                       templateUrl: "route1.html"
                     }
                     
             }
           
        })
        .state('tab.route1.list', {
            url: "/list",
            views: {
                    'main@': {
                    	templateUrl: "route1.list.html",
                    	controller:function($scope){
                    	  $scope.back=function(){
                    	    history.back();
                    	  }
                    	}
                    }
                  }
        })
         .state('tab.route1.list2', {
            url: "/list2",
            views: {
                    'route1_test@tab.route1': {
                    	template: "停留在route1.html页面",
                    }
                  }
        })
        .state('tab.route1.list3', {
            url: "/list3",
            views: {
                    'main@': {
                    	template: "11111",
                    }
                  }
        })
         .state('tab.route2', {
              url: "/route2",
                  views: {
                    'tab@tab':{
                       templateUrl: "route2.html"
                     }
                  }
          })
            .state('tab.route3', {
              url: "/route3",
                  views: {
                    'tab@tab':{
                       templateUrl: "route3.html"
                     }
                  }
          })
           .state('tab.route3.route3_1', {
              url: "/route3_1",
                  views: {
                    'route3_tab@tab.route3':{
                       templateUrl: "route3_1.html"
                     }
                  }
          })
           .state('tab.route3.route3_2', {
              url: "/route3_2",
                  views: {
                    'route3_tab@tab.route3':{
                       templateUrl: "route3_2.html"
                     }
                  }
          })
           .state('tab.route3.route3_3', {
              url: "/route3_3",
                    views:{
                      'route3_tab@tab.route3':{
                       templateUrl: "route3_3.html"
                     }
                  }
          })
        /*.state('route2', {
            url: "/route2",
            templateUrl: "route2.html"
        })*/
    })
    </script>
  </body>

</html>

在线例子在这里

http://plnkr.co/edit/ujgXbPJXQ3E13F9aFPBc?p=preview

展开阅读全文
打赏
0
0 收藏
分享
加载中
更多评论
打赏
0 评论
0 收藏
0
分享
返回顶部
顶部