Angular 权威教程

🌙
手机阅读
本文目录结构
Angular 权威教程

* Angular领域里程碑式著作

* 全面详尽、通俗易懂,带你轻松领悟新一代Web开发精髓

* Google Angular项目经理兼主管Naomi Black、Google开发技术推广部大中华区主管栾跃作序推荐

本书堪称Angular领域的里程碑式著作,涵盖了关于Angular的几乎所有内容。对于没有经验的人,本书平实、通俗的讲解,递进、严密的组织,可以让人毫无压力地登堂入室,迅速领悟新一代Web应用开发的精髓。

* 如果你有相关经验,那本书对Angular概念和技术细节的全面剖析,以及引人入胜、切中肯綮的讲解,将帮助你彻底掌握这个框架,在自己职业技术修炼之路上更进一步,本书的读者对象为所有想要理解和学习Angular的前端开发人员。

本书特色

  • 强力的 IDE 支持 + 完善的生态圈 + 一套代码、多种平台 +……=Angular
  • 资深全栈开发工程师经验总结
  • 雪狼组织的 Nice Angular 社区主力倾情翻译
  • Google 推荐阅读

本书内容循序渐进,帮你在短时间内毫不费力地掌握整个 Angular 框架并打好坚实的基础,工作效率获得极大的提升。 书中包含丰富的示例应用,展示如何编写组件、如何使用表单和 API,还会带你学习如何使用 Angular 创建:

  • 基于组件的仿制版 Reddit
  • 使用 RxJS 可观察对象的实时聊天应用
  • “随敲随搜”的 YouTube 搜索应用
  • 带有可播放乐曲预览的 Spotify 曲目搜索应用

购买链接

内容简介

本书堪称 Angular 领域的里程碑式著作,涵盖了关于 Angular 的几乎所有内容。对于没有经验的人,本书平实、通俗的讲解,递进、严密的组织,可以让人毫无压力地登堂入室,迅速领悟新一代 Web 应用开发的精髓。如果你有相关经验,那本书对 Angular 概念和技术细节的全面剖析,以及引人入胜、切中肯綮的讲解,将帮助你彻底掌握这个框架,在自己职业技术修炼之路上更进一步。

作者介绍

Ari Lerner

全栈工程师,拥有多年 Angular 经验,自办并运营 Angular 电子报 ng-newsletter.com,在著名硅谷工程师培训学校 Hack Reactor 担任 AngularJS 讲师。Fullstack.io 创始人。

Felipe Coury

Gistia Labs 联合创始人兼 CTO。

Nate Murray

全栈工程师,曾任职于 IFTTT,拥有数据挖掘和增量 Web 服务等方面的背景。

Carlos Taborda

Gistia Labs 联合创始人兼主管。

认识 Angular

相比 Angular1(也叫 Angular.js)而言 Angular 的设计应该说是有了一次跨越性的改变。ng2 的核心概念更清晰,本着少即是多的原则,你能很快记住 ng2 的核心是什么。作为一个 Angular 的使用者,个人还是便爱 ng2 多一些,因为 1.0 版本的学习曲线比较陡峭,而且其中的坑比较多一些。虽然一开始我也是从 1.0 的版本开始学习的。

Angular 框架主要通过 HTML 和 JavaScript 来构建应用,当然也可以使用 HTML 和 TypeScript 来进行开发。建议使用 TypeScript 进行开发,因为使用 TypeScript 比较简洁一些,也能提高开发效率。

Angular 中的 8 个核心概念:

  • 模块
  • 组件
  • 模板
  • 元数据
  • 数据绑定
  • 指令
  • 服务
  • 依赖注入

学前准备

《Angular 权威教程》整本书中的教程比较详细,除了部分及其细微的地方有所遗漏,需要自己思考一下,其它没有什么问题。

即使没有太多的前端知识储备,也不用担心,你也可以轻松的读完这本书。

在开始 Angular 编程之旅之前,我们需要按照如下步骤:

  • 安装 Node.js, 官网地址:https://nodejs.org/

  • 安装 TypeScript,在控制台输入命令 npm install -g typescript 进行全局安装;

  • 安装 angular/cli 工具,在控制台输入命令 npm install -g @angular/cli ;

目录

