AngularJS高级编程

目    录

第1章

构建简单的AngularJS应用    1

1.1  构建目标        1

1.2  学习内容        3

1.3  步骤1：使用Yeoman搭建项目 4

1.3.1  安装Yeoman       4

1.3.2  搭建项目    5

1.3.3  浏览应用    6

1.3.4  清理    7

1.4  步骤2：创建监视列表         8

1.4.1  应用模块    8

1.4.2  Watchlist服务    10

1.4.3  监视列表面板指令    12

1.5  步骤3：配置客户端路由     18

1.5.1  Angular ngRoute模块         18

1.5.2  添加新的路由    19

1.5.3  使用路由    20

1.5.4  模板视图    20

1.6  步骤4：创建导航栏     22

1.6.1  更新HTML 22

1.6.2  创建MainCtrl      23

1.7  步骤5：添加股票         25

1.7.1  创建CompanyService 25

1.7.2  创建AddStock模态框        26

1.7.3  更新WatchlistService          27

1.7.4  实现WatchlistCtrl       29

1.7.5  修改监视列表视图    30

1.8  步骤6：集成Yahoo

Finance         31

1.8.1  创建QuoteService      31

1.8.2  从控制台调用服务    33

1.9  步骤7：创建股票表格         34

1.9.1  创建StkStockTable指令    34

1.9.2  创建StkStockRow指令      35

1.9.3  创建股票表格模板    37

1.9.4  更新监视列表视图    38

1.10  步骤8：内联表单编辑       39

1.10.1  创建contenteditable指令       39

1.10.2  更新StkStockTable模板  41

1.11  步骤9：格式化货币  42

1.11.1  创建StkSignColor指令     42

1.11.2  更新StockTable模板        43

1.12  步骤10：为价格变动添加动画         44

1.12.1  创建StkSignFade指令      44

1.12.2  更新StockTable模板        46

1.13  步骤11：创建仪表盘         47

1.13.1  更新仪表盘控制器  47

1.13.2  更新仪表盘视图       50

1.14  生产环境部署      52

1.15  小结      53

第2章

智能工作流和构建工具          55

2.1  工具的作用   55

2.2  Bower     56

2.2.1  开始使用Bower          56

2.2.2  搜索包         56

2.2.3  安装包         56

2.2.4  版本化依赖         57

2.3  Grunt      57

2.3.1  开始使用Grunt  57

2.3.2  安装插件    59

2.3.3  目录结构    59

2.3.4  Gruntfile      60

2.3.5  配置任务和目标         61

2.3.6  创建自定义任务         66

2.4  Gulp         69

2.4.1  开始使用Gulp    70

2.4.2  安装插件    70

2.4.3  Gulpfile         70

2.4.4  创建任务    71

2.4.5  参数和异步行为         75

2.4.6  Gulp、Grunt和Make         79

2.5  Yeoman  81

2.5.1  开始使用Yeoman       81

2.5.2  搭建新的项目    81

2.5.3  浏览插件和任务         82

2.5.4  别名任务和工作流    87

2.5.5  修改    88

2.5.6  子生成器    88

2.5.7  流行的生成器    88

2.6  小结        89

第3章

架构          91

3.1  架构如此重要的原因   91

3.2  控制器、服务和指令   92

3.2.1  控制器         92

3.2.2  服务    99

3.2.3  指令    103

3.2.4  小结    104

3.3  使用模块组织代码        104

3.4  目录结构        109

3.4.1  小型项目    110

3.4.2  中型项目    110

3.4.3  大型项目    112

3.5  模块加载器   114

3.5.1  RequireJS     114

3.5.2  Browserify   117

3.6  构造用户身份验证的最佳实践   121

3.6.1  服务：从服务器加载数据和保存数据    122

3.6.2  控制器：向HTML公开API       122

3.6.3  指令：与DOM进行交互  123

3.7  小结        124

第4章

数据绑定          125

4.1  数据绑定        125

4.2  数据绑定的作用   128

4.3  AngularJS作用域   130

4.3.1  作用域继承         131

4.3.2  性能考虑    136

4.3.3  过滤器和数据绑定    139

4.4  小结        149

第5章

指令          151

5.1  指令        151

5.1.1  了解指令    151

5.1.2  指令的帕累托分布    153

5.2  深入理解指令        161

5.2.1  使用模板的指令组合         161

5.2.2  为指令创建不同的作用域         163

5.2.3  限制和替换设置         170

5.2.4  继续前行    173

5.3  在运行时改变指令模板        173

5.3.1  内嵌    173

5.3.2  编译设置或者编译与链接         177

5.4  小结        178

第6章

模板、位置和路由          179

6.1  第1部分：模板    181

6.1.1  在模板中使用ngInclude指令   182

6.1.2  ngInclude和性能        184

6.1.3  使用脚本标记包含模板    185

