Angular2.x与Angular1.x 的区别类似 Java 和 JavaScript 或者说是雷锋与雷峰塔的区别，所以在学习Angular2.x时大家需要做好重新学习一门语言的心里准备。

学习AngularJS2前，你需要具备：

1、有AngularJS 1.x使用经验的开发者
2、有其它前端框架使用经验的开发者（如jQuery、ExtJS、Adobe Flex、React、Vue等均可）
3、有后端编程经验（如Java、.NET、PHP等均可），希望学习前端技术的开发者

我们来看看Angular2的核心概念，了解这些，有助于我们理解一个Angular应用是怎么工作的，从而帮助我们更好的利用框架，开发出更高质量的应用。

Angular 2 应用程序应用主要由以下 8 个部分组成：

• 组件        

• 元数据    

• 模版      

• 数据绑定 

• 服务     

• 指令      

• 依赖注入 

• 模块         

组件是 Angular 框架最核心的组成，其他概念都是组件的延伸，都是为组件提供服务的。

1、组件拆分

应用程序中的页面可以拆分出多个组件，组件层层嵌套，自上而下会形成一颗组件树。

2、组件的通讯机制

组件之间有着一套完善的通讯机制，每个组件都可以定义自己的输入输出属性，这些属性称为组件的对外接口。

3、组件的生命周期

当 Angular 使用构造函数新建一个组件或指令后，就会按下面的顺序在特定时刻调用这些生命周期钩子方法，每个组件都有完成的生命周期钩子，这些钩子让我们清楚的知道组件的变化。

前边提到的都是组件的基本特性，是不是觉得很抽象，现在我们结合代码继续介绍。

4、组件示例

我们可以看到，组件分为两个部分：一个是装饰器，另一个是组件类，组件的业务逻辑都是在组件类中实现的。

5、组件渲染

程序运行时，元数据中的 selector 属性定义了一个 “app-root”，这是一个css3 选择器，它作为自定义标签来使用 <app-root></root>（Anuglar 遵循Web Component API ）。模版中的变量最后会替换成正确的值。如下：

6、组件树

多个组件会形成一颗组件树，它们之间的关系如下：

元数据就是在定义模块、组件、服务的时候，Decorator方法里面的参数内容，例如一个AppComponent的元数据，就是 @Component 里面的参数，如下：

在Angular2中，Decorator被大量使用，当我们定义模板、组件、服务、指令时，都是使用Decorator来定义。顾名思义，Decorator（装饰器）就是在一个类上面添加一些额外的属性或方法。

@Component 中的配置项说明：

组件的模版分为内联模版和外联模版。内联模版使用 template 字段，外联模版使用的是 templateUrl 字段，如下：

数据绑定使用常用的差值表达式双大括号 {{}}，数据绑定的语法中可以直接使用组件类中的成员变量。如下：

插值：在 HTML 标签中显示组件值。

<h3>

{{title}}

<img src="{{ImageUrl}}">

</h3>

属性绑定：把元素的属性设置为组件中属性的值。

<img [src]="userImageUrl">

事件绑定: 在组件方法名被点击时触发。

<button (click)="onSave()">保存</button>

双向绑：使用Angular里的NgModel指令可以更便捷的进行双向绑定。

<input [value]="currentUser.firstName"

(input)="currentUser.firstName=$event.target.value" >

服务是实现专一目的的逻辑单元，狭义的服务是一个明确定义了用途的类，它应该做一些具体的事，并做好。

Angular 把组件和服务区分开，以提高模块性和复用性。通过把组件中和视图有关的功能与其他类型的处理分离开，你可以让组件类更加精简、高效。Angular 会通过依赖注入来帮你更容易地将应用逻辑分解为服务，并让这些服务可用于各个组件中。

把一个类定义为服务，就要用 @Injectable() 装饰器来提供元数据，以便让 Angular 可以把它作为依赖注入到组件中。如日志服务：

Angular模板是动态的 。当 Angular 渲染它们时，它会根据指令对 DOM 进行修改。指令是一个带有"指令元数据"的类。在 TypeScript 中，要通过 @Directive 装饰器把元数据附加到类上。

