AngularJS 视图和路由

高速连忙地加载 AngularJS 视图

2016/06/29 · JavaScript
· 1 评论 ·
AngularJS

正文小编: 伯乐在线
ThoughtWorks
。未经小编许可,禁止转发!
迎接出席伯乐在线 专栏撰稿人

当AngularJS应用程序变大时,许多主题材料就起来显现出来了,比方多层级视图的加载难点,假诺在子视图显示此前从未预加载,则恐怕在必要展现时,产生视觉闪烁的景色。那种难点在互联网缓慢,恐怕服务器使用极慢的https连接时更易于出现。

正文将研究越来越高效加载AngularJS视图的系统方法。

在AngularJS之后引用angular-route
 路由

AngularJS 视图一般规律

AngularJS视图也并不是何等尤其奇妙的手艺,在在那之中间正是按一般的directive来拍卖的。相当于说,当二个地点须要出示view时,AngularJS会尝试利用某种情势得到其HTML模板文件的具体内容、包装成directive,实施directive的正式流程,最终增多到页面上。

亚洲必赢app 1

回顾一下,directive本人是还是不是刚刚也帮衬templateUrl属性?那就与view才具衔接上了。

诸如此类说来,是还是不是视图模板也足以行使行内DOM以至是字符串字面量值了吧?答案是必然的!大家自然就足以选择一段行内DOM来作为view的模版。举个例子:

亚洲必赢app 2

本来,作为二个重型的AngularJS应用程序,将兼具view都置身字符串值里,只怕行内DOM里是不太现实的,我们愿意得以应用八个小的HTML文件来作为子模板。那样,尽管全数应用比极大,但各类子模板的公文并非常的小,一般都以几KB的小文件,当用户点击到钦命地点,必要时采纳对应分界面包车型客车模板时再去加载,也就明确坚实了频率。

我们能够用下图来表示“行内DOM”与“五个子模板文件”的性能比较:

亚洲必赢app 3

 

AngularJS 对视图加载的优化

上面提到了“多个子模板文件”的模版组织格局,这本是壹件很日常、很当然的职业措施而已。也正是由此,才令人们感觉AngularJS职业方法与投机的希望的同一:因为在未曾采用AngularJS在此之前,人们在付出三个Web应用时,页面正是那样一个个团体的。

不畏在在此以前,我们在论及质量的时候,自然会想到“缓存”。在在此之前,页面与页面之间的跳转使得各样页面都是相互独立的单位,因而页面内容的缓存只好有赖于浏览器了。最近,AngularJS让具有页面子模板都在“单页应用”中加载,于是,大家在那么些单页面应用内便收获了缓存页面内容的机会。

亚洲必赢app,AngularJS中内建了缓存机制templateCache:只要曾经加载过有些页面子模板,就能够在templateCahce中缓存起来,下次从服务器加载页面模板在此以前,先反省templateCache,借使已有缓存则没有要求从服务器上加载,直接选取。

亚洲必赢app 4

AngularJS中内建了templateCache
机制之后,加载视图的进度变得比十分的快而轻易,Web应用自个儿,以及开采者都无需关怀那一经过。可是,就算有页面内的templateCache,页面模板在第二使用时还是内需从服务器加载,由此偶尔能收看一些视觉闪烁的气象,举个例子标签切换、页面跳转等。

ngRoute模块加载申明

对AngularJS templateCache的优化

作为一种优化手腕,大家很自然能体会精通,既然页面能够在加载之后在templateCache起来就能够巩固质量,即便在行使运维之初templateCache中就有了装有页面包车型客车缓存,也就一贯不必要服务器了,那么在页面要求出示时,也将在旨无需加载时间了。图能够形成那样:

亚洲必赢app 5

要兑现那一对象,只要求在揭破应用此前,创设额外的templates.js
文件,在内部将享有的页面模板读收取来并提早put到templateCache中,再将形成的templates.js嵌入到利用中就能够在Web应用运转时就早已具备具有页面模板内容的缓存版本了。

而是,对于大型AngularJS
Web应用来讲,我们相当慢开掘一个主题材料:这几个templates.js文件本人的体量急迅大了起来,它又会产生1个新的属性难点。

于是乎,大家能够使用另1个已有个别经验:“异步加载”。有了异步加载的支撑,在加载templates.js
的央求还不曾马到功成之前,能够“降级”使用AngularJS内建的机制,而一旦templates.js加载完结,就应声具有了具备模板的缓存。