6.1.4  $templateCache服务          187

6.1.5  下一步：模板和数据绑定         188

6.2  第2部分:

$location服务      190

6.2.1  URL中包含的信息     190

6.2.2  介绍$location      190

6.2.3  使用$location追踪页面状态     192

6.2.4  下一步：路由和SPA 194

6.3  第3部分：路由    194

6.3.1  使用ngRoute模块     195

6.3.2  $routeProvider提供者        197

6.3.3  $routeParams服务     199

6.3.4  SPA中的导航      199

6.3.5  搜索引擎和SPA 200

6.3.6  在服务器上设置Prerender        201

6.3.7  Google AJAX Crawling规范         202

6.3.8  为搜索引擎配置AngularJS         203

6.3.9  真正的搜索引擎集成         204

6.3.10  介绍动画  204

6.3.11  实际的ngAnimate模块   206

6.4  小结        208

第7章

服务、工厂和提供者     209

7.1  依赖注入概述        210

7.1.1  $injector服务     211

7.1.2  函数注解    212

7.2  构建自己的服务   213

7.2.1  factory()函数       214

7.2.2  service()函数       216

7.2.3  provider()函数     220

7.3  服务的常见用例   224

7.3.1  构建$user服务  224

7.3.2  构建$stockPrice服务 226

7.4  使用内置提供者   227

7.4.1  自定义插值分隔符    228

7.4.2  使用$compileProvider的白名单链接        229

7.4.3  使用$rootScopeProvider的全局表达式属性    231

7.5  小结        233

第8章

服务器通信     235

8.1  将要学习的内容   235

8.2  约定简介        236

8.3  发起HTTP请求的服务 237

8.3.1  $http   238

8.3.2  $resource服务   250

8.4  使用Twitter的REST

API       253

8.5  使用StrongLoop LoopBack搭建REST

API    255

8.6  在AngularJS中使用Web套接字 261

8.7  在AngularJS中使用Firebase         264

8.8  小结        265

第9章

测试和调试AngularJS应用    267

9.1  AngularJS测试哲学        267

9.2  AngualrJS中的单元测试        271

9.2.1  Mocha测试框架         271

9.2.2  使用Karma在浏览器中执行单元测试    275

9.2.3  使用Sauce在云中执行浏览器测试 278

9.2.4  评估单元测试选项    282

9.3  DOM集成测试      283

9.3.1  $httpBackend指南     283

9.3.2  将要测试的页面         287

9.3.3  使用ng-scenario执行DOM集成测试      288

9.3.4  使用protractor执行DOM集成测试        294

9.3.5  评估ng-scenario和protractor  300

9.4  调试AngularJS应用       300

9.4.1  debug模块 300

9.4.2  使用Chrome DevTools进行调试       302

9.5  小结        305

第10章

继续前行       307

10.1  使用Angular-UI

Bootstrap  308

10.1.1  模态框       308

10.1.2  日期选择器       311

10.1.3  时间选择器       312

10.1.4  自定义模板       313

10.2  使用Ionic框架开发的混合移动应用         317

10.2.1  设置Ionic、Cordova和Android

SDK        317

10.2.2  在Ionic应用中使用AngularJS         318

10.2.3  为生产使用Yeoman工作流和构建        321

10.3  集成开源JavaScript和AngularJS        322

10.3.1  使用Moment操作日期和时区       322

10.3.2  使用Mongoose实现模式验证和深度对象    326

10.4  AngularJS和ECMAScript 6  333

10.5  小结      334

附录  资源     337

用AngularJS编写高级应用的完整指南 　　这是一个令Web开发人员激动的时代，掌握JavaScript语言技能的人才变得炙手可热。AngularJS迅速蜕变为领先的新一代客户端Web框架；可供个人、小团队和大公司构建和测试基于浏览器的、极其复杂的应用。 　　《AngularJS高级编程》内容广泛，涵盖构建AngularJS应用乃至内嵌、构建系统和自动执行集成测试等高级主题。 　　如果你已经熟悉基本编程知识，并希望编写在浏览器UI中显示复杂数据的Web应用，或快捷高效地模拟本地应用的移动Web应用，那么本书将是值得你反复研读的必备指南。 　　主要内容 　　◆ 从头构建一个简单应用www.stockdog.io，在便捷动手练习的引导下讲解基本构建块 　　◆ 详细讲解AngularJS中将数据绑定到模板的高级方式 　　◆ 讲解AngularJS架构，并演示各个组成部分是如何协作的 　　◆ 详述服务、工厂和提供者之间的差异，并说明每种技术的使用时机 　　◆ 介绍可供测试和调试AngularJS应用的技术 　　◆ 演示许多可与AngularJS一起使用的流行工具，包括Yeoman、RequireJS、Browserify、Mocha、Jasmine、Bootstrap、Ionic、Moment和Mongoose