快速火速地加载,的常用个性

急迅便捷地加载 AngularJS 视图

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

本文小编: 伯乐在线 –
ThoughtWorks
。未经小编许可,禁止转发!
欢迎到场伯乐在线 专栏撰稿人。

当AngularJS应用程序变大时,很多标题就从头显现出来了,比如多层级视图的加载难点,倘若在子视图显示此前从未预加载,则也许在须要呈现时,产生视觉闪烁的情况。那种难点在互联网缓慢,恐怕服务器使用较慢的https连接时更易于出现。

本文将研讨更高速加载AngularJS视图的种类方法。

单页Web应用(SinglePage)

AngularJS权威教程是上学AngularJS的公认经典,内容完善,讲解通俗,适合各层次的学习者。小编拥有丰硕的AngularJS开发和教学经验,也是壹位全栈工程师。全书35章,行远自迩地上课了AngularJS的基本概念和基本功用,包罗模块、效能域、控制器、表明式、指令、路由、正视注入等,主要的是书中对每2个概念的授课都合营了极度的言传身教和代码,让读者通过入手实践,切肉体会到这么些概念的意义和价值。《AngularJS权威教程》后半部分深刻到AngularJS应用开发,系统地商讨了服务器通讯、事件、架构、动画、本地化、安全、缓存、移动使用等核心。

1叁 、使用路由和 $location 切换视图

AngularJS 视图一般原理

AngularJS视图也并不是怎么样尤其神奇的技术,在其里面正是按一般的directive来处理的。也便是说,当3个地点需求体现view时,AngularJS会尝试采纳某种格局赢得其HTML模板文件的具体内容、包装成directive,执行directive的正儿八经流程,最终添加到页面上。

金沙澳门官网 1

回首一下,directive本身是否刚刚也协理templateUrl属性?那就与view技术衔接上了。

那样说来,是还是不是视图模板也得以选取行内DOM甚至是字符串字面量值了吗?答案是自可是然的!大家当然就足以行使一段行内DOM来作为view的沙盘。例如:

金沙澳门官网 2

自然,作为3个巨型的AngularJS应用程序,将有着view都坐落字符串值里,或许行内DOM里是不太现实的,我们盼望得以使用多少个小的HTML文件来作为子模板。那样,即使全体应用一点都不小,但每种子模板的文本并十分小,一般都以几KB的小文件,当用户点击到钦赐地点,需求时利用对应界面包车型大巴模板时再去加载,也就精晓压实了成效。

我们能够用下图来表示“行内DOM”与“几个子模板文件”的品质相比:

金沙澳门官网 3

顾名思义,只行使2个页面包车型大巴Web应用程序.单页面使用是指用户通过浏览器加载独立的HTML页面,Ajax加载数据页面无刷新,完毕操作各类操作。

《AngularJS权威教程》适合各类层次的AngularJS开发人士学习,无论是出于工作须求,依旧好奇心的驱使,只要你想根本领略AngularJS,《AngularJS权威教程》都会让您成绩斐然。

  对于一些单页面应用来说,有时候须求为用户体现也许隐藏一些子页面视图,能够选用Angular 的 $route 服务来管理那种现象。

AngularJS 对视图加载的优化

地点提到了“多个子模板文件”的模板社团办法,那本是一件很经常、很自然的行事方法而已。也多亏因而,才让人们感觉AngularJS工作章程与和谐的只求的一律:因为在并未行使AngularJS此前,人们在支付一个Web应用时,页面正是如此一个个集体的。

尽管在原先,大家在关乎品质的时候,自然会想到“缓存”。在在此以前,页面与页面之间的跳转使得种种页面都以并行独立的单位,因而页面内容的缓存只可以有赖于浏览器了。近年来,AngularJS让全体页面子模板都在“单页应用”中加载,于是,大家在这一个单页面应用内便获得了缓存页面内容的空子。

AngularJS中内建了缓存机制templateCache:只要已经加载过某些页面子模板,就会在templateCahce中缓存起来,下次从服务器加载页面模板以前,先检查templateCache,假若已有缓存则不必要从服务器上加载,直接动用。

金沙澳门官网 4

AngularJS中内建了templateCache
机制之后,加载视图的长河变得火速而轻松,Web应用自己,以及开发者都不必要关爱这一经过。可是,就算有页面内的templateCache,页面模板在第③使用时还是要求从服务器加载,由此偶尔能看到一些视觉闪烁的情况,比如标签切换、页面跳转等。

模板(template)

金沙澳门官网 5

  你能够使用路由服务来定义那样的一种东西:对于浏览器所针对的特定
U瑞虎L,Angular
将会加载并呈现五个模板,并实例化二个控制器来为模板提供内容。

对AngularJS templateCache的优化

作为一种优化手段,大家很自然能体会领悟,既然页面能够在加载之后在templateCache起来就能增强质量,如若在行使运营之初templateCache中就有了具有页面包车型客车缓存,也就向来不必要服务器了,那么在页面需求出示时,也就基本不必要加载时间了。图能够改为那样:

金沙澳门官网 6

要兑现这一目的,只须求在发表应用在此之前,创设额外的templates.js
文件,在里边将享有的页面模板读取出来并提前put到templateCache中,再将形成的templates.js嵌入到使用中即可在Web应用运转时就已经具有具有页面模板内容的缓存版本了。