亚洲必赢app 6

完美中,templateCache最棒能落得最棒的质量表现,但实际选拔中,假设不加优化,templates.js文件自己的体量会令那种优化职能有所折扣,而丰盛异步加载
templates.js和贬低到种种加载单个htm模板文件之后,又有了1部分更上一层楼。

 

浏览器缓存

当今再来探讨一下浏览器缓存,能够组合上壹节的templates.js一齐来谈谈了。浏览器缓存是浏览器里放置的1种缓存功用,当服务器准确配置了对htm和js文件的缓存帮助时,浏览器将按提示缓存那么些文件。不管是对1个个htm模板,仍旧对templates.js,都大概被缓存。

也正是说,只要在服务器上科学配置,那么上一节所述的“异步
templates.js”,以及“降级的三个htm模板文件”都能够被浏览器缓存。那样,大家将加载htm模板文件和templates.js的须要都缩减到第一遍利用应用之时。

但在服务器上配备缓存也须要谨慎,借使布置失当,就能产出当服务器上文件已经更新,但客户端浏览器仍在动用老的缓存版本的主题材料。由于AngularJS应用使用绑定表明式显示分界面,由此一旦程序已经更新,而视图照旧老版本,那么绑定表达式很或许失效。这种情状下,轻则有的分界面错乱,重则整个Web应用完全不能够使用。

亚洲必赢app 7

浏览器缓存原本是一个“刺客锏”,不管是只行使单个模板文件,仍旧采取templateCache,浏览器缓存都得以十分的大地革新其性质效果。但假设缓存配置失当产生客户端浏览器里使用了错误的版本,就直接促成应用错误,更不谈质量表现了。

要拍卖缓存难题也有饱经风霜的阅历可供借鉴:也便是在文书名上行使版本号,每一回需求更新文件内容时,同时改造版本号,那么1切文件名也就发生变化,也就不会爆发缓存版本错误难点。结合地点的演讲,大家在templates.js
上增添上版本号,另一方面配置AngularJS,在加载单个htm模板文件时,也会在伸手上沾满版本号,就可以消除那壹主题材料。当然,大家盼望在付出时,标识要利用的视图模板时,没有需求钦点那几个需求平时转移的本子号,从而最大程度地涵养支付体验,并将有限补助资金降到最低。

亚洲必赢app 8

AngularJS提供的when和otherwise多少个艺术来定义应用的路由

总结

上边研商了AngularJS视图种种可能的主意,分别推行的主意,以及其性质表现差别。首要值得关怀的是经优化的templateCache机制,以及重组浏览器缓存的templateCache方法。计算来讲,能够产生如此二个更加直观的图纸:

透过壹番开足马力,最终大家能够达到规定的标准如此的结果:

亚洲必赢app 9

  1. 在采取里丰裕仅在生育条件才生效的政策:协助在加载视图模板文件时在文书名中添加版本号(从页面中templates.js的文书路线中分析版本号);
  2. 支付时不必要经过改换;
  3. 通知时预读取全体模板的内容,并生成带版本号的templates.js,嵌入应用页面中;
  4. 在服务器上安插全体htm模板文件及templates.js的缓存策略为“允许缓存”;
  5. 用户第二遍使用应用时,聚集具备网络带宽加载AngularJS基础脚;本,以及应用程序业务逻辑系统,令应用程序尽早能够运用;此时应用使用htm模板文件作为视图模板;
  6. 异步加载templates.js;加载成功之后选用起来选择页面内模板缓存;
  7. 用户再度使用使用时,从浏览器缓存中加载templates.js;
  8. 重复公布应用时,修改templates.js 文件名中的版本号,嵌入页面中。

从而,在第三次用户采用应用时,其互联网加载图形就像那样:

亚洲必赢app 10

起先加载的是使用程序AngularJS框架本身,以及业务逻辑,那时候应用已经可用;此时再异步去加载templates.js文件。事实上,上面的图样就是大家实在项目中的意况,具体达成在此处就不贴了,也应接读者一起钻探越来越多的大概。

从本文的评论轻巧看出,只要经过各样艺术,好好管理浏览器的加载行为,产生1个体系方法,便能令视图加载的天性表现变得更加好。

1 赞 2 收藏 1
评论

 

