AngularJS权威教程

内容简介：

作者简介：

Ari Lerner

是一位全栈工程师，拥有多年AngularJS经验，自办并运营AngularJS电子报ng-newsletter.com，在著名硅谷工程师培训学校Hack Reactor担任AngularJS讲师。他的工作涉及软件开发的各个层次，包括基础设施开发、前端应用开发和性能优化。他目前住在旧金山一个阳光明媚的地方，还是FullStack.io创始人。

译者简介：

赵望野

前端工程师，前端基础技术组leader，曾经负责豌豆荚2.0的前端架构设计和主要开发工作，目前负责Front-end Technical Infrastructure的建设，在工作中有丰富的AngularJS使用经验。新浪微博@赵望野。

徐飞

2005年至今一直从事企业应用前端架构，对富因特网应用有较深刻的认识，致力于前端的高效开发，研究过Backbone和AngularJS的源码，翻译过讲解AngularJS基本原理的文章，对脏数据检测和基于存取器两种监听方式的差异有深刻认识。

何鹏飞

网名basecss，目前就职于腾讯CDC，任前端工程师。喜欢阅读，喜欢前端技术，崇尚开源。工作之余翻译过Grunt和Lesscss相关文档，同时也是Lesscss中文社区贡献者。

作者简介：

作者简介：

Ari Lerner

是一位全栈工程师，拥有多年AngularJS经验，自办并运营AngularJS电子报ng-newsletter.com，在著名硅谷工程师培训学校Hack Reactor担任AngularJS讲师。他的工作涉及软件开发的各个层次，包括基础设施开发、前端应用开发和性能优化。他目前住在旧金山一个阳光明媚的地方，还是FullStack.io创始人。

译者简介：

赵望野

前端工程师，前端基础技术组leader，曾经负责豌豆荚2.0的前端架构设计和主要开发工作，目前负责Front-end Technical Infrastructure的建设，在工作中有丰富的AngularJS使用经验。新浪微博@赵望野。

徐飞

2005年至今一直从事企业应用前端架构，对富因特网应用有较深刻的认识，致力于前端的高效开发，研究过Backbone和AngularJS的源码，翻译过讲解AngularJS基本原理的文章，对脏数据检测和基于存取器两种监听方式的差异有深刻认识。

何鹏飞

网名basecss，目前就职于腾讯CDC，任前端工程师。喜欢阅读，喜欢前端技术，崇尚开源。工作之余翻译过Grunt和Lesscss相关文档，同时也是Lesscss中文社区贡献者。

目录：

第1章　初识AngularJS1

1.1　浏览器如何获取网页1

1.2　浏览器是什么2

1.3　AngularJS是什么2

1.3.1　AngularJS有什么不同3

1.3.2　许可3

第2章　数据绑定和第一个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

第8章　指令简介43

8.1　指令：自定义HTML元素和属性44

8.2　向指令中传递数据50

第9章　内置指令56

9.1　基础ng属性指令56

9.1.1　布尔属性56

9.1.2　类布尔属性58

9.2　在指令中使用子作用域59

第10章　指令详解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　transclude82

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　ngModel90

10.5.1　自定义渲染92

10.5.2　属性92

10.6　自定义验证93

第11章　AngularJS模块加载95

11.1　配置95

11.2　运行块96

第12章　多重视图和路由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

第13章　依赖注入108

13.1　推断式注入声明109

13.2　显式注入声明110

13.3　行内注入声明110

13.4　$injector API111

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　ngMin112

13.5.1　安装113

13.5.2　使用ngMin113

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

第15章　同外界通信：XHR和服务器通信125

15.1　使用$http125

15.2　设置对象128

15.3　响应对象130

15.4　缓存HTTP请求131

15.5　拦截器132

15.6　设置$httpProvider133

15.7　使用$resource134

15.8　安装134

15.9　应用$resource135

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　使用Restangular142

15.14　Restangular简介142

15.15　安装Restangular143

15.16　Restangular对象简介144

15.17　使用Restangular145

15.17.1　我的HTTP方法们怎么办146

15.17.2　自定义查询参数和头147

15.18　设置Restangular147

第16章　XHR实践153

16.1　跨域和同源策略153

16.2　JSONP153

16.3　使用CORS154

16.3.1　设置154

16.3.2　服务器端CORS支持155

16.3.3　简单请求155

16.3.4　非简单请求156

16.4　服务器端代理157

16.5　使用JSON157

16.6　使用XML158

16.7　使用AngularJS进行身份验证159

16.7.1　服务器端需求159

16.7.2　客户端身份验证160

16.8　和MongoDB通信165

第17章　promise168

17.1　什么是promise168

17.2　为什么使用promise169

17.3　Angular中的promise170

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

第18章　服务器通信175

18.1　自定义服务器端175

18.2　安装NodeJS175

18.3　安装Express176

18.4　调用API178

18.5　使用Amazon AWS的无服务器应用181

18.5.1　DynamoDB181

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 + Angular182

18.7　开始182

18.8　介绍184

18.9　安装184

18.10　运行185

18.11　用户认证/鉴权186

