产品特色
编辑推荐
基于Angular 2,深入讲解基本概念的背后原理,以及众多优秀的设计模式和编程范式。
摆脱复杂配置,带你从无到有地搭建前端应用,讲解开门见山,语言风趣幽默
这不是一本介绍如何安装配置的书籍,而是带你立即进入Angular世界,从0到1开始搭建前端应用。作者用诙谐幽默的笔触描写了基本概念背后的原理,可快速搭建生产环境的应用。
内容简介
本书系统介绍Angular的基础知识与开发技巧,可帮助前端开发者快速入门。共有9章,第1章介绍Angular的基本概念,第2~7章从零开始搭建一个待办事项应用,然后逐步增加功能,如增加登录验证、将应用模块化、多用户版本的实现、使用第三方样式库、动态效果制作等。第8章介绍响应式编程的概念和Rx在Angular中的应用。第9章介绍在React中非常流行的Redux状态管理机制,这种机制的引入可以让代码和逻辑隔离得更好,在团队工作中强烈建议采用这种方案。本书不仅讲解Angular的基本概念和实践,而且分享了作者解决问题的过程和逻辑,讲解细腻,风趣幽默,适合有面向对象编程基础的读者阅读。
作者简介
王芃,资深开发人员、创业者,曾经在多家软件公司历任项目经理、项目总监、部门经理,后创立成都索课科技有限公司。在多年的开发经历中用Java等语言开发了多种类型的项目,积累了丰富的开发经验。乐于分享,发布大量技术文章。
精彩书评
如果你是Java程序员或C#程序员,那么这本书将是你跨界到前端领域的捷径!作者是一位热爱技术的资深Java程序员,由他来写这样一本书真是再合适不过了!
—— ThoughtWorker & Google开发技术专家 雪狼
前端技术的发展正在变得越来越快,Angular在中国的使用者也正在变得越来越多。作为前端开发者,我们正在迎来一个亘古未有的时代!这本书以一个小应用贯穿全部,从实战的角度覆盖了Angular的全部重要知识点,是一本非常不错的参考书。希望更多来自中国的技术专家能出来分享经验,带领大家一起前进。
—— Google Angular Developers PM 大漠穷秋
Angular 2.0的新特性包括:对于Native App的支持、服务器端渲染、更加专注移动应用开发、更加现代化,等等。本书根据作者真实的项目开发经验,引入大量开发案例进行讲解。同时讲述生动有趣,让枯燥的技术变得简单易学,是不可多得的优质Angular学习书籍。重要的是,本书将一步一步带领你掌握Angular 2.0的开发。
—— 海棠学院创始人CEO 张小河
目录
前 言
第1章 认识Angular 1
1.1 Angular 2简介 1
1.2 环境配置要求 2
1.3 第一个小应用 Hello Angular 3
1.4 第一个组件 6
1.5 一些基础概念 8
1.5.1 元数据和装饰器 8
1.5.2 模块 10
1.5.3 组件 12
1.6 引导过程 13
1.7 代码的使用和安装 14
第2章 用Form表单做一个登录控件 15
2.1 对于login组件的小改造 17
2.2 建立一个服务完成业务逻辑 21
2.3 双向数据绑定 26
2.4 表单数据的验证 28
2.5 验证结果的样式自定义 34
2.6 组件样式 36
2.7 小练习 37
第3章 建立一个待办事项应用 38
3.1 建立routing的步骤 38
3.1.1 路由插座 40
3.1.2 分离路由定义 41
3.2 让待办事项变得有意义 43
3.3 建立模拟Web服务和异步操作 47
3.3.1 构建数据模型 48
3.3.2 实现内存Web服务 49
3.3.3 内存服务器提供的Restful API 50
3.3.4 Angular 2内建的HTTP方法 52
3.3.5 JSONP和CORS 54
3.3.6 页面展现 54
3.4 小练习 58
第4章 进化!将应用模块化 59
4.1 一个复杂组件的分拆 59
4.1.1 输入和输出属性 62
4.1.2 CSS样式的一点小说明 70
4.1.3 控制视图的封装模式 72
4.2 封装成独立模块 72
4.3 更真实的Web服务 76
4.4 完善Todo应用 78
4.5 填坑,完成漏掉的功能 82
4.5.1 用路由参数传递数据 82
4.5.2 批量修改和批量删除 86
4.6 小练习 90
第5章 多用户版本应用 91
5.1 数据驱动开发 91
5.2 验证用户账户的流程 96
5.2.1 核心模块 97
5.2.2 路由守卫 98
5.3 路由模块化 105
5.4 路由的惰性加载——异步路由 106
5.5 子路由 108
5.6 用VSCode进行调试 112
5.7 小练习 116
第6章 使用第三方样式库及
模块优化 117
6.1 生产环境初体验 117
6.2 更新angular-cli的方法 120
6.3 第三方样式库 121
6.4 第三方JavaScript类库的集成方法 125
6.5 模块优化 132
6.6 多个不同组件间的通信 134
6.7 方便的管道 140
6.7.1 自定义一个管道 142
6.7.2 内建管道的种类 143
6.8 指令 145
6.9 小练习 148
第7章 给组件带来活力 149
7.1 更炫的登录页 149
7.1.1 响应式的CSS框架 149
7.1.2 寻找免费的图片源 153
7.2 自带动画技能的Angular 2 157
7.3 Angular 2动画再体验 159
7.3.1 state和transition 159
7.3.2 奇妙的animate函数 164
7.3.3 关键帧 166
7.4 完成遗失已久的注册功能 168
7.5 响应式表单 173
7.5.1 表单控件和表单组 176
7.5.2 表单提交 179
7.5.3 表单验证 179
7.5.4 表单构造器 181
7.5.5 Restful API的实验 182
7.6 Angular 2的组件生命周期 185
7.7 小练习 187
第8章 Rx——隐藏在Angular中的利剑 188
8.1 Rx再体验 190
8.2 常见操作 194
8.2.1 合并类操作符 195
8.2.2 创建类操作符 203
8.2.3 过滤类操作符 208
8.2.4 Subject 210
8.3 Angular 2中的内建支持 211
8.3.1 Async管道 214
8.3.2 Rx版本的Todo 216
8.4 小练习 223
第9章 用Redux管理Angular应用 224
9.1 什么是Redux 224
9.1.1 Store 225
9.1.2 Reducer 225
9.1.3 Action 226
9.2 为什么要在Angular中使用 227
9.3 如何使用Redux 231
9.3.1 简单内存版 231
9.3.2 时光机器调试器 239
9.3.3 带HTTP后台服务的版本 242
9.3.4 一点小思考 247
9.3.5 用户登录和注册的改造 248
9.4 小练习 256
9.5 小结 256
前言/序言
一个大叔码农的Angular 2创世纪
作为一个出生于20世纪70年代的大叔,我在软件这个领域已经摸爬滚打了16年,从程序员、项目经理、产品经理,项目总监,到部门管理等各个角色都体验过,深深地了解到这个行业发展的速度之快是其他行业无法比拟的:从编程语言、各种平台、各种框架、设计模式到各类开源工具、组件林林总总,要学习的东西实在太多,因为变化太快。
但万变不离其宗,名词变化虽多,透射的本质其实是趋同的:那就是程序员受不了代码的折磨,千方百计地想让这个工作更简单,更能应对变化。比如说,面向对象编程(Object-Oriented Programming)理念的提出其实是牺牲了部分性能换来代码层次结构的清晰,因此也催生了C++、Java、C#等一系列优秀的面向对象编程语言;后来程序员们发现在实际的编程逻辑中,往往不是像对象树那样可以划分得那么清楚。还有一些类似安全、日志等功能其实是撒在系统各个角落的,于是,面向切面的编程(Aspect-Oriented Programming)应运而生。再后来一部分科学家发现现有的编程语言做分析或数据计算实在太麻烦,明明要计算的逻辑很清晰,却要用一大堆的对象封装赋值,函数式编程(Functional Programming)便出现了。最近几年被产品经理逼疯的程序员认为强类型语言改动起来太慢太繁琐,于是动态脚本类语言大行其道。
仔细分析一下,这些语言不是互斥的,其实好的元素都是会被慢慢吸收到各自的语言、平台上面去的。比如C#、Java也采纳了函数式编程的一些特点,像Lamda表达式;再比如.NET和Java平台基础上也拥有动态脚本语言,像.NET平台上的IronRuby,Java平台上的Scala等。本书写的Angular 2就是在JavaScript这种脚本语言基础上引入了TypeScript,进而可以兼具面向对象编程和强类型语言的优点;引入了依赖性注入(Dependency Injection)这种在强类型语言中被证明非常有用的设计模式;通过引入Rx,让JavaScript拥有了函数式编程的能力。
写这本书的起因很偶然。我们团队以Android和iOS开发人员为主,前端开发人员只有一个。但在开发过程中我们体会到原生App的开发迭代速度比较慢,因此希望以前端开发快速迭代,逻辑和界面摸清楚后再进行App开发。我们决定走前端路线后,就开始挑选前端框架,React、Vue和Angular 2我们都尝试了,最终选择Angular 2是因为谷歌在Angular 2中把多年Android开发积累的优秀思想带入了Angular,使得Angular的开发模式太像App开发了。有App开发经验或者Java、.NET开发经验的人可以非常舒服地切入进去。有了选择,我就开始边学习边给开发小伙伴做培训,培训资料也就当成网文发表出来。没想到在网上得到很多网友的支持和鼓励,觉得我边学边写时对一些问题的思考过程和改进过程对大家的学习也很有帮助。而我也在与大家的互动和分享中纠正了对一些概念和模式的认识。互动和分享是最好的学习方式,这也是本书区别于其他“专门教程”的重要一点,我们是一起在学习,一起在思考的。特别感谢简书和掘金等平台的读者,帮我纠正了很多错误认识和笔误等。机械工业出版社的吴怡编辑也正是在网上看到我的文章后,鼓励我结集出书,给我提了很多中肯意见,最终才有此书,非常感谢。
本书分为9章,第1~7章中我们从无到有地搭建了一个待办事项应用,但是我们增加了一些需求:多用户和HTTP后台。这样待办事项这个应用就变得麻雀虽小五脏俱全。通过这样一个应用的开发,我们熟悉了大部分重要的Angular 2概念和实践操作。建议读者按顺序阅读和实践。阅读完第7章,基本可以在正式的开发工作中上手了。第8章介绍了响应式编程的概念和Rx在Angular中的应用,可以说,如果不使用Rx,Angular 2的威力就折半了,很多原来需要复杂逻辑处理的地方用Rx解决起来非常方便。由于Rx本身的学习曲线较陡,我们花了很大篇幅做细致的讲解。第9章是在第8章基础之上,引入了在React中非常流行的Redux状态管理机制,这种机制的引入可以让代码和逻辑隔离得更好,在团队工作中强烈建议采用这种方案。第8章和第9章由于学习门槛较高,有的读者可能暂时接受起来有困难,遇到这种情况可以先放下,等到使用Angular一段时间后再回头来看。
大家在阅读过程中可能会发现从第3章开始起,我们在不断地打磨待办事项这个应用的逻辑,持续地优化。我写这本书其实不仅是为了让大家入门Angular(类似的书太多了,不需要我再写一本),更多的是想把自己琢磨这些问题、解决这些问题的过程和逻辑与大家分享,把一些好的设计模式和思想介绍给大家,这些模式和思想远比一个框架更有生命力。
本书适合有面向对象编程基础的、掌握一门现代编程语言的读者阅读。如果有Java、C#、Objective-C等强类型语言背景,对于本书中介绍的Angular各种元数据修饰符接受程度会很高,对于TypeScript的类型等也会一点就透。如果有JavaScript背景,理解TypeScript语法是无障碍的,但强类型的约束和修饰符等概念需要仔细体会。如果使用过Spring Framework或者Dagger2等IoC框架,那么对依赖性注入的概念就再熟悉不过了。
建议学习的同时或之后可以比较一些其他主流前端框架,比如React或Vue,参照后你会发现很多功能其实异曲同工。在读本书的过程中如果发现有错误,希望你可以在书籍源码的Github地址上提问题,我们一起打造一本一直在生长的书。希望年轻的你和大叔的我一起学习,一起面对这个迅速成长的行业!
王芃
2017年2月11日
《Angular从零到一》—— 开启你的前端开发新纪元 在这个日新月异的数字时代,前端开发已成为构建现代互联网应用不可或缺的一环。而Angular,作为一款由Google倾力打造的强大、开源的JavaScript框架,凭借其出色的性能、丰富的特性和完善的生态系统,早已成为全球开发者心中的首选。本书《Angular从零到一》并非仅仅是另一个枯燥的技术教程,它是一份精心设计的学习路线图,旨在引领您从对Angular一无所知,到能够独立构建出复杂、高性能的Web应用程序。我们承诺,内容绝对原创,绝不掺杂任何无关信息,每一页都饱含着作者对Angular深刻的理解和实践经验。 为什么选择Angular? 在浩瀚的前端框架海洋中,Angular以其独特的优势脱颖而出: 模块化与组件化架构: Angular的核心在于其强大的模块化和组件化设计。这使得代码结构清晰、易于维护,并且能够实现高度的代码复用。您可以将复杂的UI拆解成独立的、可复用的组件,如同搭积木一般,高效地构建出功能丰富的界面。 TypeScript的强大支持: Angular原生支持TypeScript,一种强类型、面向对象的JavaScript超集。TypeScript带来了静态类型检查、类、接口等特性,极大地提高了代码的可读性、可维护性,并在开发早期就能捕捉到许多潜在的错误,从而显著提升开发效率和项目质量。 响应式编程范式: Angular深度融合了响应式编程的概念,尤其体现在其RxJS库的应用上。通过Observables,您可以以声明式的方式处理异步操作和事件流,编写出更简洁、更易于理解和测试的代码。 全面的开发工具链: Angular CLI(Command Line Interface)是Angular开发生态中的一把利器。它提供了项目初始化、组件生成、服务创建、单元测试、打包部署等一系列强大功能,极大地简化了开发流程,让开发者能够更专注于核心业务逻辑的实现。 企业级应用的首选: Angular的强大功能、模块化设计和严格的架构模式,使其成为构建大型、复杂、可伸缩的企业级Web应用的理想选择。许多大型企业和项目都选择Angular作为其前端技术栈。 活跃的社区与丰富的资源: 作为一个开源项目,Angular拥有一个庞大且活跃的全球开发者社区。这意味着您在学习和开发过程中遇到的问题,很大概率都能在社区中找到答案,并且有丰富的第三方库和工具可供选择。 《Angular从零到一》—— 您的专属学习伙伴 本书并非简单罗列API文档,而是为您构建一个由浅入深、循序渐进的学习体系。我们将从最基础的概念入手,逐步深入到Angular的各个核心特性,并通过大量的实际案例和代码示例,帮助您融会贯通。 第一部分:奠定坚实基础 在开始Angular的学习之前,理解前端开发的基本概念和必备知识至关重要。本书的第一部分将为您打下坚实的基础: HTML/CSS/JavaScript 基础回顾: 即使您已经有一定的前端基础,本书也会对这些核心技术进行重点回顾,特别是与现代前端开发相关的概念,例如ES6+的新特性,它们是理解和掌握Angular的关键。 TypeScript 入门: 作为Angular的“官方语言”,TypeScript的掌握程度直接影响到您学习Angular的效率。本部分将详细介绍TypeScript的基本语法、类型系统、类、接口、装饰器等核心概念,让您能够快速上手,并理解其在Angular中的重要作用。 Node.js 和 npm/yarn 基础: Angular的开发离不开Node.js环境和包管理器npm或yarn。我们将介绍它们的安装、基本使用,以及如何利用它们来管理项目依赖和运行开发服务器。 第二部分:Angular 核心概念解析 掌握了基础知识后,我们将正式进入Angular的世界,深入剖析其核心概念: Angular 项目结构与 CLI: 学习如何使用Angular CLI创建新项目,理解项目的文件结构、配置选项,并掌握CLI提供的常用命令,例如组件创建、服务生成、路由配置等,让您能够快速高效地启动和管理项目。 组件(Components): 组件是Angular应用的基本构建块。您将学习如何定义组件、理解组件的模板(Template)、样式(Style)和类(Class)之间的关系,掌握组件之间的通信方式(Input/Output),以及生命周期钩子(Lifecycle Hooks)的使用。 模板语法与数据绑定: Angular提供了强大而灵活的模板语法,允许您在HTML中嵌入动态数据和逻辑。我们将详细讲解插值(Interpolation)、属性绑定(Property Binding)、事件绑定(Event Binding)、双向数据绑定(Two-way Data Binding)等,并演示如何在模板中实现条件渲染和列表渲染。 指令(Directives): 指令是Angular中用于扩展HTML功能的强大工具。您将学习内置的结构指令(如`ngIf`、`ngFor`)和属性指令(如`[ngClass]`、`[ngStyle]`),以及如何创建自定义指令来满足特定的UI需求。 服务(Services)与依赖注入(Dependency Injection): 服务是用于封装业务逻辑、共享数据和功能的类。Angular的依赖注入机制则是一种非常高效的管理组件和服务之间关系的方式。本书将深入讲解如何创建服务、理解依赖注入的工作原理,以及如何在组件中注入和使用服务。 第三部分:构建复杂应用的关键技术 在掌握了Angular的核心概念后,我们将进一步探索构建复杂、交互性强的前端应用所需的关键技术: 路由(Routing): 对于单页面应用(SPA)而言,路由是实现页面导航的关键。我们将学习如何配置模块化路由,实现不同视图之间的切换,并掌握路由参数的传递、子路由、路由守卫(Route Guards)等高级特性,构建出结构清晰、导航流畅的应用。 表单处理(Forms): 前端应用离不开与用户的交互,表单是其中最常见的一种。本书将详细介绍Angular提供的两种表单处理方式:模板驱动表单(Template-driven Forms)和响应式表单(Reactive Forms)。您将学习如何创建、验证和提交表单,并处理用户输入。 HTTP通信与数据交互: 现代Web应用通常需要与后端服务器进行数据交互。我们将学习如何使用Angular的`HttpClient`模块发送HTTP请求(GET, POST, PUT, DELETE等),处理服务器响应,并结合Observables进行异步数据流的管理。 状态管理: 随着应用复杂度的增加,管理应用程序的状态变得越来越重要。本书将介绍Angular中常用的状态管理模式和库,如NgRx,帮助您有效地组织和管理应用中的数据状态,确保数据的一致性和可预测性。 模块化与懒加载: 为了优化应用的加载性能,Angular支持模块化和懒加载。您将学习如何组织代码到不同的模块中,并实现路由级别的懒加载,只在需要时加载相应的代码块,从而显著提升应用的启动速度。 第四部分:进阶与优化 当您已经能够独立构建Angular应用后,本书将带您进入进阶阶段,关注性能优化、测试和部署: 组件生命周期详解: 更深入地理解组件生命周期的各个阶段,并学会利用它们来优化组件的行为和性能。 性能优化策略: 探讨Angular应用性能优化的各种方法,包括变更检测策略(Change Detection Strategies)、按需加载、代码分割(Code Splitting)等,让您的应用运行得更快更流畅。 单元测试与端到端测试: 学习如何使用Angular CLI集成的测试工具(Karma, Protractor)为您的应用编写单元测试和端到端测试,确保代码的质量和稳定性。 Angular Material/UI 组件库: 介绍如何集成和使用流行的Angular UI组件库,如Angular Material,快速构建出美观、一致的用户界面。 项目部署: 学习如何将您的Angular应用打包并部署到各种服务器环境中。 本书的独特之处 实战导向: 本书并非纸上谈兵,每个概念的讲解都伴随着精心设计的代码示例和小型项目实践,让您在动手实践中巩固知识。 清晰的逻辑结构: 内容编排循序渐进,由浅入深,确保您能够轻松理解每一个知识点,并逐步建立起完整的Angular知识体系。 实用的技巧与最佳实践: 除了基础知识,本书还将分享大量在实际开发中积累的实用技巧和行业最佳实践,帮助您成为一名更优秀的Angular开发者。 无废话承诺: 本书的内容是精炼的,每一个字都旨在为您提供价值。我们承诺不包含任何冗余信息,让您的学习过程高效而充实。 《Angular从零到一》不仅仅是一本书,它是您踏入Angular开发领域,乃至整个现代前端开发世界的一扇大门。无论您是初学者,还是希望系统性地巩固和提升Angular技能的开发者,本书都将是您不可或缺的良师益友。现在,就让我们一起,从零开始,一步一个脚印,解锁Angular的无限可能!