angular的uiRouter服务学习(3)

本篇接着上一篇 angular的uiRouter服务学习(2) 继续讲解uiRouter的用法

本篇主要讲解uiRouter的多个命名的视图

我们可以给ui-view元素添加ui-view的值来给它命名,这样,一个视图模板里就可以有多个ui-view标签.

比如下面这个应用,它需要动态的填充一个图表,图表里有一些表格数据,筛选项,等:

给视图命名,需要在状态里定义views属性. views的属性值为一个对象.

views属性会覆盖template属性:

如果给状态定义了views属性,那么状态的template,templateUrl,templateProvider将会被无视掉. 考虑这种场景: 一个父视图模板,里面需要包含多个不同的视图. 在这种情况下,可以定义一个抽象状态来充当父状态,然后在子状态里定义views属性.

栗子-name匹配:

views对象里的属性名应该和ui-view元素里面的值所对应,像下面这样:

html:

<div>
  <a href="report">查看视图</a>
  <div ui-view></div>
  <div ui-view="filters"></div>
  <div ui-view="tabledata"></div>
  <div ui-view="graph"></div>
</div>

js:

var named = angular.module(‘namedView‘,[‘ui.router‘]);

var report = {
    name:‘report‘,
    url:‘/report‘,
    views:{
        ‘filters‘:{
            templateUrl:‘report-filters.html‘,
            controller:function($scope){
                $scope.title="我是filters的内容"
            }
        },
        ‘tabledata‘:{
            templateUrl:‘report-table.html‘,
            controller:function($scope){
                $scope.title="我是table的内容"
            }
        },
        ‘graph‘:{
            templateUrl:‘report-graph.html‘,
            controller:function($scope){
                $scope.title="我是graph的内容"
            }
        }
    }
};

named.config(function($locationProvider,$stateProvider){
    $locationProvider.html5Mode({enabled:true}).hashPrefix(‘!‘);
    $stateProvider.state(report)
});

report-filters.html,report-graph.html,report-table.html:

<h3>{{title}}</h3>

点击‘查看视图‘激活report状态:

可以看到,report状态被激活后,它有三个ui-view,不同的ui-view有不同的名字,然后通过定义状态的views属性来分别给三个ui-view定义templateUrl,controller.

视图名-相对名字和绝对名字:

views对象的视图名,有两种取法,一种是相对名字,一种是绝对名字.刚才我们看到的例子是绝对名字.如果是相对名字的话,要符合 [email protected] 这种格式. 其中,viewname就是视图中ui-view属性值; statename是状态名. 连起来就是:在statename状态下,寻找ui-view属性值为对应viewname的元素.

比如上面的例子,我们可以把它写成相对名字:

views:{
        ‘[email protected]‘:{
            ...
            }
        },
        ‘[email protected]‘:{
            ...
            }
        },
        ‘[email protected]‘:{
            ...
            }
        }
}

这样,视图名就变成了相对名字,这里statename为空,表示根状态,也就是起始html页面.

相对名字可以做一些很强大的视图匹配.比如下面这样一个例子:

named-views.html:

<div>
  <a href="report">查看视图</a>
  <a href="report/detail">查看子视图</a>
  <div ui-view>没有ui-view值</div>
  <div ui-view="aaa">ui-view值为aaa</div>
</div>

js:

var named = angular.module(‘namedView‘,[‘ui.router‘]);
var report = {
    name:‘report‘,
    url:‘/report‘,
    templateUrl:‘report.html‘
};
var detail = {
    name:‘report.detail‘,
    url:‘/detail‘,
    parent:‘report‘,
    views:{
        //绝对名字:在父状态的template(也就是report.html)里寻找对应名字为‘aaa‘的ui-view元素
        ‘aaa‘:{
            templateUrl:‘aaa.html‘
        },
                //绝对名字:在父状态的template(也就是report.html)里寻找没有名字的ui-view元素
        ‘‘:{
            templateUrl:‘report.detail.html‘
        },
                /*                ‘[email protected]‘:{
            templateUrl:‘aaa.html‘
        },
        ‘@report‘:{
            templateUrl:‘report.detail.html‘
        },*/
                //相对名字:在report.detail状态里寻找对应名字为‘bbb‘的ui-view元素
        ‘[email protected]‘:{
            templateUrl:‘bbb.html‘
        },
        //相对名字:在report.detail状态里寻找对应没有名字的ui-view元素
        ‘@report.detail‘:{
            templateUrl:‘no-name.html‘
        },
        //相对名字:在report状态里寻找对应名字为‘bbb‘的ui-view元素
        ‘[email protected]‘:{
            templateUrl:‘bbb2.html‘
        },
        //相对名字:在根状态(named-views.html)里寻找对应名字为‘aaa‘的ui-view元素
        ‘[email protected]‘:{
            templateUrl:‘aaa2.html‘
        },
        //相对名字:在根状态(named-views.html)里寻找没有名字的ui-view元素.
        //需要特别注意:这里等于是在子状态里定义了父状态的里ui-view,要这样写的话,最开始的两段绝对名字‘aaa‘和‘‘,就必须改成下面注释的两段相对名字‘[email protected]‘和‘[email protected]‘.
        //否则会造成错误.
        /*                ‘@‘:{
            templateUrl:‘report.html‘
        }*/
    }
};