不过,对于大型AngularJS
Web应用来说,大家连忙发现1个题材:这么些templates.js文件本身的体量急忙大了起来,它又会化为二个新的性子难点。

于是,大家可以动用另2个已有的经验:“异步加载”。有了异步加载的支撑,在加载templates.js
的乞请还未曾成功从前,能够“降级”使用AngularJS内建的机制,而就算templates.js加载实现,就即刻拥有了具备模板的缓存。

金沙澳门官网 7

完美中,templateCache最好能达到规定的标准最佳的属性表现,但实际上使用中,假若不加优化,templates.js文件本人的体量会令那种优化效率有所折扣,而添加异步加载
templates.js和贬低到各样加载单个htm模板文件从此,又有了一些修正。

在AngularJS中,二个模板就是三个HTML文件。可是HTML的内容扩充了,包涵了重重支持您映射model到view的始末。

AngularJS权威教程 目录:

  在使用中能够调用 $routeProvider
服务上的函数来制造路由,把须求成立的路由当成三个布置块传给这一个函数即可。伪代码如下:

浏览器缓存

今天再来探讨一下浏览器缓存,能够整合上一节的templates.js一起来研讨了。浏览器缓存是浏览器里停放的一种缓存功能,当服务器正确配置了对htm和js文件的缓存支持时,浏览器将按提示缓存这几个文件。不管是对一个个htm模板,仍旧对templates.js,都也许被缓存。

也便是说,只要在服务器上正确配置,那么上一节所述的“异步
templates.js”,以及“降级的几个htm模板文件”都足以被浏览器缓存。那样,大家将加载htm模板文件和templates.js的供给都缩减到第③回选拔使用之时。

但在服务器上安插缓存也亟需胆战心惊,假如安排失当,就会现出当服务器上文件已经更新,但客户端浏览器仍在应用老的缓存版本的标题。由于AngularJS应用使用绑定表达式展现界面,因而要是程序已经更新,而视图照旧老版本,那么绑定表达式很恐怕失效。那种场馆下,轻则有些界面错乱,重则整个Web应用完全无法选取。

金沙澳门官网 8

浏览器缓存原本是三个“剑客锏”,不管是只使用单个模板文件,如故使用templateCache,浏览器缓存都得以小幅度地改革其天性效果。但假如缓存配置失当造成客户端浏览器里应用了不当的版本,就一贯造成应用错误,更不谈品质表现了。

要处理缓存难点也有饱经风霜的阅历可供借鉴:也正是在文书名上使用版本号,每一趟必要更新文件内容时,同时更改版本号,那么万事文件名也就爆发变化,也就不会发生缓存版本错误难题。结合地方的阐发,大家在templates.js
上添加上版本号,另一方面配置AngularJS,在加载单个htm模板文件时,也会在乞求上附着版本号,即可缓解这一难题。当然,大家期待在支付时,标记要运用的视图模板时,不须要钦定这几个须要平时转移的本子号,从而最大程度地维持支付体验,并将保障资金降到最低。

金沙澳门官网 9

»  HTML模板将会被浏览器解析到DOM中。