第 1 章 编写你的第一个 Angular Web 应用

  • 1.1 仿制 Reddit 网站 1
  • 1.2 起步 3
    • 1.2.1 TypeScript 3
    • 1.2.2 angular-cli 3
    • 1.2.3 示例项目 4
  • 1.3 运行应用 7
    • 1.3.1 制作 Component 8
    • 1.3.2 导入依赖 9
    • 1.3.3 Component 注解 10
    • 1.3.4 用 templateUrl 添加模板 11
    • 1.3.5 添加 template 11
    • 1.3.6 用 styleUrls 添加 CSS 样式 12
    • 1.3.7 加载组件 12
  • 1.4 把数据添加到组件中 13
  • 1.5 使用数组 15
  • 1.6 使用 UserItemComponent 组件 18
    • 1.6.1 渲染 UserItemComponent 18
    • 1.6.2 接收输入 19
    • 1.6.3 传入 Input 值 20
  • 1.7 “启动”速成班 21
  • 1.8 扩展你的应用 22
    • 1.8.1 添加 CSS 24
    • 1.8.2 应用程序组件 24
    • 1.8.3 添加互动 26
    • 1.8.4 添加文章组件 29
  • 1.9 渲染多行 36
    • 1.9.1 创建 Article 类 36
    • 1.9.2 存储多篇文章 40
    • 1.9.3 使用 inputs 配置 ArticleComponent 41
    • 1.9.4 渲染文章列表 42
  • 1.10 添加新文章 44
  • 1.11 最后的修整 44
    • 1.11.1 显示文章所属的域名 44
    • 1.11.2 基于分数重新排序 45
  • 1.12 全部代码 45
  • 1.13 总结 45
  • 1.14 获得帮助 46

第 2 章 TypeScript

  • 2.1 Angular 是用 TypeScript 构建的 47
  • 2.2 TypeScript 提供了哪些特性 48
  • 2.3 类型 49
  • 2.4 内置类型 50
    • 2.4.1 字符串 50
    • 2.4.2 数字 50
    • 2.4.3 布尔类型 51
    • 2.4.4 数组 51
    • 2.4.5 枚举 51
    • 2.4.6 任意类型 52
    • 2.4.7 “无”类型 52
  • 2.5 类 52
    • 2.5.1 属性 52
    • 2.5.2 方法 53
    • 2.5.3 构造函数 54
    • 2.5.4 继承 55
  • 2.6 工具 57
    • 2.6.1 胖箭头函数 57
    • 2.6.2 模板字符串 58
  • 2.7 总结 59

第 3 章 Angular 的工作原理

  • 3.1 应用 60
    • 3.1.1 主导航组件 61
    • 3.1.2 面包屑导航组件 61
    • 3.1.3 产品列表组件 62
  • 3.2 产品数据模型 64
  • 3.3 组件 64
  • 3.4 组件注解 66
    • 3.4.1 组件 selector 66
    • 3.4.2 组件 template 67
    • 3.4.3 添加产品 67
    • 3.4.4 用模板绑定来查看产品 68
    • 3.4.5 添加更多产品 69
    • 3.4.6 选择一个产品 70
    • 3.4.7 用列出产品 73
  • 3.5 设置 ProductsList 的 @Component 配置项 73
    • 3.5.1 设置 ProductsList 的 @Component 配置项 73
    • 3.5.2 组件的输入 74
    • 3.5.3 组件的输出 77
    • 3.5.4 触发自定义事件 78
    • 3.5.5 编写 ProductsList 的控制器类 79
    • 3.5.6 编写 ProdctsList 的视图模板 81
  • 3.6 产品条目组件 83
    • 3.6.1 产品条目的组件配置 83
    • 3.6.2 产品条目组件的定义类 84
    • 3.6.3 产品条目组件的 template 84
    • 3.6.4 完整的 ProductRow 代码清单 85
  • 3.8 价格展示组件 86
  • 3.9 产品分类组件 87
  • 3.10 创建 NgModule 并启动应用 88
  • 3.11 完整的项目 89
  • 3.12 关于数据架构的一点说明 90

第 4 章 内置指令

  • 4.1 简介 91
  • 4.2 ngIf 91
  • 4.3 ngSwitch 92
  • 4.4 ngStyle 93
  • 4.5 ngClass 95
  • 4.6 ngFor 98
  • 4.7 ngNonBindable 102
  • 4.8 总结 102