named.config(function($locationProvider,$stateProvider){
    $locationProvider.html5Mode({enabled:true}).hashPrefix(‘!‘);
    $stateProvider.state(report).state(detail)
});

report.html:

<h1>report.html:</h1>
<div>
  <h2>ui-view值为空的内容:</h2>
  <div ui-view></div>
</div>
<div>
  <h2>ui-view值为‘aaa‘的内容:</h2>
  <div ui-view="aaa"></div>
</div>
<div>
  <h2>ui-view值为‘bbb‘的内容:</h2>
  <div ui-view="bbb"></div>
</div>

report.detail.html:

<h3>report.detail.html:</h3>
<div>
  <h4>ui-view值为空的内容:</h4>
  <div ui-view></div>
</div>
<div>
  <h4>ui-view值为‘bbb‘的内容:</h4>
  <div ui-view="bbb"></div>
</div>

aaa.html:

<h3>aaa.html:</h3>

bbb.html:

<h5>bbb.html</h5>

aaa2.html:

<h1>aaa2.html:</h1>

bbb2.html:

<h3>bbb2.html</h3>

no-name.html:

<h5>no-name.html</h5>

点击‘查看视图‘:

点击‘查看子视图‘:

下面分析一下视图的加载:

1.当进入report状态时,会用report.html来填充named-views.html里面的ui-view元素. (ui-view="aaa")不会被填充

2.进入report状态的子状态:report.detail状态.

  (1)‘aaa‘: 绝对名字,在父状态的视图模板里寻找对应名字为‘aaa‘的ui-view元素. 然后使用‘aaa.html‘来填充它.

  (2)‘‘: 绝对名字,在父状态的视图模板里寻找没有名字的ui-view元素.然后使用‘report.detail.html‘来填充它.

  (3)‘[email protected]‘: 相对名字,在report状态里寻找对应名字为‘aaa‘的ui-view元素. 然后使用‘aaa.html‘来填充它.

  (4)‘@report‘: 相对名字,在report状态里寻找没有名字的ui-view元素.然后使用‘report.detail.html‘来填充它.

* 注意,(1)(2)和(3)(4),一个是绝对,一个是相对,但其实都是在report状态里寻找.它们两者的区别最后会说到.

  (5)‘[email protected]‘: 相对名字,在report.detail状态里寻找对应名字为‘bbb‘的ui-view元素.然后使用‘bbb.html‘来填充它.

  (6)‘@report.detail‘: 相对名字,在report.detail状态里寻找没有名字的ui-view元素.然后使用no-name.html来填充它.

  (7)‘[email protected]‘: 相对名字,在report状态里寻找对应名字为‘bbb‘的ui-view元素,然后使用‘bbb2.html‘来填充它.

  (8)‘[email protected]‘: 相对名字,@后面为空,就表示在根状态(也就是named-views.html)里寻找对应名字为aaa的ui-view元素,然后使用‘aaa2.html‘来填充它

  (9)‘@‘: 相对名字, 表示在根状态(也就是named-views.html)里寻找没有名字的ui-view元素,然后使用‘report.html‘来填充它.

  (9)的填充方式,和1的填充,从视图匹配的角度来说,是完全一致的,都是在named-views.html里寻找没有名字的ui-view元素,然后用同一个模板来填充它.但是,从使用的角度来说,他们是不同的.

  就拿这个栗子来说: 我这里是把‘@‘给注释掉了,因为一旦使用了‘@‘,那么(1)(2)‘aaa‘和‘‘这两个绝对名字,会找不到他们父状态的视图模板.因为他们父状态的视图模板是通过相对名字来定义的.这个时候,如果要用‘@‘,就必须使用(3)(4)‘[email protected]‘和‘@report‘.

  *总结来说,绝对名字和相对名字,在一个状态里最好不要混用.

完整代码:https://github.com/OOP-Code-Bunny/angular/tree/master/uiRouter

参考原文:https://github.com/angular-ui/ui-router/wiki/Multiple-Named-Views