第1章 初识AngularJS 1
1.1 浏览器怎么样获取网页 1
1.2 浏览器是怎样 2
1.3 AngularJS是什么 2
1.3.1 AngularJS有如何差别 3
1.3.2 许可 3
第②章 数据绑定和第二个AngularJS Web应用 4
2.1 AngularJS中的数据绑定 5
2.2 简单的数目绑定 6
2.3 数据绑定的超级实践 8
第3章 模块 10
3.1 参数 11
3.1.1 name(字符串) 11
3.1.2 requires(字符串数组) 11
第4章 作用域 12
4.1 视图和$scope的世界 12
4.2 就是HTML而已 13
4.3 成效域能做如何 14
4.4 $scope的生命周期 14
4.4.1 创建 15
4.4.2 链接 15
4.4.3 更新 15
4.4.4 销毁 15
4.5 指令和效果域 15
第5章 控制器 16
5.1 控制器嵌套(功用域包括作用域) 18
第6章 表达式 20
6.1 解析AngularJS表达式 20
6.2 插值字符串 21
第7章 过滤器 24
7.1 自定义过滤器 29
7.2 表单验证 29
第十章 指令简介 43
8.1 指令:自定义HTML成分和属性 44
8.2 向指令中传送数据 50
第8章 内置指令 56
9.1 基础ng属性指令 56
9.1.1 布尔属性 56
9.1.2 类布尔属性 58
9.2 在命令中使用子成效域 59
第⑦章 指令详解 72
10.1 指令定义 72
10.1.1 restrict(字符串) 74
10.1.2 优先级(数值型) 75
10.1.3 terminal(布尔型) 75
10.1.4 template(字符串或函数) 76
10.1.5 templateUrl(字符串或函数) 76
10.1.6 replace(布尔型) 77
10.2 指令成效域 77
10.2.1 scope参数(布尔型或对象) 78
10.2.2 隔离作用域 80
10.3 绑定策略 81
10.3.1 transclude 82
10.3.2 controller(字符串或函数) 84
10.3.3 controllerAs(字符串) 86
10.3.4 require(字符串或数组) 86
10.4 AngularJS的生命周期 87
10.4.1 编写翻译阶段 87
10.4.2 compile(对象或函数) 88
10.4.3 链接 89
10.5 ngModel 90
10.5.1 自定义渲染 92
10.5.2 属性 92
10.6 自定义表明 93
第③1章 AngularJS模块加载 95
11.1 配置 95
11.2 运行块 96
第22章 多尊重图和路由 98
12.1 安装 98
12.2 布局模板 99
12.3 路由 99
12.4 $location服务 103
12.5 路由格局 105
12.5.1 HTML5模式 105
12.5.2 路由事件 106
12.5.3 关于寻找引擎索引 107
12.6 更加多关于路由的始末 107
12.6.1 页面重新加载 107
12.6.2 异步的地址变化 107
第33章 正视注入 108
13.1 估摸式注入申明 109
13.2 显式注入注脚 110
13.3 行内注入注明 110
13.4 $injector API 111
13.4.1 annotate() 111
13.4.2 get() 111
13.4.3 has() 111
13.4.4 instantiate() 112
13.4.5 invoke() 112
13.5 ngMin 112
13.5.1 安装 113
13.5.2 使用ngMin 113
13.5.3 工作规律 113
第14章 服务 114
14.1 注册一个劳动 114
14.2 使用服务 116
14.3 成立服务时的装置项 118
14.3.1 factory() 119
14.3.2 service() 119
14.3.3 provider() 120
14.3.4 constant() 122
14.3.5 value() 122
14.3.6 什么日期使用value()和constant() 123
14.3.7 decorator() 123
第①5章 同外界通讯:XHRAV4和服务器通讯 125
15.1 使用$http 125
15.2 设置对象 128
15.3 响应对象 130
15.4 缓存HTTP请求 131
15.5 拦截器 132
15.6 设置$httpProvider 133
15.7 使用$resource 134
15.8 安装 134
15.9 应用$resource 135
15.9.1 基于HTTP GET方法 135
15.9.2 基于非HTTP GET类型的法门 136
15.9.3 $resource实例 137
15.9.4 $resource实例是异步的 138
15.9.5 附加属性 138
15.10 自定义$resource方法 138
15.11 $resource设置对象 139
15.12 $resource服务 141
15.13 使用Restangular 142
15.14 Restangular简介 142
15.15 安装Restangular 143
15.16 Restangular对象简介 144
15.17 使用Restangular 145
15.17.1 作者的HTTP方法们怎么做 146
15.17.2 自定义查询参数和头 147
15.18 设置Restangular 147
第16章 XHR实践 153
16.1 跨域和同源策略 153
16.2 JSONP 153
16.3 使用CORS 154
16.3.1 设置 154
16.3.2 服务器端COPRADOS协理 155
16.3.3 简单请求 155
16.3.4 非简单请求 156
快速火速地加载,的常用个性。16.4 服务器端代理 157
16.5 使用JSON 157
16.6 使用XML 158
16.7 使用AngularJS进行身份验证 159
16.7.1 服务器端须要 159
16.7.2 客户端身份验证 160
16.8 和MongoDB通信 165
第17章 promise 168
17.1 什么是promise 168
17.2 为啥选择promise 169
17.3 Angular中的promise 170
17.4 链式请求 173
17.4.1 all(promises) 174
17.4.2 defer() 174
17.4.3 reject(reason) 174
17.4.4 when(value) 174
第38章 服务器通信 175
18.1 自定义服务器端 175
18.2 安装NodeJS 175
18.3 安装Express 176
18.4 调用API 178
18.5 使用亚马逊 AWS的无服务器应用 181
18.5.1 DynamoDB 181
18.5.2 不难通报服务(SNS) 181
18.5.3 不难队列服务(SQS,Simple Queue Service) 182
18.5.4 不难存储服务(S3) 182
18.5.5 安全令牌服务(STS) 182
18.6 AWSJS + Angular 182
18.7 开始 182
18.8 介绍 184
18.9 安装 184
18.10 运行 185
18.11 用户认证/鉴权 186
18.12 UserService 190
18.13 迁移到AWS上 191
18.14 AWSService 194
18.15 在Dynamo上开始 196
18.16 $cacheFactory 196
18.17 保存currentUser 197
18.18 上传到S3 199
18.19 甩卖公事上传 201
18.20 查询Dynamo 203
18.21 在HTML突显列表 204
18.22 出售大家的文章 205
18.23 使用Stripe 206
18.24 使用Firebase的无服务器应用 209
18.25 使用Firebase和Angular的三方数据绑定 210
18.26 从AngularFire开始 211
18.26.1 注册并成立一个Firebase 211
18.26.2 包含Firebase和AngularFire库 212
18.26.3 把Firebase作为依靠项添加 212
18.26.4 绑定模型到Firebase UPRADOL 212
18.26.5 数据同步 213
18.27 在AngularFire中排序 214
18.28 Firebase事件 215
18.29 显式同步 215
18.30 用AngularFire举行认证 216
18.31 认证事件 217
18.31.1 $logout() 218
18.31.2 $createUser() 218
18.32 使用Firebase托管陈设你的Angular应用 218
18.32.1 安装Firebase工具 218
18.32.2 安插你的Web站点 219
18.33 除了AngularFire之外 219
第19章 测试 220
19.1 为何要做测试 220
19.2 测试策略 220
19.3 早先测试 220
19.4 AngularJS测试的品类 221
19.4.1 单元测试 221
19.4.2 端到端测试 222
19.5 开始 222
19.6 起头化Karma配置文件 223
19.7 配置选项 226
19.8 使用RequireJS 231
19.9 Jasmine 233
19.9.1 细则套件 233
19.9.2 定义一个细则 233
19.10 预期 234
19.10.1 内置的匹配器 234
19.10.2 安装和卸载 237
19.11 端到端的介绍 238
19.11.1 选项输入 244
19.11.2 重复循环成分 244
19.12 模拟和测试支持函数 245
19.13 模拟$httpBackend 246
19.14 测试三个应用 251
19.14.1 测试路由 252
19.14.2 测试页面内容 255
19.14.3 测试控制器 257
19.14.4 测试服务和工厂 259
19.14.5 测试过滤器 263
19.14.6 测试模板 264
19.14.7 测试指令 266
19.15 测试事件 269
19.16 对Angular的不断集成 270
19.17 Protractor 270
19.18 配置 272
19.19 计划选项 273
19.20 编写测试 275
19.21 测试实践 278
19.21.1 大家的应用 278
19.21.2 测试的国策 279
19.22 建立大家的率先个测试 279
19.23 测试输入框 281
19.23.1 测试列表 282
19.23.2 测试路由 284
19.24 页面对象 285
第20章 事件 287
20.1 什么是事件 287
20.2 事件传播 287
20.2.1 使用$emit来冒泡事件 288
20.2.2 使用$broadcast向下传递事件 288
20.3 事件监听 289
20.4 事件指标 289
20.5 事件有关的骨干服务 290
20.5.1 大旨系统的$emitted事件 290
20.5.2 主题系统的$broadcast事件 290
第21章 架构 292
21.1 目录结构 292
21.2 模块 293
21.3 控制器 294
21.4 指令 296
21.5 测试 296
第22章 Angular动画 297
22.1 安装 297
22.2 它是什么运作的 297
22.3 使用CSS3过渡 298
22.4 使用CSS3动画 300
22.5 交错CSS过渡/动画 301
22.5.1 交错CSS过渡 301
22.5.2 交错CSS动画 302
22.5.3 什么指令支持交错动画 302
22.6 使用JavaScript动画 302
22.7 微调动画 303
22.8 DOM回调事件 304
22.9 内置指令的动画 304
22.9.1 ngRepeat动画 304
22.9.2 ngView动画 306
22.9.3 ngInclude动画 308
22.9.4 ngSwitch动画 310
22.9.5 ngIf动画 312
22.9.6 ngClass动画 314
22.9.7 ngShow/ngHide动画 316
22.10 制造自定义动画 318
22.10.1 addClass() 319
22.10.2 removeClass() 320
22.10.3 enter() 321
22.10.4 leave() 322
22.10.5 move() 323
22.11 与第③方库集成 324
22.11.1 Animate.css 324
22.11.2 TweenMax/TweenLite 324
第23章 digest循环和$apply 326
23.1 $watch��表 326
23.2 脏值检查 327
23.3 $watch 328
23.4 $watchCollection 330
23.5 页面中的$digest循环 330
23.6 $evalAsync列表 331
23.7 $apply 332
23.8 哪天使用$apply 332
第24章 揭秘Angular 334
24.1 视图的办事原理 335
24.1.1 编写翻译阶段 335
24.1.2 运行时 336
第③5章 AngularJS精华扩充 337
25.1 AngularUI 337
25.2 安装 337
25.3 ui-router 337
25.3.1 安装 337
25.3.2 事件 342
25.3.3 $stateParams 343
25.3.4 $urlRouterProvider 344
25.3.5 创造三个导航程序 345
25.4 ui-utils 346
25.4.1 安装 347
25.4.2 mask 347
25.4.3 ui-event 347
25.4.4 ui-format 348
第贰6章 移动选择 350
26.1 响应式Web应用 350
26.2 交互 350
26.2.1 安装 350
26.2.2 ngTouch 351
26.2.3 $swipe服务 352
26.2.4 angular-gestures和多点触控手势 353
26.2.5 安装angular-gestures 354
26.2.6 使用angular-gestures 354
26.3 Cordova中的原生应用程序 355
26.4 Cordova入门 356
26.4.1 Cordova开发流程 359
26.4.2 平台 359
26.4.3 插件 359
26.4.4 构建 360
26.4.5 模拟和周转 360
26.4.6 开发阶段 360
26.4.7 Anguar中的Cordova服务 361
26.5 引入Angular 362
26.6 使用Yeoman构建 363
26.6.1 修改Yeoman以便使用Cordova 364
26.6.2 装配Yeoman构建 365
26.6.3 营造移动部分 365
26.6.4 处理辅导程序 367
第27章 本地化 369
27.1 angular-translate 369
27.2 安装 369
27.3 教您的施用一种新语言 370
27.4 多语言帮助 371
27.5 运营时切换语言 372
27.6 加载语言 373
27.7 angular-gettext 374
27.8 安装 374
27.9 用法 375
27.10 字符串提取 375
27.11 翻译字符串 377
27.12 编写翻译新语言 378
27.13 改变语言 379
第28章 缓存 381
28.1 什么是缓存 381
28.2 Angular中的缓存 381
28.2.1 $cacheFactory简介 381
28.2.2 缓存对象 382
28.3 $http中的缓存 382
28.3.1 默认的$http缓存 382
28.3.2 自定义缓存 383
28.4 为$http设置暗中认可缓存 384
第29章 安全性 385
29.1 严厉的上下文转义:$sce服务 385
29.2 URL白名单 387
29.3 URL黑名单 388
29.4 $sce API 388
金沙澳门官网,29.4.1 getTrusted 388
29.4.2 parse 389
29.4.3 trustAs 389
29.4.4 isEnabled 390
29.5 配置$sce 390
29.6 可依赖的上下文类型 390
第30章 AngularJS和IE浏览器 391
30.1 Ajax缓存 393
30.2 AngularJS中的SEO 393
30.3 使Angular应用可被索引 393
30.4 服务端 393
30.4.1 hashbang语法 394
30.4.2 HTML5路由形式 394
30.5 服务端处理SEO的选项 394
30.5.1 使用Node/Express中间件 395
30.5.2 使用Apache重写URL 395
30.5.3 使用Ngnix代理URL 396
30.6 获取快照 396
30.7 使用Zombie.js获取HTML快照 397
30.8 使用grunt-html-snapshot 398
30.9 Prerender.io 399
30.10 [noscript]方法 400
第31章 构建Angular Chrome应用 401
31.1 了解Chrome应用 401
31.1.1 manifest.json 401
31.1.2 背景脚本 401
31.1.3 视图 401
31.2 构建你的Chrome应用 402
31.3 搭建框架 402
31.4 manifest.json 403
31.5 tab.html 404
31.6 在Chrome中加载应用 405
31.7 主模块 406
31.8 营造主页 406
31.9 使用Wundergroud的天气API 408
31.10 设置界面 411
31.11 完毕用户服务 413
31.12 城市机关填写/自动完结 415
31.13 添加时区协助 418
第32章 优化Angular应用 421
32.1 优化什么 421
32.2 优化$digest循环 421
32.3 优化ng-repeat 423
32.4 优化$digest调用 423
32.5 优化$watch函数 424
32.5.1 bindonce 425
32.5.2 $watch函数的机动优化 427
32.6 优化过滤器 427
32.6.1 不变的数目 427
32.6.2 过滤后的数额 427
32.7 页面加载优化技术 428
32.7.1 压缩 429
32.7.2 利用$templateCache 429
第33章 调试AngularJS 430
33.1 从DOM中调试 430
33.1.1 scope() 431
33.1.2 controller() 431
33.1.3 injector() 431
33.1.4 inheritedData() 431
33.2 调试器 431
33.3 Angular Batarang 432
33.3.1 安装Batarang 432
33.3.2 检查模型 433
33.3.3 检查品质 433
33.3.4 检查信赖图表 434
33.3.5 可视化应用 434
第34章 下一步 435
34.1 jqLite和jQuery 435
34.2 了然基本工具 436
34.3 Grunt 436
34.4 grunt-angular-templates 439
34.4.1 安装 439
34.4.2 用法 440
34.4.3 可用选项 440
34.4.4 用法 442
34.5 Lineman 443
34.6 Bower 445
34.6.1 安装 445
34.6.2 Bower简介 445
34.6.3 配置Bower 446
34.6.4 搜索程序包 447
34.6.5 安装程序包 447
34.6.6 使用程序包 447
34.6.7 移除程序包 448
34.7 Yeoman 448
34.7.1 安装 448
34.7.2 用法 449
34.7.3 创立路由 451
34.7.4 创造控制器 451
34.7.5 创立自定义指令 451
34.7.6 创制自定义过滤器 451
34.7.7 创设视图 451
34.7.8 创立服务 452
34.7.9 创立装饰器 452
34.8 配置Angular生成器 452
34.8.1 CoffeeScript 452
34.8.2 安全压缩 452
34.8.3 跳过索引 452
34.9 测试应用 452
34.10 打包应用 453
34.11 打包模板 453
第35章 总结 456