第 5 章 Angular 中的表单

  • 5.1 表单——既重要,又复杂 103
  • 5.2 FormControl 和 FormGroup 103
    • 5.2.1 FormControl 104
    • 5.2.2 FormGroup 104
  • 5.3 我们的第一个表单 105
    • 5.3.1 加载 FormsModule 106
    • 5.3.2 简易 SKU 表单:@Component 注解 107
    • 5.3.3 简易 SKU 表单:template 107
    • 5.3.4 简易 SKU 表单:组件定义类 110
  • 5.4 使用 FormBuilder 111
  • 5.5 响应式表单 FormBuilder 112
    • 5.5.1 使用 FormBuilder 112
    • 5.5.2 在视图中使用 myForm 113
    • 5.5.3 试试看 114
  • 5.6 添加验证 115
    • 5.6.1 显式地把 sku 设置为实例变量 116
    • 5.6.2 自定义验证器 120
  • 5.7 监听变化 121
  • 5.8 ngModel 122
  • 5.9 总结 124

第 6 章 HTTP

  • 6.1 简介 125
  • 6.2 使用 @angular/http 126
  • 6.3 基本请求 127
    • 6.3.1 构建 SimpleHTTPComponent 的 @Component 127
    • 6.3.2 构建 SimpleHTTPComponent 的 template 128
    • 6.3.3 构建 SimpleHTTPComponent 控制器 128
    • 6.3.4 完整的 SimpleHTTPComponent 130
  • 6.4 编写 YouTubeSearchComponent 130
    • 6.4.1 编写 SearchResult 132
    • 6.4.2 编写 YouTubeService 132
    • 6.4.3 编写 SearchBox 140
    • 6.4.4 编写 SearchResultComponent 145
    • 6.4.5 编写 YouTubeSearchComponent 147
  • 6.5 @angular/http API 150
    • 6.5.1 发起一个 POST 请求 150
    • 6.5.2 PUT/PATCH/DELETE/HEAD 150
    • 6.5.3 RequestOptions 151
  • 6.6 总结 151

第 7 章 路由

  • 7.1 为什么需要路由 152
  • 7.2 客户端路由的工作原理 153
    • 7.2.1 初级阶段:使用锚标记 153
    • 7.2.2 进化:HTML5 客户端路由 154
  • 7.3 编写第一个路由配置 155
  • 7.4 Angular 路由的组成部件 155
    • 7.4.1 导入 155
    • 7.4.2 路由配置 155
    • 7.4.3 安装路由配置 156
    • 7.4.4 使用调用 RouterOutlet 指令 157
    • 7.4.5 使用 [routerLink] 调用 routerLink 指令 158
  • 7.5 整合 159
    • 7.5.1 创建组件 160
    • 7.5.2 应用程序组件 161
    • 7.5.3 配置路由 163
  • 7.6 路由策略 164
  • 7.7 路径定位策略 165
  • 7.8 运行应用程序 165
  • 7.9 路由参数 167
  • 7.10 音乐搜索应用 168
    • 7.10.1 首要步骤 169
    • 7.10.2 SpotifyService 170
    • 7.10.3 SearchComponent 171
    • 7.10.4 尝试搜索 179
    • 7.10.5 TrackComponent 180
    • 7.10.6 音乐搜索应用小结 182
  • 7.11 路由器钩子 182
    • 7.11.1 AuthService 183
    • 7.11.2 LoginComponent 184
    • 7.11.3 ProtectedComponent 组件和路由守卫 186
  • 7.12 嵌套路由 190
    • 7.12.1 配置路由 191
    • 7.12.2 ProductsComponent 组件 191
  • 7.13 总结 194

第 8 章 依赖注入

  • 8.1 注入示例:PriceService 196
  • 8.2 “别打给我们……” 197
  • 8.3 依赖注入的部件 199
  • 8.4 尝试注入器 200
  • 8.5 用 NgModule 提供依赖 201
  • 8.6 提供者 202
    • 8.6.1 使用类 202
    • 8.6.2 使用工厂 203
    • 8.6.3 使用值 205
    • 8.6.4 使用别名 205
  • 8.7 应用中的依赖注入 205
  • 8.8 使用注入器 207
  • 8.9 替换值 211
  • 8.10 NgModule 215
    • 8.10.1 NgModule 与 JavaScript 模块 215
    • 8.10.2 编译器与组件 215
    • 8.10.3 依赖注入与提供者 216
    • 8.10.4 组件可见性 217
    • 8.10.5 指定提供者 218
  • 8.11 总结 219