时间: 2024-11-08 08:24:42

angular的uiRouter服务学习(3)的相关文章

angular的uiRouter服务学习(1)

angular有内置的路由服务$route:angular -- $route API翻译 使用$route可以帮助实现路由的切换,视图的改变,但是这个内置的$route只包含了基本的功能,在很多场合下是不够用的.所以,需要学习使用uiRouter. 首先,在页面中链入'angular-ui-router.min.js',然后在模块中写入依赖: var myapp = angular.module('myApp',['ui.router']); 然后就可以使用一个叫做$state的服务,使用$s

angular的uiRouter服务学习(5) --- $state.includes()方法

$state.includes方法用于判断当前激活状态是否是指定的状态或者是指定状态的子状态. $state.includes(stateOrName,params,options) $state.includes方法接受三个参数,其中第二和第三个都不知道是干啥的...估计也不太用得到,就暂时不管了... stateOrName:字符串(必填). 是一个状态的名字. 比如当前的激活状态是 "contacts.details.item" 如下调用: $state.includes(&qu

成为优秀Angular开发者所需要学习的19件事

一款to-do app基本等同于前端开发的"Hello world".虽然涵盖了创建应用程序的CRUD方面,但它通常只涉及那些框架或库也能做到的皮毛而已. Angular看起来似乎总是在改变和更新 - 但实际上,还是有一些事情仍然保持不变.以下是关于Angular所需要学习的核心概念的概述,以便大家可以正确地利用JavaScript框架. 说到Angular,我们需要学习很多东西,很多人被困在初学者的圈子里,仅仅是因为不知道去哪里搜索或者应该搜索什么关键词.下面我们会说到的这个指南(也

c# windows 服务学习

用C#做windows服务变得简单对了===按照下面步骤来就行了用C#创建Windows服务(Windows Services)例子服务功能:这个服务在启动和停止时,向一个文本文件中写入一些文字信息. 第一步:创建服务框架 要创建一个新的 Windows 服务,可以从Visual C# 工程中选取 Windows 服务(Windows Service)选项,给工程一个新文件名,然后点击 确定.你可以看到,向导向工程文件中增加WebService1.cs类:其中各属性的含意是: Autolog 是

angular的splitter案例学习

angular的splitter案例学习,都有注释了,作为自己的备忘. 运行下面代码          Angular pane splitter example                     Pane 1                                       Pane 2                 Pane 3 .split-panes {left: 0px;right: 0px;top: 0px;bottom: 0px;position: absolut

MMS服务学习

1.分类: 1)带确认服务 如后台的遥控操作 2)不带确认的 如测控装置定时的电流.电压遥测量的上送 2.MMS基本思想 屏蔽具体装置技术细节实现异构装置之间的互联互通 ,各装置必须按照MMS的规范完成VMD与实际装置之间的映射 3.MMS对象和服务 1)VMD模型包含以下内容: i)对象.属性(名字.值.类型) ii)服务Read Write MMS服务学习,布布扣,bubuko.com

微服务学习和认识

微服务学习和认识 1.什么是微服务 微服务架构风格:是一类将单一应用程序作为由众多小型服务构成之套件加以开发的方式,其中各项服务都拥有自己的进程并利用轻量化机制(通常为HTTP源API)实现通信.这些服务围绕业务功能建立而成,且凭借自动化部署机制实现独立部署.这些服务匹配一套最低限度的中央式管理机制,且各服务可通过不同编程语言编写而成并使用不同的数据存储技术 2.微服务的目 有效的拆分应用,实现敏捷开发和部署 3.微服务的优点 开发简单 技术栈灵活 服务独立无依赖 独立部署.按需扩展 可用性高

介绍Angular的注入服务

其实angular的注入服务是挺复杂的,目前看源码也只看懂了一半,为了不误导大家,我也不讲敢讲太复杂,怕自己都理解错了. 首先我们要知道angular的三种注入方式: 第一种:inference var myModule = function($scope){ } 第二种:annotation var myModule = function($location){ console.log('Module:代码注入$location成功'); console.log($location); } m

angular访问后台服务及监控会话超时的封装

angular访问后台服务及监控会话超时的封装 angular本身自带访问组件http和httpclient,组件本身都是异步模式访问.本文只列举了对http组件的封装同时也一同处理会话超时监控. 获取组件源码请入QQ群706224870,在群文件中下载. 入群验证消息codefc. 实现思路概述: 1.将请求入参和出参统一约定 2.封装方法将请求参数.数据处理方法.数据呈现方法.访问错误处理方法封装在一起,业务调用通过服务调用该封装方法, 同时把请求参数.数据处理方法.数据呈现方法.访问错误处