1 var someModule = anguler.module('someModule', [...module dependencies...]);
2 
3 someModule.config(function($routeProvider) {
4     $routeProvider.
5         when('url', {controller : aController, templateUrl : '/path/to/template'}).
6         when(...other mappings for your app...).
7         ...
8         otherwise(...what to do if nothing else matches);
9 });    

总结

地点切磋了AngularJS视图各类也许的方法,分别施行的法子,以及其性情表现行反革命差。首要值得关切的是经优化的templateCache机制,以及构成浏览器缓存的templateCache方法。计算来说,能够形成那样三个更直观的图样:

因此一番大力,最后大家能够达到规定的标准如此的结果:

金沙澳门官网 10

  1. 在动用里拉长仅在生养条件才生效的政策:扶助在加载视图模板文件时在文书名中添加版本号(从页面中templates.js的文本路径中剖析版本号);
  2. 付出时不要求通过改动;
  3. 公布时预读取全部模板的剧情,并生成带版本号的templates.js,嵌入应用页面中;
  4. 在服务器上配备全体htm模板文件及templates.js的缓存策略为“允许缓存”;
  5. 用户第二次利用应用时,集中具有网络带宽加载AngularJS基础脚;本,以及应用程序业务逻辑系统,令应用程序尽早能够使用;此时利用使用htm模板文件作为视图模板;
  6. 异步加载templates.js;加载成功之后选拔起来使用页面内模板缓存;
  7. 用户再一次利用使用时,从浏览器缓存中加载templates.js;
  8. 重新发布应用时,修改templates.js 文件名中的版本号,嵌入页面中。