在Angular中包含以下三种类型的指令：

<li *ngFor="let site of sites"></li>

<site-detail *ngIf="selectedSite"></site-detail>

*ngFor 告诉 Angular 为 sites 列表中的每个项生成一个 <li> 标签。

*ngIf 表示只有在选择的项存在时，才会包含 SiteDetail 组件。

从Angular1的版本开始，依赖注入就是一个很核心的概念，在版本2中，主要是用于管理service实例的注入。

在传统的开发模式中，调用者负责管理所有对象的依赖，循环依赖一直是梦魇，而在依赖注入模式中，这个管理权交给了注入器(Injector)，它在软件运行时负责依赖对象的替换，而不是在编译时。这种控制反转，运行注入的特点即是依赖注入的精华所在。

Angular 能通过查看构造函数的参数类型，来得知组件需要哪些服务。例如， SiteListComponent 组件的构造函数需要一个 SiteService：

constructor(private service: HeroService) { }

当 Angular 创建组件时，会首先为组件所需的服务找一个注入器（ Injector ）。

注入器是一个维护服务实例的容器，存放着以前创建的实例。如果容器中还没有所请求的服务实例，注入器就会创建一个服务实例，并且添加到容器中，然后把这个服务返回给 Angular 。

当所有的服务都被解析完并返回时， Angular 会以这些服务为参数去调用组件的构造函数。这就是依赖注入。

模块由一块代码组成，可用于执行一个简单的任务。Angular 应用是由模块化的，它有自己的模块系统：NgModules。每个Angular 应该至少要有一个模块(根模块)，一般可以命名为：AppModule。Angular 模块是一个带有 @NgModule 装饰器的类，它接收一个用来描述模块属性的元数据对象。

几个重要的属性如下：

一个最简单的根模块，eg：

import{NgModule}from'@angular/core';

import{BrowserModule}from'@angular/platform-browser'; 

@NgModule({imports: [BrowserModule], 

providers: [Logger], 

declarations: [AppComponent], 

exports: [AppComponent], 

bootstrap: [AppComponent]})exportclassAppModule{}

接下来通过引导根模块来启动应用，开发过程通常在 main.ts 文件中来引导 AppModule：

import{platformBrowserDynamic}from'@angular/platform-browser-dynamic';

import{AppModule}from'./app.module'; 

platformBrowserDynamic().bootstrapModule(AppModule);

为了描述这几个功能之间的关系，先看看下面这张图（图片摘自官网）：

这张图就比较清楚的说明了组件、服务、模板、Directive（指令）、数据绑定和依赖注入的相互关系。结合这张图和上面说的开发一个Angular2的应用的基本过程，这样就更容易理解了。

下面，我们来看一下Angular应用的工作流程：

1、我们定义一个根模块和一个根组件，然后在main.ts里面用这个根模块启动应用。

2、根据组件里面的一个html标签如果匹配了某一个组件的’selector’，这个组件就会被加载在这个标签里面。这样，整个应用就是一个组件树。

3、我们定义的Component信息，也就是类和Metadata(元数据)，Angular会根据这个组件定义将组件中定义的模板显示到selector对应的标签上，将样式应用到模板页面上。组件和模板之间又通过数据绑定联系起来，组件中的变量通过数据绑定展示到模板上，模板又通过事件绑定，对应到组件里的方法上。Directive的工作原理也跟上面类似。

4、最后，我们定义的service被Angular的Injector保存在一个树形结构的容器里，在某个组件中当我们需要使用这个service时，就可以在构造函数中直接获得这个service的实例，而不用手动创建。这样，多个组件，或者模块都可以共用一个service的实例。所以，service除了提供业务方法，也能提供共享数据、数据传输等功能。

了解了这些知识，并不能称为你真正的了解了Angular2高级开发。具体关于Angular2的实例及经验，还是要和大咖大漠穷秋学。他可以帮助大家扫平在开发过程中遇到的一些坑，举几个典型的例子：

诸如此类的坑还有不少，相信你也能踩过来，但是从节约时间的角度来看，跟着大咖的思路走一遍岂不是更快？