第 9 章 Angular 数据架构

第 10 章 使用可观察对象的数据架构,服务

  • 10.1 可观察对象和 RxJS 222
    • 10.1.1 注意:一些必备的 RxJS 相关知识 222
    • 10.1.2 学习响应式编程和 RxJS 223
  • 10.2 聊天应用概览 224
    • 10.2.1 组件 225
    • 10.2.2 数据模型 226
    • 10.2.3 服务 226
    • 10.2.4 总结 226
  • 10.3 实现数据模型 227
    • 10.3.1 User 227
    • 10.3.2 Thread 227
    • 10.3.3 Message 228
  • 10.4 实现 UserService 228
    • 10.4.1 currentUser 流 229
    • 10.4.2 设置新用户 230
    • 10.4.3 UserService.ts 231
  • 10.5 MessagesService 231
    • 10.5.1 newMessages 流 231
    • 10.5.2 messages 流 233
    • 10.5.3 操作流模式 233
    • 10.5.4 共享流 234
    • 10.5.5 把 Message 对象添加到 messages 流中 235
    • 10.5.6 完整的 MessagesService 238
    • 10.5.7 试用 MessagesService 241
  • 10.6 ThreadsService 242
    • 10.6.1 当前一组 Thread 的映射(threads 流) 242
    • 10.6.2 按时间逆序排列的 Thread 列表(orderedthreads 流) 246
    • 10.6.3 当前已选的 Thread(currentThread 流) 246
    • 10.6.4 当前已选 Thread 的 Message 列表(currentThreadMessages 流) 248
    • 10.6.5 完整的 ThreadsService 250
  • 10.7 总结 251

第 11 章 使用可观察对象的数据架构,视图组件

  • 11.1 构建视图:顶层组件 ChatApp 252
  • 11.2 ChatThreads 组件 254
    • 11.2.1 ChatThreads 控制器 255
    • 11.2.2 ChatThreads 的 template 256
  • 11.3.1 ChatThread 控制器和 ngOnInit 257
  • 11.3.2 ChatThread 的 template 258
  • 11.3.3 ChatThread 的完整代码 258
  • 11.4 ChatWindow 组件 259
    • 11.4.1 ChatWindow 组件类属性 260
    • 11.4.2 ChatWindow 的 ngOnInit 261
    • 11.4.3 ChatWindow 的 sendMessage 261
    • 11.4.4 ChatWindow 的 onEnter 262
    • 11.4.5 ChatWindow 的 scrollToBottom 262
    • 11.4.6 ChatWindow 的 template 263
    • 11.4.7 处理键盘动作 264
    • 11.4.8 使用 ngModel 264
    • 11.4.9 点击 Send 按钮 265
    • 11.4.10 完整的 ChatWindow 组件 267
  • 11.5.1 设置 incoming 属性 268
  • 11.5.2 ChatMessage 的 template 270
  • 11.6 ChatNavBar 组件 273
    • 11.6.1 ChatNavBar 的 @Component 273
    • 11.6.3 ChatNavBar 的 template 274
    • 11.6.4 完整的 ChatNavBar 组件 275
  • 11.7 总结 276
  • 11.8 更进一步 277

