因为项目需要，开始接触Angular2框架。大家都说Angular2和Angular1.0差别特别大，Angular2弥补了Angular1.0没有面向对象的缺陷，我自己也是这么觉得的，虽然我并没有学过Angular1.0。所以今天问了浩哥一个问题，他一句话解决了我的疑惑。我问他Angular2和Angular1.0到底什么关系，它还算是JS框架吗？他的回答是Struts1和Struts2差别大吗？那Struts2算是Struts框架吗？瞬间解决了这么多天的疑惑。废话不多说，简单给自己总结一下，如果有什么内容是理解的不对的，还请大神指出，谢谢。

Angular2核心

        Angular2的核心包括六个方面，分别是组件、模板、指令、服务、依赖注入和路由，下面这张图是它们之间的关系，很经典：

                               

        由上图可以看到，用户直接交互的是模板，也就是视图页面，它并不是独立的成分，而是组成组价的要素之一。组件用来维护数据模型和功能逻辑，它包括模板和组件类。路由控制组价的创建和销毁，从而趋势界面跳转。指令与模板相互关联，它最重要的功能是，它增强了模板的功能，也是对模板的一种语法扩展。服务是与功能逻辑相关的单元，它通过依赖注入的方式引入到组件的内部，为组件类提供服务。

组件

        Angular框架基于组件设计，它最小的功能执行单元就是组件。组件类似于HTML页面抽出的公共元素，但并不仅限于这些。一个应用程序就是由这些大大小小的组件组成，它们之间会有一定的关系。直接采用Angular的命令创建的组件包括四个文件，HTML、CSS、Spec.ts、Component.ts。HTML和CSS文件展示模板视图的；Component.ts是组件类，做功能逻辑的处理的；Spec.ts是放测试代码的。

import { Component, OnInit } from '@angular/core';@Component({     //组件装饰器selector: 'app-preview-paper',   //别的组件使用该组件的标签名，也是该组件的唯一标识templateUrl: './preview-paper.component.html',   //模板对应的文件，也可以使用template标签，后面用反单引号括起来HTML代码，效果是一样的styleUrls: ['./preview-paper.component.css']     //CSS样式，修饰模板文件，可以引入多个css文件
}) 
export class PreviewPaperComponent implements OnInit {   //组件类的声明constructor() { }   //构造器ngOnInit() {   //该组件一初始化时要执行的内容}}

模板

        Angular2的模板是基于HTML的，普通的HTML文件或者代码都可以。上面代码显示的是一种引入模板的方式，也可以利用下面的模式引入：

import { Component, OnInit } from '@angular/core';@Component({selector: 'app-edit-paper',template: `<div>...</div>`,   //直接在template标签下写HTML代码，需要用反单引号引起来styleUrls: ['./edit-paper.component.css']
})
export class EditPaperComponent implements OnInit {constructor() { }ngOnInit() {}}

        Angular2的模板不仅如此，还有一套强大的语法体系。数据绑定是模板最基本的功能。数据绑定分为两种，分别是单向数据绑定和双向数据绑定。单向数据绑定包括属性绑定、事件绑定和插值。单向数据绑定和双向数据绑定指的是数据流向是单向还是双向的，单向和双向指的是模板和组件类之间。

指令

        指令和模板关系密切，指令可以与DOM进行灵活交互，它可以改变样式，也可以改变布局，即控制DOM元素的显示与否。一般指令分为两种：结构指令和属性指令。

        结构指令能够添加、修改或删除DOM，从而改变布局。例如：

<div *ngIf="isShow"></div>

当isShow为true时，该div会显示；当isShow为false时，该div会被移除。

        属性指令用来改变元素的外观或行为，使用起来跟普通的HTML元素属性非常相似，例如ngStyle和ngClass命令，用来动态控制样式，代码如下：

<div [ngClass]="divClass"></div>

这样就可以把divClass这个class对应的样式渲染到该div上面。

服务

        服务是封装单一功能的单元，类似于工具库，常被引用于组件内部，作为组件的功能扩展。服务的形式不限，可以是一个简单的字符串或者JSON数据，也可以是一个函数甚至是一个类。

import { Injectable } from '@angular/core';
import { Subject } from 'rxjs/Subject';
import 'rxjs/add/operator/toPromise';
import { Http, Headers, Response, RequestOptions , Jsonp } from '@angular/http';import {PaperMain} from '../model/paper-main';@Injectable()
export class ManagePapersService {public subject: Subject<PaperMain> = new Subject<PaperMain>();constructor(public http: Http) {}getPapers(): Promise<PaperMain[]> {return this.http.get('http://192.168.22.159:8080/singleTableMaintain/data1/paper/1/10/""').toPromise().then(response => response.json().rows as PaperMain[]).catch(this.handleError);}delPaper(id: number): Promise<any> {return this.http.post('http://localhost:8080/papers/delete/' + id, '').toPromise().catch(this.handleError);}searchPapers(search: string): Promise<PaperMain[]> {return this.http.get('http://localhost:8080/papers/search/name/' + search).toPromise().then(response => response.json().data as PaperMain[]).catch(this.handleError);}createPaper(): void {let params: string = ['name=测试试卷14','score=100','operator=fy'].join('&');this.http.post('http://192.168.21.27:8081/data/paper/add?' + params, '').toPromise().catch(this.handleError);}private handleError(error: any): Promise<any> {console.error('An error occurred', error); // for demo purposes onlyreturn Promise.reject(error.message || error);}
}

        如上面代码所示就是一个类级别的服务，它有@Injectable()的注解，表示它可以被注入。如果某些组件需要用到它，则会通过依赖注入的方式来引入。

依赖注入

        依赖注入是Angular2很重要的一部分，通过依赖注入的机制，服务等可以被引入到任何一个组件或者模块，或者其他服务中，而开发者无需关心服务的初始化，Angular2框架会帮忙做这件事，包括该模块本身依赖的其他模块。

路由

        路由控制了组件的发生和销毁，从而达到页面之间的跳转。它可以有指令形式，也可以通过配置。指令形式是指<router-outlet></router-outlet>，该标签的功能是根据当前的URL路径，匹配插入对应的组件节点，实现了页面的刷新。路由通过配置形式也可以实现，而且可以配置自路由，下面是简单的配置代码：

{path: '',component: ExamComponent,children: [{ path: '', redirectTo: 'managePapers/page/1', pathMatch: 'full'},   //path:' '，代表默认路由{ path: 'managePapers/page/:page', component: ManagePapersComponent },{ path: 'editPaper/id/:id', component: EditPaperComponent },{ path: 'onlineEditPaper', component: OnlineEditPaperComponent },{ path: 'previewPaper', component: PreviewPaperComponent }]}

总结

        以上就是Angular2的核心内容，不是很清楚和Angular1.0差别在哪里，但是能够感觉到，通过和Typescript，面向对象这方面确实改进很大。参考资料是《揭秘Angular2》，这本书比较简单易懂，很不错。如果有学习Angular2的童鞋，推荐这本书。