1、简介

Angular 是一个应用设计框架与开发平台，旨在创建高效而精致的单页面应用。

Angular 是一个基于TypeScript

构建的开发平台。它包括：

一个基于组件的框架，用于构建可伸缩的 Web 应用
一组完美集成的库，涵盖各种功能，包括路由、表单管理、客户端-服务器通信等
一套开发工具，可帮助你开发、构建、测试和更新代码

借助 Angular，无论单人项目还是企业级应用，你都能获得平台带来的优势。Angular 的设计目标之一就是让更新更容易，因此你可以用最小的成本升级到最新的 Angular 版本。最重要的是，Angular 的生态系统由包括 170 万名开发人员、库作者和内容创作者在内的多元团队构成。

2、特点

2.1 横跨多种平台

学会用 Angular 构建应用，然后把这些代码和能力复用在多种多种不同平台的应用上 —— Web、移动 Web、移动应用、原生应用和桌面原生应用。

2.2 速度与性能

通过 Web Worker 和服务端渲染，达到在如今(以及未来）的 Web 平台上所能达到的最高速度。

Angular 让你有效掌控可伸缩性。

基于 RxJS、Immutable.js 和其它推送模型，能适应海量数据需求。

2.3 美妙的工具

使用简单的声明式模板，快速实现各种特性。使用自定义组件和大量现有组件，扩展模板语言。在几乎所有的 IDE 中获得针对 Angular 的即时帮助和反馈。所有这一切，都是为了帮助你编写漂亮的应用，而不是绞尽脑汁的让代码“能用”。

3、Angular 应用：知识要点

3.1 组件

组件是构成应用的模块。组件包括三个部分：带有 @Component() 装饰器的 TypeScript 类、HTML 模板和样式文件。@Component() 装饰器会指定如下 Angular 专属信息：

一个 CSS 选择器，用于定义如何在模板中使用组件。模板中与此选择器匹配的 HTML 元素将成为该组件的实例。
一个 HTML 模板，用于指示 Angular 如何渲染此组件
一组可选的 CSS 样式，用于定义模板中 HTML 元素的外观

下面是一个最小化的 Angular 组件。

1. import { Component } from '@angular/core';
2. 
3. @Component({
4. selector: 'hello-world',
5. template: `
6.     <h2>Hello World</h2>
7.     <p>This is my first component!</p>
8.   `
9. })
10. export class HelloWorldComponent {
11. // 组件相关属性、方法等。
12. }

要使用此组件，请在模板中编写以下内容：

<hello-world></hello-world>

当 Angular 渲染此组件时，生成的 DOM 如下所示：

1. <hello-world>
2. <h2>Hello World</h2>
3. <p>This is my first component!</p>
4. </hello-world>

Angular 的组件模型提供了强大的封装能力和直观的应用结构。组件还能让你的应用更容易进行单元测试，并可以提高代码的整体可读性。

3.2 模板

每个组件都有一个 HTML 模板，用于声明该组件的渲染方式。你可以内联它或用文件路径定义此模板。

Angular 添加了一些语法元素以扩展 HTML，让你可以从组件中插入动态值。当组件的状态更改时，Angular 会自动更新已渲染的 DOM。此功能的应用之一是插入动态文本，如下例子所示。

<p>{{ message }}</p>

这里 message 的值来自组件类：

1. import { Component } from '@angular/core';
2. 
3. @Component ({
4. selector: 'hello-world-interpolation',
5. templateUrl: './hello-world-interpolation.component.html'
6. })
7. export class HelloWorldInterpolationComponent {
8.     message = 'Hello, World!';
9. }

当应用加载组件及其模板时，用户将看到以下内容：

<p>Hello, World!</p>

注意这里所用的双花括号 —— 它们指示 Angular 对其中的内容进行插值。

Angular 还支持属性绑定，以帮助你设置 HTML 元素的 Property 和 Attribute 的值，并将这些值传给应用的展示逻辑。

1. <p
2.   [id]="sayHelloId"
3.   [style.color]="fontColor">
4.   You can set my color in the component!
5. </p>

注意这里所用的方括号 —— 该语法表明你正在将 Property 或 Attribute 绑定到组件类中的值。

可以声明事件监听器来监听并响应用户的操作，比如按键、鼠标移动、单击和触摸等。你可以通过在圆括号中指定事件名称来声明一个事件监听器：

1. <button
2. type="button"
3.   [disabled]="canClick"
4.   (click)="sayMessage()">
5.   Trigger alert message
6. </button>

前面的例子中调用了一个方法，该方法是在组件类中定义的：

1. sayMessage() {
2. alert(this.message);
3. }

以下是在 Angular 模板中插值和绑定的例子：

1. import { Component } from '@angular/core';
2. 
3. @Component ({
4. selector: 'hello-world-bindings',
5. templateUrl: './hello-world-bindings.component.html'
6. })
7. export class HelloWorldBindingsComponent {
8.   fontColor = 'blue';
9.   sayHelloId = 1;
10.   canClick = false;
11.   message = 'Hello, World';
12. 
13. sayMessage() {
14. alert(this.message);
15.   }
16. }

1. <button
2. type="button"
3.   [disabled]="canClick"
4.   (click)="sayMessage()">
5.   Trigger alert message
6. </button>
7. 
8. <p
9.   [id]="sayHelloId"
10.   [style.color]="fontColor">
11.   You can set my color in the component!
12. </p>
13. 
14. <p>My color is {{ fontColor }}</p>

可以用指令来为模板添加额外功能。Angular 中最常用的指令是 *ngIf 和 *ngFor。你可以使用指令执行各种任务，比如动态修改 DOM 结构。你还可以用自定义指令来创建出色的用户体验。

以下代码是 *ngIf 指令的例子。

1. import { Component } from '@angular/core';
2. 
3. @Component({
4. selector: 'hello-world-ngif',
5. templateUrl: './hello-world-ngif.component.html'
6. })
7. export class HelloWorldNgIfComponent {
8.   message = "I'm read only!";
9.   canEdit = false;
10. 
11. onEditClick() {
12. this.canEdit = !this.canEdit;
13. if (this.canEdit) {
14. this.message = 'You can edit me!';
15.     } else {
16. this.message = "I'm read only!";
17.     }
18.   }
19. }

1. <h2>Hello World: ngIf!</h2>
2. 
3. <button type="button" (click)="onEditClick()">Make text editable!</button>
4. 
5. <div *ngIf="canEdit; else noEdit">
6. <p>You can edit the following paragraph.</p>
7. </div>
8. 
9. <ng-template #noEdit>
10. <p>The following paragraph is read only. Try clicking the button!</p>
11. </ng-template>
12. 
13. <p [contentEditable]="canEdit">{{ message }}</p>

Angular 的声明式模板使让可以将应用的逻辑和外观完全分开。模板基于标准 HTML，因此易于构建、维护和更新。

3.3 依赖注入

依赖注入让你可以声明 TypeScript 类的依赖项，而无需操心如何实例化它们，Angular 会为你处理这些琐事。这种设计模式能让你写出更加可测试、也更灵活的代码。尽管了解依赖注入对于开始用 Angular 并不是至关重要的事，但我们还是强烈建议你将其作为最佳实践，并且 Angular 自身的方方面面都在一定程度上利用了它。

为了说明依赖注入的工作原理，请考虑以下例子。第一个文件 logger.service.ts 中定义了一个 Logger 类。它包含一个 writeCount 函数，该函数将一个数字记录到控制台。

1. import { Injectable } from '@angular/core';
2. 
3. @Injectable({providedIn: 'root'})
4. export class Logger {
5. writeCount(count: number) {
6. console.warn(count);
7.   }
8. }

接下来，hello-world-di.component.ts 文件中定义了一个 Angular 组件。该组件包含一个按钮，它会使用此 Logger 类的 writeCount 函数。要访问此功能，可通过向构造函数中添加 private logger: Logger 来把 Logger 服务注入到 HelloWorldDI 类中。

1. import { Component } from '@angular/core';
2. import { Logger } from '../logger.service';
3. 
4. @Component({
5. selector: 'hello-world-di',
6. templateUrl: './hello-world-di.component.html'
7. })
8. export class HelloWorldDependencyInjectionComponent  {
9.   count = 0;
10. 
11. constructor(private logger: Logger) { }
12. 
13. onLogMe() {
14. this.logger.writeCount(this.count);
15. this.count++;
16.   }
17. }

4、与其他框架的对比

通过上面的一个基本示例，我们可以看出Angular 与当下流行其他的框架（Vue,React）一些差别，当然对比这些框架每个人观点都不一样，都有各自的自己的喜好，所有在实际项目开发过程中选择适合的才是最好的。以下是我自己使用这几个框架的一些感受。

首先，说下Angular 框架，Angular 框架有点像java开发中的框架，例如，之前进行企业级开发的SSH，框架整体上是比较成熟的，性能，稳定性，安全性方面都做的比较好，项目中的一些实现也尽可能的参考现有标准来进行实现。项目的生态，社区也比较大，项目中有整个一套的解决方案，Angular框架的背后是谷歌，整体各方面感受还是不错，一般金融机构，银行之类的前端大多会选择Angular框架，缺点就是相对于Vue,React来说上手难度要高一下，主要是Angular框架的一些理念都来自后端，比如依赖注入之类。

其次，说下Vue框架，Vue 是一个开源的 Model-View-View-Model (MVVM) 前端 JavaScript 库。它被称为渐进式框架，Vue框架上手难度是这几个框架中难度最小的一个，一般在小公司，或者一些小型项目中优先选择的是Vue框架。Vue框架类似于是HTML包裹着相关的一些逻辑代码的实现，缺点是写起来受限于模块，不够灵活，优点是快捷，方便，上手非常快。

最后，说下React框架，React框架主要一个UI库，不像Angular那样提供一整套对应的解决方案，这样使用起来更灵活，可以选择对应的库一起来使用，例如，react+redux、MobX 或其它 flux 模式的状态管理库一起使用时，使其成为一套强大的解决方案，React框架类似于是javascript包裹的html相关的一些东西，这样写起来更灵活，自定义起来会更方便。