第 12 章 基于 TypeScript 的 Redux 简介

  • 12.1 Redux 279
  • 12.2 Redux 核心概念 280
    • 12.2.1 reducer 是什么 280
    • 12.2.2 定义 Action 和 Reducer 的接口 281
    • 12.2.3 创建第一个 Reducer 281
    • 12.2.4 运行第一个 Reducer 282
    • 12.2.5 使用 action 调整计数器 283
    • 12.2.6 reducer 的 switch 284
    • 12.2.7 action 的“参数” 285
  • 12.3 保存 state 286
    • 12.3.1 使用 store 287
    • 12.3.2 使用 subscribe 进行通知 287
    • 12.3.3 Redux 核心 290
  • 12.4 消息应用 291
    • 12.4.1 消息应用的 state 291
    • 12.4.2 消息应用的 action 292
    • 12.4.3 消息应用的 reducer 292
    • 12.4.4 试用 action 295
    • 12.4.5 action creator 296
    • 12.4.6 使用真正的 Redux 297
  • 12.5 在 Angular 中使用 Redux 299
  • 12.6 规划应用 299
  • 12.7 组建 Redux 300
    • 12.7.1 定义应用的 state 300
    • 12.7.2 定义 reducer 301
    • 12.7.3 定义 action creator 301
    • 12.7.4 创建 store 302
  • 12.8 CounterApp 组件 303
  • 12.9 提供 store 304
  • 12.10 启动应用 305
  • 12.11 CounterComponent 306
    • 12.11.1 import 306
    • 12.11.2 模板 306
    • 12.11.3 constructor 307
    • 12.11.4 整合 308
  • 12.12 更进一步 310
  • 12.13 参考资源 310

第 13 章 在 Angular 中引入 Redux

  • 13.1 阅读背景 312
  • 13.2 聊天应用概览 313
    • 13.2.1 组件 313
    • 13.2.2 数据模型 314
    • 13.2.3 reducer 315
    • 13.2.4 总结 315
  • 13.3 实现数据模型 315
    • 13.3.1 User 315
    • 13.3.2 Thread 316
    • 13.3.3 Message 316
  • 13.4 应用的 state 316
  • 13.4.1 关于代码布局 317
    • 13.4.2 根 reducer 317
    • 13.4.3 UserState 318
    • 13.4.4 ThreadsState 318
    • 13.4.5 可视化 AppState 319
  • 13.5 构建 reducer(和 action creator) 321
    • 13.5.1 设置当前用户的 action creator 321
    • 13.5.2 UsersReducer:设置当前用户 321
    • 13.5.3 会话和消息概览 322
    • 13.5.4 添加新会话的 action creator 322
    • 13.5.5 添加新会话的 reducer 323
    • 13.5.6 添加新消息的 action creator 324
    • 13.5.7 添加新消息的 reducer 325
    • 13.5.8 选择会话的 action creator 326
    • 13.5.9 选择会话的 reducer 327
    • 13.5.10 reducer 总结 328
  • 13.6 构建 Angular 聊天应用 328
    • 13.6.1 顶层组件 ChatApp 330
    • 13.6.2 ChatPage 330
    • 13.6.3 容器型组件与展示型组件 332
  • 13.7.1 Redux 选择器 334
  • 13.7.2 会话选择器 334
  • 13.7.3 未读消息总数选择器 336
  • 13.8 构建 ChatThreads 组件 336
  • 13.8.1 ChatThreads 控制器 337
  • 13.8.2 ChatThreads 的 template 338
  • 13.10 构建 ChatWindow 组件 340
    • 13.10.1 ChatWindow 的 updateState() 341
    • 13.10.2 ChatWindow 的 scrollToBottom() 342
    • 13.10.3 ChatWindow 的 sendMessage 342
    • 13.10.4 ChatWindow 的 onEnter 343
    • 13.10.6 处理键盘动作 345
    • 13.10.7 使用 ngModel 345
    • 13.10.8 点击 Send 按钮 345
  • 13.11 ChatMessage 组件 345
    • 13.11.1 设置 incoming 属性 346
    • 13.11.2 ChatMessage 的 template 346
  • 13.12 总结 347

第 14 章 高级组件

  • 14.1 样式 349
    • 14.1.1 视图(样式)封装 351
    • 14.1.2 Shadow DOM 封装 354
    • 14.1.3 不使用封装 355
  • 14.2 创建 popup 指令:引用并修改宿主元素 357
    • 14.2.1 popup 指令的结构 357
    • 14.2.2 使用 ElementRef 359
    • 14.2.3 绑定到 host 属性 360
    • 14.2.4 添加按钮并使用 exportAs 363
  • 14.3.1 改变 host 属性的 CSS 类 364
  • 14.3.2 使用 ng-content 364
  • 14.4 查询相邻的指令:编写标签页 366
    • 14.4.1 Tab 组件 367
    • 14.4.2 Tabset 组件 367
    • 14.4.3 使用 Tabset 369
  • 14.5 生命周期钩子 370
    • 14.5.1 OnInit 和 OnDestroy 371
    • 14.5.2 OnChanges 374
    • 14.5.3 DoCheck 378
    • 14.5.4 AfterContentInit、AfterViewInit、AfterContentChecked 和 AfterViewChecked 386
  • 14.6 高级模板 391
    • 14.6.1 重写 ngIf:ngBookIf 392
    • 14.6.2 重写 ngFor:ngBookRepeat 394
  • 14.7 变更检测 398
    • 14.7.1 自定义变更检测 401
    • 14.7.2 Zones 405
    • 14.7.3 可观察对象和 OnPush 406
  • 14.8 总结 409