18.12　UserService190

18.13　迁移到AWS上191

18.14　AWSService194

18.15　在Dynamo上开始196

18.16　$cacheFactory196

18.17　保存currentUser197

18.18　上传到S3199

18.19　处理文件上传201

18.20　查询Dynamo203

18.21　在HTML显示列表204

18.22　出售我们的作品205

18.23　使用Stripe206

18.24　使用Firebase的无服务器应用209

18.25　使用Firebase和Angular的三方数据绑定210

18.26　从AngularFire开始211

18.26.1　注册并创建一个Firebase211

18.26.2　包含Firebase和AngularFire库212

18.26.3　把Firebase作为依赖项添加212

18.26.4　绑定模型到Firebase URL212

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　使用RequireJS231

19.9　Jasmine233

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　模拟$httpBackend246

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　Protractor270

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.css324

22.11.2　TweenMax/TweenLite324

第23章　digest循环和$apply326

23.1　$watch列表326

23.2　脏值检查327

23.3　$watch328

23.4　$watchCollection330

23.5　页面中的$digest循环330

23.6　$evalAsync列表331

23.7　$apply332

23.8　何时使用$apply332

第24章　揭秘Angular334

24.1　视图的工作原理335

24.1.1　编译阶段335

24.1.2　运行时336

第25章　AngularJS精华扩展337

25.1　AngularUI337

25.2　安装337

25.3　ui-router337

25.3.1　安装337

25.3.2　事件342

25.3.3　$stateParams343

25.3.4　$urlRouterProvider344

25.3.5　创建一个导航程序345

25.4　ui-utils346

25.4.1　安装347

25.4.2　mask347

25.4.3　ui-event347

25.4.4　ui-format348

第26章　移动应用350

26.1　响应式Web应用350

26.2　交互350

26.2.1　安装350

26.2.2　ngTouch351

26.2.3　$swipe服务352

26.2.4　angular-gestures和多点触控手势353

26.2.5　安装angular-gestures354

26.2.6　使用angular-gestures354

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　引入Angular362

26.6　使用Yeoman构建363

26.6.1　修改Yeoman以便使用Cordova364

26.6.2　装配Yeoman构建365

26.6.3　构建移动部分365

26.6.4　处理引导程序367

第27章　本地化369

27.1　angular-translate369

27.2　安装369

27.3　教你的应用一种新语言370

27.4　多语言支持371

27.5　运行时切换语言372

27.6　加载语言373

27.7　angular-gettext374

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 API388

29.4.1　getTrusted388

29.4.2　parse389

29.4.3　trustAs389

29.4.4　isEnabled390

29.5　配置$sce390

29.6　可信赖的上下文类型390

第30章　AngularJS和IE浏览器391

30.1　Ajax缓存393

30.2　AngularJS中的SEO393

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重写URL395

30.5.3　使用Ngnix代理URL396

30.6　获取快照396

30.7　使用Zombie.js获取HTML快照397

30.8　使用grunt-html-snapshot398

30.9　Prerender.io399

30.10　<noscript>方法400

第31章　构建Angular Chrome应用401

31.1　了解Chrome应用401

31.1.1　manifest.json401

31.1.2　背景脚本401

31.1.3　视图401

31.2　构建你的Chrome应用402

31.3　搭建框架402

31.4　manifest.json403

31.5　tab.html404

31.6　在Chrome中加载应用405

31.7　主模块406

31.8　构建主页406

31.9　使用Wundergroud的天气API408

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-repeat423

32.4　优化$digest调用423

32.5　优化$watch函数424

32.5.1　bindonce425

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　利用$templateCache429

第33章　调试AngularJS430

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 Batarang432

33.3.1　安装Batarang432

33.3.2　检查模型433

33.3.3　检查性能433

33.3.4　检查依赖图表434

33.3.5　可视化应用434

第34章　下一步435

34.1　jqLite和jQuery435

34.2　了解基本工具436

34.3　Grunt436

34.4　grunt-angular-templates439

34.4.1　安装439

34.4.2　用法440

34.4.3　可用选项440

34.4.4　用法442

34.5　Lineman443

34.6　Bower445

34.6.1　安装445

34.6.2　Bower简介445

34.6.3　配置Bower446

34.6.4　搜索程序包447

34.6.5　安装程序包447

34.6.6　使用程序包447

34.6.7　移除程序包448

34.7　Yeoman448

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　CoffeeScript452

34.8.2　安全压缩452

34.8.3　跳过索引452

34.9　测试应用452

34.10　打包应用453

34.11　打包模板453

第35章　总结456

文章试读：在介绍AngularJS之前，我们需要先了解浏览器在渲染网页的过程中都做了些什么。 目前市场上有很多不同品牌的浏览器，常见的有Chrome、Safari、Firefox和IE。它们的核心功能基本上都是相同的：获取网页，并将它显示给用户。 浏览器获取页面对应的HTML文本，将其解析为一个在浏览器内部使用的结构，对页面的内容进行布局，并在内容显示到屏幕上之前加上样式，所有这些工作都是在浏览...

(查看全部试读)