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

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

自第一章讲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个步骤

安装开发工具

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

使用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)

本地集成环境

[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...）

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

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

组件也是指令，指令分为3种类型：组件，结构指令和属性指令。 组件是复杂指令，具有更丰富的生命周期（比如组件渲染之前，组件渲染成功） 创建组件类需要@Component, 创建指令需要@Directive
装饰器是用来装饰组件，类，函数甚至参数的行为。 装饰器工作时，需要传入一些配置信息，这些配置信息统称为metadata metadata实际上还包含整个应用的一些全局配置信息。
指令和服务独立开发，但指令需要调用服务时，通过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个模块分别为：

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

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

本次章节PPT
Angular模板简介 模板引擎是Web应用中用来生成动态HTML的一个途径， 负责将数据模型与HTML模板结合起来（即模板渲染），生成最终的HTML。 编写HTML模板的语法称为模板语法，模板语法的表达能力和可扩展性决定了模板引擎的易用性。本文将介绍在重构管理控制台中使用到的Angular的模板引擎ng-template。