关于小编:ThoughtWorks

亚洲必赢app 11

ThoughtWorks是一家中外IT咨询公司,追求特出软件品质,致力于科技(science and technology)驱动商业变革。擅长创设定制化软件出品,协助客户神速将定义转化为价值。同时为客户提供用户体验设计、本领战术咨询、组织转型等咨询服务。

个人主页
·
作者的篇章
·
84
·
  

亚洲必赢app 12

otherwise方法会在未有其余路由优良时被调
用,大家用它设置了贰个暗中同意跳转到’/’路线的路由

 

ng-view是二个先期级为
1000的巅峰指令。 AngularJS不会运作同一个成分上的
低优先级指令 

 每回触发$routeChangeSuccess事件,视图都会更新。

*若是有个别模板同当前的路由相关联:
创立多少个新的功效域;
移除上多个视图,同时上三个作用域也会被消除;
 将新的成效域同当前模板关联在一同;
 借使路由中有连带的定义,那么就把相应的调整器同当前功用域关联起来;
 触发$viewContentLoaded事件;
即使提供了onload属性,调用该属性所钦点的函数。

*

效率域是调控器和视图之间的“胶水”

1.
controller

controller:
‘MyController’

//
或者

controller:
function($scope) {}

如果布置对象中安装了controller属性,那么这一个内定的调整器会与路由所创办的新效率

域关联在协同。如若参数值是字符型,会在模块中全数注册过的调控器中搜索对应的剧情,然后

与路由关联在联合。若是参数值是函数型,那些函数会作为模板中DOM成分的调节器并与模板

拓展关联。

 

2.
template

template:
‘<div><h2>Route</h2></div>’

AngularJS会将布置对象中的HTML模板渲染到相应的享有ng-view指令的DOM成分中。

 

3.
templateUrl

templateUrl:
‘views/template_name.html’

采纳会基于templateUrl
属性所钦赐的途径通过XH安德拉读取视图(只怕从$templateCache中读

取)。要是能够找到并读取这一个模板,
AngularJS会将模板的剧情渲染到全部ng-view指令的DOM

元素中。

 

4.
resolve

resolve:
{

 ‘data’:
[‘$http’, function($http) {

 return
$http.get(‘/api’).then(

 function
success(resp) { return response.data; },

 function
error(reason) { return false; }

 );

 }];

}

设若设置了resolve属性,
AngularJS会将列表中的成分都注入到调控器中。如果那些依赖是

promise对象,它们在调节器加载以及$routeChangeSuccess被触发以前,会被resolve并设置成1

个值。

列表对象能够是:


键,键值是会被注入到调节器中的正视的名字;


工厂,就能够以是1个劳动的名字,也能够是二个重回值,它是会被注入到调整器中的函

数或能够被resolve的promise对象。

在上头的例子中,
resolve会发送三个$http请求,并将data的值替换为回去结果的值。列

表中的键data会被注入到调节器中,所以在调整器中能够利用它。

 

5.
redirectTo

redirectTo:
‘/home’

//
或者

redirectTo:
function(route,path,search)

若果redirectTo属性的值是一个字符串,那么路线会被替换到那几个值,并依据那么些目的路

径触发路由变化。

假如redirectTo属性的值是二个函数,那么路线会被替换到函数的重返值,并依赖那些目

 

 

 

标路径触发路由变化。

假若redirectTo属性的值是五个函数,
AngularJS会在调用它时传出下边八个参数中:

(一)
从眼下路径中提收取的路由参数;

(二)
当前路径;

(三)
当前U揽胜极光L中的查询串。

6.
reloadOnSearch

假诺reloadOnSearch选项被设置为true(暗许),当$location.search()
发生变化时会重新

加载路由。借使设置为false,那么当U奇骏L中的查询串部分爆发变化时就不会重新加载路由。那

个小诀要对路由嵌套和原地分页等供给尤其实用。

近日牵线用when函数来安装路由。

上边的例子中设置了三个路由:三个首页路由和叁个收件箱路由,同时首页路由被安装成默

认路由。

angular.module(‘MyApp’,
[]).

 config([‘$routeProvider’,
function($routeProvider) {

 $routeProvider

 .when(‘/’,
{

 controller:
‘HomeController’,

 templateUrl:
‘views/home.html’

 })

 .when(‘/inbox/:name’,
{

 controller:
‘InboxController’,

 templateUrl:
‘views/inbox.html’

 })

 .otherwise({redirectTo:
‘/’});

 }]);