据此,在第一次用户选拔应用时,其互连网加载图形就好像那样:

金沙澳门官网 11

首先加载的是采用程序AngularJS框架本人,以及工作逻辑,那时候应用已经可用;此时再异步去加载templates.js文件。事实上,下面的图样就是我们实在项目中的情形,具体贯彻在此间就不贴了,也欢迎读者一起商讨越多的大概。

从本文的议论不难看出,只要通过各样措施,好好管理浏览器的加载行为,形成三个种类方法,便能令视图加载的性质表现变得更好。

1 赞 2 收藏 1
评论

»  DOM然后改成AngularJS编写翻译器的输入。

**AngularJS权威教程 清晰PDF版**可从以下新闻获得下载:

  以上代码中,当浏览器中的 UavancierL 变成钦点的取值时,Angular 将会加载
/path/to/template 路径下的模板,然后把那么些模板中的根成分关联到
aController 上,最后一行中的 otherwise
调用可以告知路由,在并未匹配到其余事物时跳转到那里。

有关我:ThoughtWorks

金沙澳门官网 12

ThoughtWorks是一家中外IT咨询公司,追求卓越软件质量,致力于科学和技术驱动商业变革。擅长营造定制化软件出品,帮助客户神速将定义转化为价值。同时为客户提供用户体验设计、技术战略咨询、协会转型等咨询服务。

