Angular 初学者快速上手教程

• 2-3 模板
• 2-4 组件间通讯
• 2-5 生命周期钩子
• 2-6 动效
• 2-7 动态组件
• 2-8 ShadowDOM
• 2-9 内容投影
• 2-10 @ContentChild@ContentChildren
• 2-11 @ViewChild 与 @ViewChildren
• 2-12 与 Polymer 封装组件的方式简单对比
• 2-13 封装并发布你自己的组件库
• 3-1 指令简介
• 3-2 自定义指令
• 3-3 直接在组件里面操作 DOM
• 4 模块 @NgModule
• 5-1 路由概述
• 5-2 路由基本用法
• 5-3 模块预加载
• 5-4 路由守卫
• 5-5 多重出口
• 6-1 表单快速上手
• 6-2 双向数据绑定
• 6-3 表单校验
• 6-4 模型驱动型表单
• 6-5 动态表单
• 7 服务
• 8 RxJS 快速上手教程
• 9 国际化
• 10 自动化测试
• 11 参考资源

本系列课程对应的所有示例项目列表：

1. https://gitee.com/mumu-osc/learn-component
2. https://gitee.com/mumu-osc/learn-directive
3. https://gitee.com/mumu-osc/learn-router
4. https://gitee.com/mumu-osc/learn-module
5. https://gitee.com/mumu-osc/learn-form
6. https://gitee.com/mumu-osc/learn-service
7. https://gitee.com/mumu-osc/learn-test
8. https://gitee.com/mumu-osc/learn-webpack
9. https://github.com/damoqiongqiu/angular-seo

最后是那一句套话：水平有限，错漏难免，欢迎指正。可以在我的读者圈里跟我沟通交流。

第1课：搭建开发环境

NodeJS

2009年，NodeJS 发布了第一个版本，标志着前端开发正式告别了刀耕火种的原始状态，开始进入工业化时代。

在 NodeJS 出现之前，前端开发领域有很多事情我们是做不到的，例如：

• JS 代码的合并、压缩、混淆。
• CSS 预处理。
• 前端自动化测试。

而这一切在 NodeJS 出现之后都得到了很好的解决：

• 对 JS 代码的预处理经历了 Grunt、Gulp 的短暂辉煌之后，终于在 webpack 这里形成了事实标准的局面。
• CSS 的预处理也从 LESS 发展到了 SASS。
• 自动化测试一直是前端开发中的一个巨大痛点，由于前端在运行时严重依赖浏览器环境，导致我们一直无法像测试后端代码那样可以去编写测试用例。在有了 NodeJS 之后，我们终于有了 Karma+Jasmine 这样的单元测试组合，也有了基于 WebDriverJS 这样的可以和浏览器进行通讯的集成测试神器。

就前端开发目前整体的状态来说，无论你使用什么框架，NodeJS、webpack、SASS、Karma+Jasmine、WebDriverJS 这个组合是无论如何绕不过去的。

@angular/cli

在开发 Angular 应用的时候，当然也离不开大量基于 NodeJS 的工具，我们需要 TypeScript compiler、webpack、Karma、Jasmine、Protracter 等模块。

有相关经验的开发者都知道，自己从头开始去搭建一套基于 webpack 的开发环境是一件非常麻烦的事情。很多初学者在搭建环境这一步上面消耗了过多的精力，导致学习热情受到了沉重的打击。

当团队规模比较大的时候，在每个人的机器上配置环境需要消耗大量的时间。有一些团队为了避开这个坑，利用 Docker 来做开发环境的同步和版本升级，看起来也是一个非常不错的方案。

Angular 项目组从一开始就注意到了这个问题，所以有了 @angular/cli 这个神器，它的底层基于 webpack，集成了以上提到的所有 NodeJS 组件。你只要装好 @angular/cli 就够了，而不需要自己从头一步一步安装那些 NodeJS 插件。

当然，在安装 @angular/cli 之前你需要先把 NodeJS 安装好，请到官方网站下载安装包： https://nodejs.org/ ，安装过程和普通软件没有区别。装好 NodeJS 之后就可以安装 @angular/cli 了，由于 npm 会自动访问海外的服务器，所以强烈推荐使用 cnpm 进行安装：

npm i -g cnpm --registry=https://registry.npm.taobao.orgcnpm i -g @angular/cli

cnpm 是淘宝发布的一款工具，会自动把 npm 上面的所有包定时同步到国内的服务器上来，cnpm 本身也是一款 NodeJS 模块。

@angular/cli 安装成功之后你的终端里面将会多出一个名叫 ng 的命令，敲下 ng，将会显示完整的帮助文档：

创建第一个项目

我们来创建第一个入门项目 HelloAngular，请在你的终端里面运行：

ng new HelloAngular

@angular/cli 将会自动帮你把目录结构创建好，并且会自动生成一些模板化的文件，就像这样：

请特别注意：@angular/cli 在自动生成好项目骨架之后，会立即自动使用 npm 来安装所依赖的 Node 模块，所以这里我们要 Ct