《Angular从零到一》导读

本节书摘来自华章出版社《Angular从零到一》一书中作者Richard Banfield 著

易艺 译

 

前  言

一个大叔码农的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地址(https://github.com/wpcfan/awesome-tutorials)上提问题,我们一起打造一本一直在生长的书。希望年轻的你和大叔的我一起学习,一起面对这个迅速成长的行业!

王芃

2017年2月11日

目  录

前 言

第1章 认识Angular  

1.1 Angular 2简介  

1.2 环境配置要求  

1.3 第一个小应用 Hello Angular  

1.4 第一个组件 

1.5 一些基础概念  

1.6 引导过程  

1.7 代码的使用和安装 

第2章 用Form表单做一个登录控件  

2.1 对于login组件的小改造 

2.2 建立一个服务完成业务逻辑  

2.3 双向数据绑定  

2.4 表单数据的验证 

2.5 验证结果的样式自定义  

2.6 组件样式  

2.7 小练习  

第3章 建立一个待办事项应用  

3.1 建立routing的步骤 

3.2 让待办事项变得有意义  

3.3 建立模拟Web服务和异步操作 

3.4 小练习 

第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

时间: 2024-09-15 16:31:12

《Angular从零到一》导读的相关文章

《深入理解Scala》——第1章,第1.2节当函数式编程遇见面向对象

1.2 当函数式编程遇见面向对象 深入理解Scala 函数式编程和面向对象编程是软件开发的两种不同途径.函数式编程并非什么新概念,在现代开发者的开发工具箱里也绝非是什么天外来客.我们将通过Java生态圈里的例子来展示这一点,主要来看Spring Application framework和Google Collections库.这两个库都在Java的面向对象基础上融合了函数式的概念,而如果我们把它们翻译成Scala,则会优雅得多.在深入之前,我们需要先理解面向对象编程和函数式编程这两个术语的含义

《深入理解Scala》——第1章,第1.4节与JVM的无缝集成

1.4 与JVM的无缝集成 深入理解Scala Scala的吸引力之一在于它与Java和JVM的无缝集成.Scala与Java有很强的兼容性,比如说Java类可以直接映射为Scala类.这种紧密联系使Java到Scala的迁移相当简单,但在使用Scala的一些高级特性时还是需要小心的,Scala有些高级特性是Java里没有的.在Scala语言设计时已经小心地考虑了与Java无缝交互的问题,用Java写的库,大部分可以直接照搬(as-is)到Scala里. 1.4.1 Scala调用Java 从S

《深入理解Scala》——第2章,第2.1节学习使用Scala交互模式(REPL)

第2章 核心规则深入理解Scala 本章包括的内容: • 使用Scala交互模式(Read Eval Print Loop 简称REPL) • 面向表达式编程 • 不变性(Immutability) • Option类 本章内容覆盖了每个新Scala开发者都需要知道的几个主题.本章不会深入到每个主题里,但是会讲到可以让你自己去接着探索的程度.你将学会使用REPL,学会如何利用这个工具做软件的快速原型开发.然后我们会学到面向表达式编程,并从另一个视角来看控制结构是怎么回事.在此基础上,我们来研究不

《深入理解Scala》——第1章,第1.3节静态类型和表达力

1.3 静态类型和表达力 深入理解Scala 开发人员中有一个误解,认为静态类型必然导致冗长的代码.之所以如此是因为很多继承自C的语言强制要求程序员必须在代码中多处明确地指定类型.随着软件开发技术和编译器理论的发展,情况已经改变.Scala利用了其中一些技术进步来减少样板(boilerplate)代码,保持代码简洁. Scala做了以下几个简单的设计决策,以提高代码表达力. • 把类型标注(type annotation)换到变量右边. • 类型推断. • 可扩展的语法. • 用户自定义的隐式转

《深入理解Scala》——第1章,第1.5节总结

1.5 总结 深入理解Scala 本章中,你学到了一些Scala的设计理念.设计Scala的初衷在于把不同语言中的多种概念融合起来.Scala融合了函数式和面向对象编程,尽管显然Java也已经这么做了.Scala精选其语法,极大地减少了语言中的繁冗之处,使一些强大的特性可以优雅地表达,比如类型推断.最后,Scala和Java能够紧密集成,而且运行在Java虚拟机上,这或许是让Scala变成一种实用选择的最重要的一点.几乎不花代价就可以把Scala用于我们的日常工作中. 因为Scala融合了多种概

《深入理解Scala》——第1章,第1.1节Scala一种混合式编程语言

第1章 Scala--一种混合式编程语言 Scala是一种将其他编程语言中的多种技巧融合为一的语言.Scala尝试跨越多种不同类型的语言,给开发者提供面向对象编程.函数式编程.富有表达力的语法.静态强类型和丰富的泛型等特性,而且全部架设于Java虚拟机之上.因此开发者使用Scala时可以继续使用原本熟悉的某种编程特性,但要发挥Scala的强大能力则需要结合使用这些有时候相互抵触的概念和特性,建立一种平衡的和谐.Scala对开发者的真正解放之处在于让开发者可以随意使用最适合手头上的问题的编程范式.

《深入理解Scala》——第2章,第2.2节优先采用面向表达式编程

2.2 优先采用面向表达式编程 深入理解Scala 面向表达式编程是个术语,意思是在代码中使用表达式而不用语句.表达式和语句的区别是什么?语句是可以执行的东西,表达式是可以求值的东西.在实践中这有什么意义呢?表达式返回值,语句执行代码,但是不返回值.本节我们将学习面向表达式编程的全部知识,并理解它对简化程序有什么帮助.我们也会看一下对象的可变性,以及可变性与面向表达式编程的关系. 作者注:语句VS表达式 语句是可以执行的东西,表达式是可以求值的东西. 表达式是运算结果为一个值的代码块.Scala

《深入理解Scala》——第2章,第2.3节优先选择不变性

2.3 优先选择不变性 深入理解Scala 编程中的不变性指对象一旦创建后就不再改变状态.这是函数式编程的基石之一,也是JVM上的面向对象编程的推荐实践之一.Scala也不例外,在设计上优先选择不变性,在很多场景中把不变性作为默认设置.对此,你可能一下子会不适应.本节中,我们将学到不变性对于判等问题和并发编程能提供什么帮助. Scala里首先要明白的是不变对象和不变引用(immutable referene)的区别.Scala里的所有变量都是指向对象的引用.把变量声明为val意味着它是个不变"引

《深入理解Scala》——第2章,第2.4节用None不用null

2.4 用None不用null深入理解Scala Scala在标准库里提供了scala.Option类,鼓励大家在一般编程时尽量不要使用null.Option可以视作一个容器,里面要么有东西,要么什么都没有.Option通过两个子类来实现此含义:Some和None.Some表示容器里有且仅有一个东西,None表示空容器,有点类似List的Nil的含义. 在Java和其他允许null的语言里,null经常作为一个占位符用于返回值,表示非致命的错误,或者表示一个变量未被初始化.Scala里,你可以用

《深入理解Scala》——第2章,第2.5节多态场景下的判等

2.5 多态场景下的判等 深入理解Scala 众所周知,为多态的面向对象系统定义合适的判等和散列方法是个特别难的过程.这是因为子类可能在整个过程中造成一些相当怪异的问题,尤其是当类型层次上有多个实体(concrete)级别的时候.一般来说,对于需要比引用判等更强的判等(译者注:比如需要判断对象内部数据)的类,最好避免多层实体类层次.这是什么意思呢?有些时候类只需要引用判等就够了.也就是说只要两个对象不是同一个实例就判为不等.但是如果我们需要判断两个不同实例是否相等,而且又有多层实体类层次(mul