个人主页 ·
小编的稿子 ·
84 ·
  

金沙澳门官网 13

»  AngularJS将会遍历DOM模板来生成一些引导,即,directive(指令)。

点击这一个http://www.linuxidc.com/Linux/2013-12/93755.htm 链接关切Linux公社官方微信,关心后回复数字111429。即可得到网民的分享密码。

  上面创设多个小例子,然则急需把代码放到 web 服务器上中。

»  全部的命令都承受针对view来安装数据绑定。

假若撤销关切Linux公社公众号,即便再度关怀,也将不大概提供本服务!

  index.html

经过上边包车型大巴DEMO大家一起理解一下Angularjs 放到模板引擎:

链接:
密码:获得见上边包车型地铁艺术,地址失效请在底下留言。

 1 <html ng-app="AMail">
 2     <head>
 3     </head>
 4     <body>
 5         <h1>A-Mail</h1>
 6         <div ng-view></div>
 7         <script src="../src/angular.js"></script>
 8         <script src="../src/angular-route.js"></script>
 9         <script src="controller.js"></script>
10     </body>
11 </html>
<!--模板(template):
这里的模板是指前端模板,在angularjs 之外已经有非常丰富的JavaScript模板引擎了,例如artTemplate,Mustache,doT.js等。
Angularjs 内置有自己的模板引擎。
通过下面的DEMO我们一起了解一下Angularjs 内置模板引擎:-->
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <meta charset="UTF-8">
    <title>angularjs 模板解释</title>
    <script src="http://files.cnblogs.com/files/Arrays/angular.min.js"></script>
    <script type="text/javascript">
        //声明一个私有函数域
        (function () {
            var app = angular.module("MyModule", []);  //创建模块
            app.controller("tmplController", ["$scope", function ($scope) {
                //给变量val赋值
                $scope.val = "Hello Angularjs template";
                //给变量list赋值
                $scope.list = [
                    { title: "cnblogs", url: "http://www.cnblogs.com" },
                    { title: "codeproject", url: "http://www.codeproject.com/" },
                    { title: "google", url: "http://www.google.com/" }
                ]
                //给变量hasValue赋值
                $scope.hasValue = false;
            }]);
        })()
    </script>
</head>

<body ng-app="MyModule">
    <div ng-controller="tmplController">
        <!--普通输出-->
        <div>{{val}}</div>
        <!--循环-->
        <ul ng-repeat="item in list">
            <li><a href="{{item.url}}" rel=nofollow>{{item.title}}</a></li>
        </ul>
        <!--条件语句-->
        <div ng-if="!hasValue">
            Angularjs条件语句
        </div>
    </div>
</body>

</html>
<!--以上代码首先创建一个"MyModule"模块,然后在模块中添加了一个名词为"tmplController"的控制器,然后给scope添加三个属性“val”,“list”,“hasValue”,并赋值。
在模板页面设置angularjs作用域为"body"标签内,名词为"Bobby"-->
<!--例子中提供了3种输出方式(普通输出,循环,条件语句),当然angularjs不仅仅这几种方式
“ng-repeat”,“ng-if” 这都是通过指令实现。-->

——————————————分割线——————————————

  list.html

 

或者

 1 <table>
 2     <tr>
 3         <td><strong>Sender</strong></td>
 4         <td><strong>Subject</strong></td>
 5         <td><strong>Date</strong></td>
 6     </tr>
 7     <tr ng-repeat="message in messages">
 8         <td>{{message.sender}}</td>
 9         <td><a href="#/view/{{message.id}}">{{message.subject}}</a></td>
