Angular2-核心内容介绍

        因为项目需要，开始接触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 only    return 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的童鞋，推荐这本书。