如上,大家早就用when方法设置了七个路由。
otherwise方法会在未曾其余路由相当时被调

用,我们用它设置了多个暗中同意跳转到’/’路线的路由。

当浏览器加载AngularJS应用时,会将URAV四L设置成暗中同意路由所指向的路子。除非我们在浏览

器中加载分歧的URubiconL,不然私下认可会选拔/路由。

 

 

 

所谓视图,
便是指用户所看见的。 视图的生命周期由作为2个模板开端,
它将和模型合并并最终
渲染到浏览器的DOM中。 与其余模板系统差别的是,
AngularJS使用一种特殊的花样来渲染视图

 

视图模板是用HTML写的。
HTML是声称准确, 申明式的言语适合用来编写UI。 视图不该包括别的行
为。
因为控制器和视图未有间接的调用关系,
所以能够使多少个视图对应同一个调整器。 这对“换肤” 、 适配分裂器具(
比如移动器具和台式机) 、 测试, 都格外重大。

 

模型正是用来和模板结合转变视图的数目。
模型必须在成效域中时得以被引述, 那样技巧被渲染
变动视图。 和别的框架不一致的是,
Angularjs对模型自个儿并未有其余限制和需要。 你无需连续任何类
也无需落成钦命的章程以供调用大概转移模型。
模型能够是原生的对象哈希格局的, 也能够是完整
目的类型的。 简单来说, 模型能够是原生的Javascript对象。

 

 

$location

 

 

 

path()
用来博取页面当前的路线
$location.path(); // 再次回到当前路径

 

$location.path(‘target’);
// ‘target’ 修改为 路由或地方

 

path()
方法间接和HTML5的历史API进行相互

replace()
希望跳转后不可能点击后退按键, AngularJS提供了replace()
方法来完结那几个效果

BTW:(对于登入之后的跳转那种发生在有些跳转之后的双重跳转很有用)

 

$location.path(‘/XXX’);

$location.replace();

 

$location.path(‘/XXX’).replace();

 

 

absUrl()
用来赢得编码后的总体U奥迪Q3L

 

$location.absUrl()

 

hash()
方法用来收获U途乐L中的hash片段:
$location.hash(); // 再次来到当前的hash片段

host() 方法用来获取U奇骏L中的主机:
$location.host();// 当前URL的主机

port() 方法用来收获UCR-VL中的端口号:
$location.port();// 当前URL的端口

protocol() 方法用来获得U奥迪Q3L中的协议:
$location.protocol();// 当前URL的协议

search() 方法用来获取UEscortL中的查询串:
$location.search();

大家得以向那一个措施中流传新的查询参数,来修改U牧马人L中的查询串部分:
// 用对象设置查询
$location.search({name: ‘Ari’, username: ‘auser’});

// 用字符串设置查询
$location.search(‘name=Ari&username=auser’);
search方法还行多少个参数
search(可选,字符串或对象)
其1参数代表新的询问参数。 hash对象的值能够是数组。
paramValue(可选,字符串)
壹旦search参数的项目是字符串,那么paramValue会做为该参数的值覆盖U瑞鹰L个中的呼应
值。假设paramValue的值是null ,对应的参数会被移除掉。

url() 方法用来拿到当前页面包车型大巴U宝马7系L:
$location.url(); // 该U中华VL的字符串
尽管调用url()
方法时传了参数,会设置并修改当前的U奥迪Q7L,那会同时修改U兰德猎豹CS6L中的路线、
查询串和hash,并再次回到$location。

// 设置新的U昂CoraL
$location.url(‘/home?name=Ari#hashthing’);
url() 方法能够承受多少个参数。
 url (可选,字符串)
新的U陆风X八L的功底的前缀。
replace(可选,字符串)
想要修改成的路径。

$locationChangeStart

当Angular从$location服务(通过$location.path() 、 $location.search()
等)对浏览器
的地点作更新时,会触发$locationChangeStart事件。

$locationChangeSuccess

当且仅当浏览器的地方成功转移,又从未阻碍
$locationChangeStart事件的情况下,
$locationChangeSuccess事件会从$rootScope上海人民广播电视台播出来。

 

 资料整理,证明以上资料来源与互连网

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图