10         <td>{{message.date}}</td>
11     </tr>
12 </table>

Controller(控制器)

——————————————分割线——————————————

  detail.html

Controller应该纯粹地用来把service、注重关系、以及别的对象串联到联合,然后通过scope把它们关联到view上。借使在您的
视图里面供给处理复杂的事务逻辑,那么把它们放到controller里面也是三个非凡科学的精选。

FTP地址:ftp://ftp1.linuxidc.com

 1 <div><strong>Subject: </strong>{{message.subject}}</div>
 2 <div><strong>Sender: </strong>{{message.sender}}</div>
 3 <div><strong>Date: </strong>{{message.date}}</div>
 4 <!-- ng-bind 性能不如 {{}},尽量只在 index.html 页面使用 ng-bind,避免花括号一闪而过-->
 5 <div>
 6     <strong>To: </strong>
 7     {{recipient}}
 8 </div>
 9 <div>{{message.message}}</div>
10 <a href="#/">back to message list</a>

借使小编要add一本图书应该如何做呢?小编应当在controller上面新增1个情势来拍卖那件工作吗?
不,原因在底下解释。因为它是DOM交互/操作的一有的。

用户名:ftp1.linuxidc.com

  controller.js

Controller(控制器)-注意点

密码:www.linuxidc.com

 1 //为核心的 AMail 服务创建模块
 2 var aMailServices = angular.module('AMail', ['ngRoute']);
 3 
 4 //在 URL,模板和控制器之间建立映射关系
 5 aMailServices.config(function($routeProvider) {
 6     $routeProvider.
 7     when('/', {
 8         controller: ListController,     // 全局的 function 方式去找 Controller
 9         templateUrl: 'list.html'
10     }).
11     //注意,为了创建详情视图,在 id 前面加了一个冒号,从而指定了一个参数化的 URL 组件
12     when('/view/:id', {
13         controller: 'DetailController', // 用注册的方式去找 Controller
14         templateUrl: 'detail.html'
15     }).
16     otherwise({
17         redirectTo: '/'
18     });
19 });
20 
21 //一些虚拟邮件
22 messages = [{
23         id: 0, sender: 'jean@somecompany.com', subject: 'Hi there, old friend',
24         date: 'Dec 7, 2013 12:32:00', recipients: ['greg@somecompany.com'],
25         message: 'Hey, we should get together for lunch sometime and catch up.'
26         + 'There are many things we should collaborate on this year.'
27     }, {
28         id: 1, sender: 'maria@somecompany.com', subject: 'Where did you leave my laptop?',
29         date: 'Dec 7, 2013 8:15:12', recipients: ['greg@somecompany.com'],
30         message: 'I thought you were going to put it in my desk drawer.'
31         + 'But it does not seem to be there.'
32     }, {
33         id: 2, sender: 'bill@somecompany.com', subject: 'Lost python',
34         date: 'Dec 6, 2013 20:35:02', recipients: ['greg@somecompany.com'],
35         message: "Nobody panic, but my pet python is missing from her cage."
36         + "She doesn't move too fast, so just call me if you see her."
37     }];
38     
39 //把邮件发布给邮件列表模板,注意两种方式,建议使用下面注册的方式,避免全局的 function 污染
40 function ListController($scope) {
41     $scope.messages = messages;
42 }
43 
44 aMailServices.controller('DetailController', function($scope, $routeParams) {
45     $scope.messages = messages[$routeParams.id];
46 });

决不试图去复用Controller,1个控制器一般只承担一小块视图

在 2015年LinuxIDC.com\1月\AngularJS权威教程 清晰PDF版

  效果如下:

毫不在Controller中操作DOM,那不是控制器的天职

下载格局见
http://www.linuxidc.com/Linux/2013-10/91140.htm

  金沙澳门官网 14

不要在Controller里面做多少格式化,ng有很好用的表单控件

——————————————分割线——————————————

1四 、与服务器交互

毫无在Controller里面做多少过滤操作,ng有$filter服务

正文永久更新链接地址:http://www.linuxidc.com/Linux/2015-01/111429.htm

  真正的应用须要和诚实的服务器实行交互,Angular 中提供了三个称呼 $http
的劳动。它提供了多少个可增加的虚幻方法列表,使得与服务器的竞相尤其便于。它援助HTTP、JSONP 和 CO讴歌MDXS 格局。它还包蕴了安全性帮助,制止 JSON 格式的脆弱性和
XSRAV4F。能够让您轻轻松松地更换请求和响应数据,甚至还落到实处了简易的缓存。

一般的话,Controller是不会互相调用的,控制器之间的交互会通过事件进展

金沙澳门官网 15

  重返的响应数据示例如下:

