本书作者将一步一步带领读者详细了解Angular的核心组件。本书从一个简单的AngularApp开始,逐步引入Angular的组件、服务、服务器调用、路由和产品需求。
如果你熟悉,本书将快速指引你用Angular框架编写高性能Web桌面应用、移动应用和单页面App。Angular之前又叫作Angular 2,现在的版本经过了AngularJS开发团队的彻底重写。熟悉早期版本的开发者会发现本书是一份宝贵的资源。
前言
有趣的是,在生活中我们总是高估或低估了某些事件和项目的重要性。我真的相信,我在谷歌工作的□后一个项目——谷歌的Feedback,□终会彻底改变公司与客户的互动方式。我相信Angular(那时叫AngularJS)只不过是一个昙花一现的事物,它的寿命不会超过Feedback 项目的管理界面。
事后看来,情况正好相反。虽然Feedback仍然还在,并集成到谷歌的许多产品中,但Angular已经从一个内部团队使用的小项目变成如今正在被全世界成千上万的开发者和公司所使用。它诞生于Misko、Igor,以及整个项目团队之手,他们为改进我们的Web应用开发方式做出了不懈的努力。
项目□初是由两个人组成,现在已经成为网络上□大的一个开源社区,这个框架已经影响了全世界成千上万个项目,同时自身也成为其中的一部分。关于Angular的书有数十本,教程有数以百计,文章有数以千计,同时Angular的使用量和支持数量每天都在持续增长。
在Angular□□个版本时的一些重要超前概念(比如数据绑定、关注分离、依赖注入等),现在变成了新框架中的通用特性。
AngularJS生态系统的□大变化是新版Angular(□初称为Angular 2.0,现在就叫作Angular)。这是一个巨大的和不向后兼容的改变,几乎导致整个社区的分裂。但是,有了社区参与,以及一个开放、包容的团队,本来可能是灾难性的一幕变成了更加迫切地对Angular进行彻底的改造,从而使它开启了Web开发的新时代。
实际上,使Angular成为一个伟大的技术和框架正是在它身后的社区,即那些核心框架的贡献者,为它开发插件的人,以及每天都在使用它的人。
作为社区的一份子,我对本书的出版感到高兴,我也用自己的方式为社区做出了贡献。
本书的读者对象
本书是为准备学习Angular(2.0以上)的人准备的,无论是把它作为一个边沿项目,一个额外的工具,还是作为主要工作。在开始阅读本书之前,你应该熟悉和HTML,但只需具备基本的知识就足够了,不需要了解AngularJS1.0。
我们还会用到TypeScript,这是Angular推荐的开发语言,但初步了解一下就足以学习本书。
我们会一步一步的来,所以请放轻松,和我一起快乐地学习吧。
为什么写这本书
Angular作为一个框架成长很快,具有大量的功能和特性。它的社区非常庞大,并包含很多有用的内容。但是,帮助内容、教程和指南要么只关注特定的主题,要么是零散的,对刚起步的人来说不一定有用。
本书目的是提供一个Angular的step-by-step入门指南。每个概念都建立在前一个概念的基础之上,以富有逻辑的、有序的方式提供。由于有太多的多移动部件和一个活跃的社区,本书不打算涵盖每一个知识点,而是详细介绍核心构建块,让你自己去探索其他的部分。
当阅读完本书后,你应该熟悉Angular框架的主要内容,能够使用Angular开发自己的Web App并在你自己的项目中使用它。
如今的Web应用程序开发
的历史已经有很长时间了,它甚至是□广泛使用的编程语言之一。如今,Web开发人员很少需要担心浏览器兼容性的问题,这是出现jQuery框架的主要原因。
框架(比如Angular 和React)已经成为前端开发的常见选项,现在,很少有人会在
编写前端App时不使用任何框架。
使用框架的好处有很多,比如减少雷同的代码及为App开发提供相同的结构和布局等。使用框架的主要目的是减少花在cruft(长年累月积累下来的冗余代码)上的时间,并将注意力更多地集中在我们想要提供的主要功能上。而且,如果App要在不同的浏览器(以及在桌面操作系统之外的Android和iOS)上运行,那么框架就会显得尤其强□。 <□r />Angular(以及其他类似框架)通过位于框架内核的核心架构提供了如下功能,包括:
? 由声明式语法驱动的强大模板语法。
? 模块化和关注隔离。
? 数据绑定,并通过它进行数据驱动编程。
? 可测试,以及强大的测试支持。
? 路由及导航。
? 还有许多其他功能,从服务器端渲染到编写本地移动应用程序的能力等。
借助于Angular,我们可以专注于编写□□体验,同时以一种无缝的方式管理复杂性和可维护性。
本书主要内容
本书的目的是以step-by-step的方式引导开发人员学习Angular。在每章引入了新的概念之后,都会有一章来介绍如何对其进行单元测试。本书大致安排如下:
□□章,Angular概述,介绍了Angular及其背后的概念。它还包括了开始编写Angular App需要准备的内容。
第2章,你好!Angular,完整地介绍编写一个简单Angular App的步骤,从局部到整体。此外还介绍了Angular CLI。
第3章,使用Angular内置指令,深入介绍Angular基本内置指令(包括ngFor、ngIf等),什么时候使用以及如何使用它们。
第4章,理解和使用Angular组件,更详细地介绍Angular组件,各种创建选项,以及组件中可用的基本的生命周期钩子。
第5章,测试Angular 组件,介绍如何用Angular测试框架中的Karma和Jasmine对Angular组件进行单元测试。
第6章,使用模板驱动表单,介绍在Angular中创建和使用表单,特别是模板驱动表单。
第7章,使用响应式表单,介绍定义和使用表单的另一种方法,即如何创建和开发响应式表单。
第8章,Angular服务,介绍Angular服务,包括如何使用内置的Angular服务,以及如何定义和何时需要定义自己的Angular服务。
第9章,Angular与HTTP请求,介绍Angular的服务器通信,深入介绍HTTP请求,以及一些高级主题(如拦截器)等。
□□0章,对服务进行单元测试,回头再次讨论单元测试,但这次重点放在单元测试服务上。这包括测试简单的服务和更复杂的情况,比如异步流,以及进行HTTP调用的服务和组件。
□□1章,路由,深入讨论如何在一个Angular App中实现路由,并详细介绍Angular的路由模块,以及它的大部分特性。
□□2章,部署到生产,□后将所有的概念和内容组装在一起,介绍如何将开发出来的Angular App应用到生产环境中,以及与此相关的各种问题及技术。
所有代码放在GitHub上,如果你不想手敲代码,或者想看看□终的示例代码是什么样子,可以访问Git 库上的相关内容(https://github.com/shyamseshadri/angular-upand-running)。
本书中所有示例代码使用的都是AngularJS 5.0.0。
在线资源
对于任何一个AngularJS开发者,都可以使用以下资源进行学习,它们对于你来说都是触手可及的:
? 官方的Angular API文档(https://angular.io/api)。
? 官方的Angular快速入门指南(https://angular.io/guide/quickstart)。
? Angular Heroes教程App(https://angular.io/tutorial)。
目录
前言 1
□□章 Angular概述 9
为什么要用Angular 10
本书没有涉及的内容 10
创建开发环境 11
Nodejs 11
TypeScript 12
Angular CLI 12
下载代码库 13
小结 13
第2章 你好!Angular 14
创建你的□□个Angular项目 14
理解Angular CLI 15
运行应用程序 16
Angular应用程序的基本构成 18
根HTML——indexhtml 19
入口点——maints 19
主模块——appmodulets 20
根组件——AppComponent 21
创建组件23
创建组件的步骤 23
使用新组件 25
理解数据绑定 26
理解属性绑定 29
理解事件绑定 32
使用模型让代码更清晰 37
小结 39
练习 39
第3章 使用Angular内置指令 41
指令和组件 41
内置属性指令 42
NgClass 42
NgStyle 46
另一种class绑定和style绑定语法 47
内置结构化指令 48
NgIf 50
NgFor 51
NgSwitch 56
多分支的结构指令 57
小结 57
练习 58
第4章 理解和使用Angular组件 59
组件简介59
定义组件60
Selector 60
Template 61
Styles 62
样式封装 64
其他 65
组件和模块 67
输入和输出 68
输入 68
输出 70
变化感知 73
组件的生命周期 77
接口和函数 78
视图投影82
小结 85
练习 85
第5章 测试Angular组件 87
什么是单元测试? 87
测试和Angular 88
测试步骤89
Karma 配置 89
testts 90
编写单元测试 91
隔离单元测试 91
运行测试 93
编写Angular单元测试 95
测试组件交互 98
调试 101
小结 102
练习 102
第6章 使用模板驱动表单 104
模板驱动表单 104
创建表单 104
事件绑定和属性绑定——另一种ngModel 105
ngModel 108
一个完整的表单 110
控件的状态 115
控件的校验 118
使用表单组FormGroups 125
小结 127
练习 127
第7章 使用响应式表单 129
响应式表单 129
区别 130
使用响应式表单 130
表单控件 130
表单组 134
表单构建器 137
表单数据138
控件状态、有效性和错误 139
表单和数据模型 141
FormArray表单数组 145
小结 150
练习 151
第8章 Angular服务 153
什么是Angular服务? 153
创建自己的Angular服务 154
深入示例代码 154
依赖注入 164
Angular和依赖注入 165
RxJS和Observables:使用异步操作 172
小结 178
练习 179
第9章 Angular与HTTP请求 180
HttpClient概述 180
启动服务器 181
使用HttpClientModule 181
创建HTTP GET/POST请求 182
高级HTTP 188
选项——Header和参数 188
options参数——Observe和ResponseType 191
拦截器 196
Observable进阶 203
小结 210
练习 211
□□0章 对服务进行单元测试 213
如何对服务进行单元测试 213
测试有服务依赖的组件 217
用真实服务测试组件217
用模拟服务测试组件218
用假服务测试组件 220
异步单元测试 222
HTTP的单元测试 226
小结 231
练习 231
□□1章 路由 233
创建Angular路由 233
启动服务器 233
初始代码库 234
导入路由模块 234
显示路由内容 237
App的导航 238
通配符和默认值 240
常见路由需求 242
路由必要参数 242
在App中导航 244
路由可选参数 248
路由保护252
仅授权可用路由 252
防止卸载 255
用Resolver提前加载数据 258
小结 260
练习 260
□□2章 部署到生产 262
编译生产版本 262
生产构建 263
AOT编译和Build优化器 264
Base Href 265
部署Angular App 265
其他 266
缓存 266
API/服务器调用和CORS 268
区分不同环境 269
深度链接 269
懒加载 271
服务端渲染和SEO 277
小结 287