《Angular从零到一》内容简介

作为一个出生于20世纪70年代的大叔，我在软件这个领域已经摸爬滚打了16年，从程序员、项目经理、产品经理，项目总监，到部门管理等各个角色都体验过，深深地了解到这个行业发展的速度之快是其他行业无法比拟的：从编程语言、各种平台、各种框架、设计模式到各类开源工具、组件林林总总，要学习的东西实在太多，因为变化太快。
本书分为9章，第1～7章中我们从无到有地搭建了一个待办事项应用，但是我们增加了一些需求：多用户和HTTP后台。这样待办事项这个应用就变得麻雀虽小五脏俱全。通过这样一个应用的开发，我们熟悉了大部分重要的Angular 2概念和实践操作。建议读者按顺序阅读和实践。

作品目录

前言
第1章：认识Angular
1.1、Angular
2简介
1.2、环境配置要求
1.3、第一个小应用Hello
Angular
1.4、第一个组件
1.5、一些基础概念
1.5.1、元数据和装饰器
1.5.2、模块
1.5.3、组件
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.1.1、路由插座
3.1.2、分离路由定义
3.2、让待办事项变得有意义
隔离业务逻辑
3.3、建立模拟Web服务和异步操作
3.3.1、构建数据模型
3.3.2、实现内存Web服务
3.3.3、内存服务器提供的Restful
API
3.3.4、Angular
2内建的HTTP方法
3.3.5、JSONP和CORS
3.3.6、页面展现
3.4、小练习
第4章：进化！将应用模块化
4.1、一个复杂组件的分拆
4.1.1、输入和输出属性
4.1.2、CSS样式的一点小说明
4.1.3、控制视图的封装模式
4.2、封装成独立模块
4.3、更真实的Web服务
4.4、完善Todo应用
4.5、填坑，完成漏掉的功能
4.5.1、用路由参数传递数据
4.5.2、批量修改和批量删除
4.6、小练习
第5章：多用户版本应用
5.1、数据驱动开发
5.2、验证用户账户的流程
5.2.1、核心模块
5.2.2、路由守卫
5.3、路由模块化
5.4、路由的惰性加载——异步路由
5.5、子路由
5.6、用VSCode进行调试
5.7、小练习
第6章：使用第三方样式库及模块优化
6.1、生产环境初体验
6.2、更新angular-cli的方法
6.3、第三方样式库
6.4、第三方JavaScript类库的集成方法
6.5、模块优化
关于模块的最佳实践
6.6、多个不同组件间的通信
6.7、方便的管道
6.7.1、自定义一个管道
6.7.2、内建管道的种类
6.8、指令
6.9、小练习
第7章：给组件带来活力
7.1、更炫的登录页
7.1.1、响应式的CSS框架
7.1.2、寻找免费的图片源
7.2、自带动画技能的Angular
2、7.3、Angular
2动画再体验
7.3.1、state和transition
7.3.2、奇妙的animate函数
7.3.3、关键帧
7.4、完成遗失已久的注册功能
7.5、响应式表单
7.5.1、表单控件和表单组
7.5.2、表单提交
7.5.3、表单验证
7.5.4、表单构造器
7.5.5、Restful
API的实验
7.6、Angular
2的组件生命周期
7.7、小练习
第8章：Rx——隐藏在Angular中的利剑
8.1、Rx再体验
8.2、常见操作
8.2.1、合并类操作符
8.2.2、创建类操作符
8.2.3、过滤类操作符
8.2.4、Subject
8.3、Angular
2中的内建支持
8.3.1、Async管道
8.3.2、Rx版本的Todo
8.4、小练习
第9章：用Redux管理Angular应用
9.1、什么是Redux
9.1.1、Store
9.1.2、Reducer
9.1.3、Action
9.2、为什么要在Angular中使用
9.3、如何使用Redux
9.3.1、简单内存版
9.3.2、时光机器调试器
9.3.3、带HTTP后台服务的版本
9.3.4、一点小思考
9.3.5、用户登录和注册的改造
9.4、小练习
9.5、小结

热门书摘

那就是以@这个符号定义一个对象表示后面的数据是一个元数据，这个元数据一般修饰紧挨着它的那个对象或变量。

ng new hello-angular

拥有的组件

构造函数

牢记子组件的模板是描述子组件自己长成什么样子，应该有哪些行为，这些东西和父组件没有任何关系。比如todo-header.component.html中的placeholder就是HTML标签Input中的一个属性，和父组件没有关联，如果我们不在todo-header.component.ts中声明@Input()placeholder，那么子组件就没有这个属性，在父组件中也无法设置这个属性。

通过标记set todos()为@Input我们可以监视父组件的数据变化。也就是说如果只定义一个输入型属性的话，那么这个属性是“只写”的，如果要检测父组件所设置值的变化，我们需要读，所以要提供读和写两个方法。

当然，还是一样，我们需要改造一下OneComponent的模板以便于它可以显示子路由的内容。改动src/app/playground/one/one.component.html为如下内容。

cli，在命令行中键入npm uninstall–g angular-cli。卸载完成后清理缓存，键入npm cache clean，这个时间会比较长，请耐心等待其完成。完成后再次安装angular-cli，使用npm install-g angular-cli@latest。

同样，对于核心特性模块，官方的建议是：

canActivate是用于是否可以进入某个url，而canLoad是决定是否加载某个url对应的模块。

那么自己写一个管道是怎样的体验呢？创建一个管道非常简单，我们来体会一下。首先创建一个src/app/playground/trim-space.pipe.ts的文件：

由于我们要监视其宿主的click事件，所以我们引入了HostListener，在onClick方法上用@HostListen（'click'），表明在检测到宿主发生click事件时调用这个方法。代码如下所示：

所示