因为项目需要，开始接触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() {
  }

}

指令

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

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

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

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

<div [ngClass]="divClass"></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);
  }
}

依赖注入

依赖注入是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的童鞋，推荐这本书。

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!