文档章节

angular Multiple Named Views记录

巴顿
 巴顿
发布于 2015/08/29 10:46
字数 377
阅读 168
收藏 0


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

© 著作权归作者所有

巴顿

巴顿

粉丝 51
博文 232
码字总数 27820
作品 0
广州
程序员
私信 提问
Angular.js 相关记录

AngularJS作用域文档:http://docs.angularjs.org/api/ng.$rootScope.Scope ng-view 指令的角色是为当前路由把对应的视图模板载入到布局模板中。 AngularJS内置过滤器:http://code.angular...

彭博
2014/04/25
304
2
AngularJS - Top 6 Concepts that Developers Loved

This article represents top 6 popular AngularJS topics that has been used most by the AngularJS developer community to date. The inference is derived based on number of tagged d......

perfectspr
2014/12/03
54
0
Migrating a SpringWebMVC App from JSP to AngularJS

Migrating a Spring Web MVC application from JSP to AngularJS Engineering Michael Isvy August 19, 2015 Note on authors This post is a guest post by Han Lim and Tony Nguyen.Han an......

miscellanea
2015/08/24
218
0
All About Angular 2.0

angular All About Angular 2.0Posted by Rob Eisenberg on November 6th, 2014. Have questions about the strategy for Angular 2.0? This is the place. In the following article I'll e......

Ethan_prog
2015/03/06
149
0
谷歌发布 AngularJS 1.0,允许扩展HTML语法

谷歌今天发布了一个全新的Web模板——AngularJS 1.0。 谷歌称, AngularJS可以让你扩展HTML的语法,以便清晰、简洁地表示应用程序中的组件,并允许将标准的HTML作为你的模板语言。AngularJS...

oschina
2012/06/15
3.9K
8

没有更多内容

加载失败,请刷新页面

加载更多

OSChina 周日乱弹 —— 我,小小编辑,食人族酋长

Osc乱弹歌单(2019)请戳(这里) 【今日歌曲】 @宇辰OSC :分享娃娃的单曲《飘洋过海来看你》: #今日歌曲推荐# 《飘洋过海来看你》- 娃娃 手机党少年们想听歌,请使劲儿戳(这里) @宇辰OSC...

小小编辑
今天
154
8
spring cloud

一、从面试题入手 1.1、什么事微服务 1.2、微服务之间如何独立通讯的 1.3、springCloud和Dubbo有哪些区别 1.通信机制:DUbbo基于RPC远程过程调用;微服务cloud基于http restFUL API 1.4、spr...

榴莲黑芝麻糊
今天
2
0
Executor线程池原理与源码解读

线程池为线程生命周期的开销和资源不足问题提供了解决方 案。通过对多个任务重用线程,线程创建的开销被分摊到了多个任务上。 线程实现方式 Thread、Runnable、Callable //实现Runnable接口的...

小强的进阶之路
昨天
6
0
maven 环境隔离

解决问题 即 在 resource 文件夹下面 ,新增对应的资源配置文件夹,对应 开发,测试,生产的不同的配置内容 <resources> <resource> <directory>src/main/resources.${deplo......

之渊
昨天
8
0
详解箭头函数和普通函数的区别以及箭头函数的注意事项、不适用场景

箭头函数是ES6的API,相信很多人都知道,因为其语法上相对于普通函数更简洁,深受大家的喜爱。就是这种我们日常开发中一直在使用的API,大部分同学却对它的了解程度还是不够深... 普通函数和...

OBKoro1
昨天
7
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部