第 15 章 测试

  • 15.1 测试驱动? 410
  • 15.2 端对端测试与单元测试 411
  • 15.3 测试工具 411
    • 15.3.1 Jasmine 411
    • 15.3.2 Karma 412
  • 15.4 编写单元测试 412
  • 15.5 Angular 单元测试框架 412
  • 15.6 测试前准备 413
  • 15.7 测试服务类和 HTTP 415
    • 15.7.1 HTTP 要点 416
    • 15.7.2 伪装 417
    • 15.7.3 模拟 417
    • 15.7.4 Http MockBackend 418
    • 15.7.5 TestBed.configureTestingModule 和提供者 418
    • 15.7.6 测试 getTrack 方法 419
  • 15.8 测试组件间的路由 424
    • 15.8.1 为测试创建路由器 424
    • 15.8.2 模拟依赖 427
    • 15.8.3 探子 427
  • 15.9 回到测试代码 429
    • 15.9.1 fakeAsync 和 advance 431
    • 15.9.2 inject 432
    • 15.9.3 测试 ArtistComponent 组件初始化 432
    • 15.9.4 测试 ArtistComponent 方法 433
    • 15.9.5 测试 ArtistComponent DOM 模板值 434
  • 15.10 测试表单 436
    • 15.10.1 创建一个 ConsoleSpy 438
    • 15.10.2 安装 ConsoleSpy 439
    • 15.10.3 配置测试模块 439
    • 15.10.4 测试表单 440
    • 15.10.5 重构表单测试 441
  • 15.11 测试 HTTP 请求 444
    • 15.11.1 测试 POST 方法 445
    • 15.11.2 测试 DELETE 方法 446
    • 15.11.3 测试 HTTP 头 447
    • 15.11.4 测试 YouTubeService 448
  • 15.12 总结 452

第 16 章 把 AngularJS 应用升级到 Angular

  • 16.1 周边概念 453
  • 16.2 我们要构建什么 454
  • 16.3 把 AngularJS 映射到 Angular 455
  • 16.4 关于互操作性的需求 456
  • 16.5 AngularJS 应用 456
    • 16.5.1 AngularJS 应用的 HTML 458
    • 16.5.2 代码概览 458
    • 16.5.3 AngularJS:PinsService 459
    • 16.5.4 AngularJS:配置路由 460
    • 16.5.5 AngularJS:HomeController 461
    • 16.5.6 AngularJS:HomeController 模板 461
    • 16.5.7 AngularJS:pin 指令 462
    • 16.5.8 AngularJS:pin 指令模板 463
    • 16.5.10 AngularJS:AddController 模板 465
    • 16.5.11 AngularJS:总结 467
  • 16.6 构建混合式应用 468
    • 16.6.1 混合式应用的结构 468
    • 16.6.2 引导混合式应用 471
    • 16.6.3 我们要升级什么 473
    • 16.6.4 插一小段内容:类型文件 479
    • 16.6.6 使用 Angular 的 PinControlsComponent 481
    • 16.6.7 把 Angular 的 PinControlsComponent 降级到 AngularJS 482
    • 16.6.8 用 Angular 添加图钉 483
    • 16.6.9 把 AngularJS 的 PinsService 和 $state 升级到 Angular 484
    • 16.6.10 写 Angular 版的 AddPinComponent 485
    • 16.6.11 使用 AddPinComponent 490
    • 16.6.12 把 Angular 的服务暴露给 AngularJS 490
    • 16.6.13 实现 AnalyticsService 491
    • 16.6.14 把 Angular 的 AnalyticsService 降级到 AngularJS 492
  • 16.7 总结 493
  • 16.8 参考资源 493

AXIHE / 精选教程

浏览全部教程

HTML

CSS

JS

书籍推荐