二、Angular 2.0开发指南以及搭建开发环境

自第一章讲Angular2.0的简单开发入门，我们了解到ng2的开发实践是围绕着web-component来展开的，ng2中更加强化了Component的概念，弱化了指令的概念（实际上Component是复杂指令）。同时我们学习到web-component中数据和视图是如何互相影响的，即Input和Output的概念，数据通过Input往view以及view里的子组件传递，view及其子组件通过Ouput来改变数据（VM通过数据绑定机制实现互通，View <- data-bindings -> Model)。

简单回顾上周分享（猛击此处）内容后，是否有跃跃欲试的冲动。这章带你快速搭建前端开发环境以及指导你如何学习ng2和解决开发过程中遇到的问题。

搭建开发环境

前端一直以来都是发展迅速，前端构建，前端开发IDE，前端应用型框架也更加完善和规范等。但是线上相关产品也是层出无穷，我们如何选择前端的开发工具呢。这里我们推荐的Webpack + Angular2 + vscode/webstrom集成开发，其中好处不在此敷述，所以这章会教大家搭建好这套集成开发环境。

实际上我们提供了一个ng2开发样板库webapp，在readme.md中有详细说明如何安装前端环境。环境搭建好后，按照脚本说明启动本地服务，即可访问到webapp提供的Demo示例。

搭建环境简单总结为3个步骤

1. 安装开发工具

   [sublime text](https://www.sublimetext.com/3)、 [vscode](https://code.visualstudio.com/) 和[webstorm](https://www.jetbrains.com/webstorm/) 3选一

2. 使用nvm管理nodeJS版本

     [brew](http://brew.sh/index_zh-cn.html) -> [nvm](http://www.atatech.org/articles/23346) -> [nodeJS@v6.2.0](http://nodejs.cn/doc/node/) -> [tnpm](http://npm.alibaba-inc.com/profile)

3. 本地集成环境

   [naza-server@2.0.0-alpha](http://gitlab.alibaba-inc.com/aliyun_FED/webapp) -> [quick start](http://gitlab.alibaba-inc.com/aliyun_FED/webapp/blob/master/README.md)
   

Angular2.0开发指南

ng2官网文档的开发者指南有做详细介绍，但对于新手来说，可能对于ng2中的一些概念和特性还比较陌生，所有这里会从我个人学习ng2的经验来理解ng2的一些简单概念和开发思路。

ng2开发应用的步骤归纳

bootstrap -> app -> components -> services -> utils（http, pipes, etc...）

1. bootstrap初始化应用，指定参数一般是app，通过bootstrap，app组件开始应用到页面中，展现我们想要看到的效果。
2. app，我们这里假设应用就是一个大组件，app就是这个大组件，在这个大组件里，我们把页面分隔为很多个小组件，每个组件实现页面的具体的一部分功能，所有功能构成一个整体。
3. components多个小组件，开发思路和app，即可以有自己的子组件，可以一直嵌套下去。
4. services服务，实际上是封装好的代码逻辑，可以是数据，函数，类等，组件中注入service可以使用到提供的封装逻辑。
5. utils工具类，是services封装逻辑是需要用到的工具类，比如ajax请求需要用到http类等。

ng2开发过程的代码实现

我们更关心在ng2开发过程中，components如何嵌入多个子组件和服务，其中decorator和metadata概念如何理解。看官网提供的的关系图：

1. Components vs Directives
   组件和指令的同异点

   • 组件也是指令，指令分为3种类型：组件，结构指令和属性指令。
   • 组件是复杂指令，具有更丰富的生命周期（比如组件渲染之前，组件渲染成功）
   • 创建组件类需要@Component, 创建指令需要@Directive

2. Decorators和metadata的关系

   • 装饰器是用来装饰组件，类，函数甚至参数的行为。
   • 装饰器工作时，需要传入一些配置信息，这些配置信息统称为metadata
   • metadata实际上还包含整个应用的一些全局配置信息。

3. Directives 和 services的关系

   • 指令和服务独立开发，但指令需要调用服务时，通过metadata的providers声明后方可使用。（提示：指令定义需要@Component或者@Directive来装饰，这里说的metadata就是这2个装饰器的配置信息）
   • 指令中使用服务时，需要在指令类的constructor的参数中声明使用的服务，指令在工作时，ng2内部会自动注入服务的实例到constructor中。
   • 父指令声明了服务，在子指令可以不用声明也可以使用。
   • 这里说的指令涵盖组件和指令

在了解ng2编码的同时，我们会发现ng2把框架提供的功能全分散到各个模块中，比如@Component需要通过import { Component } from '@angular/core'来获取到，而ngFor指令需要import { NgFor } from '@angular/common'。具体那些功能在于哪些模块，貌似只能通过官方提供的API（猛击此处)来查找了，但是我们通过给模块做个分类，更加方便我们查找相关的API

ng2模块分类

先上图

最重要的4个模块基本能解决新手开发的需要，4个模块分别为：

1. @angular/core，所有组件、指令、服务等定义类时需要的装饰器，都可以通过 @angular/core 找到
2. @angular/common, 所有ng2提供的指令、服务和过滤管道pipes（主要做转换，比如货币转换，json转字符串等），通过 @angular/common 可以找到。
3. @angular/http，所有ajax请求相关的API在此
4. @angular/platform-browser-dynamic, 实际上我们只用到bootstrap，但也是基本应用初始化必须使用的。

OK，更多的内容，还需要各位在学习的过程中慢慢体会和理解其原理，ppt比较简陋，确是这段时间个人学习ng2的一个心得，细细品味，相信你会有更多的收获。：）

本次章节PPT