<!--控制器(controller)控制器可以理解为控制页面某个区块的方法。
其中有一个非常重要的对象 \(scope是这个控制器与页面控制器区域沟通的桥梁。
angularjs最精华的部分是双向绑定,失去了双向绑定angularjs就失去了自己的灵魂。这也是和其他以DOM操作的框架比最大的区别。-->
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <meta charset="UTF-8">
    <title>angularjs控制器介绍</title>
    <script src="http://files.cnblogs.com/files/Arrays/angular.min.js"></script>
    <script type="text/javascript">
        (function () {
            var app = angular.module("MyModule", []);
            app.controller("cntoController", ["$scope", function ($scope) {
                var defaults = "angularjs控制器介绍";
                //设置值
                $scope.val = defaults;
                $scope.click = function () {
                    //通过内置的绑定方法click 我们重置字符串
                    $scope.val = defaults;
                };
            }]);
        })()
    </script>
</head>

<body ng-app="MyModule">
    <div ng-controller="cntoController">
        <!--绑定值-->
        <div>
            <textarea ng-model="val"></textarea>
        </div>
        <!--输出值-->
        <div>{{val}}</div>
        <!--绑定方法-->
        <div>
            <button ng-click="click()">重置</button>
        </div>
    </div>
</body>

</html>

<!--我们首先创建了一个模块,然后在模块中添加一个控制器方法 "cntoController".
在控制器里我们给scope添加了一个属性"val" 和一个方法 "click"。
在页面中我们使用"ng-model"指令绑定控制器中设置的"val"-->
 1 [
 2     {
 3         "id" : 0,
 4         "title" : "Paint pots",
 5         "description" : "Pots full of paint",
 6         "price" : 3.95
 7     },
 8     {
 9         "id" : 1,
10         "title" : "Polka dots",
11         "description" : "Dots with that polka groove",
12         "price" : 12.95
13     },
14     {
15         "id" : 2,
16         "title" : "Pebbles",
17         "description" : "Just little rocks, really",
18         "price" : 6.95
19     }
20 ]

 

  大家能够像上面那样编写查询代码:

1 function ShoopingController($scope, $http) {
2     $http.get('/products').success(function (data, status, headers, config) {
3         $scope.items = data;
4     });
5 }

  然后就足以应用到模板中了。

1⑤ 、使用指令修改 DOM

  指令增添了 HTML 语法,同时它也是应用自定义的要素和本性把作为和 DOM
转换关联到一道的主意。通过这几个指令,能够创设可复用的 UI
组件,配置你的运用,并且能够形成你能想象到的差不离全体事情,这一个业务都得以在你的
UI 模板中落实。所以说,自定义指令是
Angular 的精华。

  与劳务一样,你能够通过模块对象的 API 来定义指令,只要调用模块实例的
directive() 函数即可,个中 directiveFunction
是二个厂子函数,用来定义指令的表征。

var appModule = angular.module('appModule', [...]);
appModule.directive('directiveName', directiveFunction);

  指令的东西重重,现在详解,那里先举个例证,感受下命令的魔力。

  编写一个万分容易的下令:二个 <hello> 成分,它会把温馨替换成<div>Hi there</div>。

  先看指令:

1 var appModule = angular.module('app', []);
2 
3 appModule.directive('hello', function () {
4     return {
5         restrict: 'E',
6         template: '<div>Hi there</div>',
7         replace: true
8     };
9 });

  那里,restrict 属性表示描述指令的风骨,E
代表同意行使要素的花样;template 属性表示必要替换的始末;replace
属性设置为 true 表示会用 HTML 内容来替换模板。

  能够在模板中如此使用它:

1 <html lang="en" ng-app="app">
2     <script src="../src/angular.js"></script>
3     <script src="directive.js"></script>
4     <body>
5         <hello></hello>
6     </body>
7 </html>

  把以上内容加载到浏览器中,就会议及展览示

Hi there

1六 、校验用户输入

  Angular 自动为 <form>
成分扩充了一部分好用的风味,使其更契合单页面应用。当中3个特色是,Angular
允许你为表单中的输入成分定义一个官方的情况,并且只有当全部因素都以合法景况时才同意提交表单。

  控制器如下:

 1 var addUser = angular.module('AddUserModule', []);
 2 
 3 addUser.controller('AddUserController', function ($scope) {
 4     $scope.message = '';
 5 
 6     $scope.addUser = function () {
 7         // 这里把 user 真正保存到数据库中
 8         $scope.message = 'Thanks, ' + $scope.user.first + ', we added you!';
 9     }
10 });

  模板如下:

 1 <html ng-app="AddUserModule">
 2     <body>
 3         <form name="addUserForm" ng-controller="AddUserController">
 4             <div ng-show="message">{{message}}</div>
 5             <div>First name: <input name="firstName" ng-model="user.first" required></div>
 6             <div>Last name: <input ng-model="user.last" required></div>
 7             <div>Email: <input type="email" ng-model="user.email" required></div>
 8             <div>Age: <input type="number" ng-model="user.age" ng-maxlength="3" ng-minlength="1"></div>
 9             <div><button ng-click="addUser()" ng-disabled="!addUserForm.$valid">Submit</button></div>
10         </form>
11         <script src="../src/angular.js"></script>
12         <script src="submit.js"></script>
13     </body>
14 </html>

  在控制器中,能够通过 $valid
属性获取表单的校验状态,当表单中的全部输入项都合法时,Angular
将会把这几个天性设置为 true,不然没有输入完结时禁止使用了 Submit 按钮。

  金沙澳门官网 16金沙澳门官网 17

PS:到近来甘休,已经介绍了 Angular
框架的差不多全部常用性子,通晓了这几个《常用天性》体系的小说,就终于入门了,加油!

尤其谢谢:《用 AngularJS 开发下一代 Web
应用》

发表评论

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

网站地图xml地图