Angular 的前世此生

目录

• 序言
• AngularJS 简介
• Angular 2.0 的动机
• 现现在的 Angular
• Angular 的核心概念
• 参考

序言

Angular 通常意义上是指 Angular v2 及以上版本，而 AngularJS 专指 Angular 的全部 1.x 版本。出现这种区别是因为 Angular 对 AngularJS 进行了彻底重写，二者区别很大，直接造成了两个独立的产品。

• AngularJS 官网：Superheroic JavaScript MVW Framework
• Angular 官网：One framework. Mobile & desktop.

接下来主要介绍 Angular 最初出现的动机以及其核心概念。

AngularJS 简介

AngularJS 诞生于 2009 年，由 Misko Hevery 等人建立，后被 Google 收购，是一款的前端 JS 框架。AngularJS 有着诸多特性，最为核心的是：MVVM、模块化、自动化双向数据绑定、语义化标签、依赖注入等等。

Angular 2.0 的动机

为了解决 AngularJS 1.x 中存在的各类问题以及跟上新的标准规范，而进行了一次完全革新。

（1）性能

AngularJS 最初做为一个工具被建立，并非为开发人员设计的，更倾向于设计人员用来快速建立持久化 HTML 表单。在以后的发展中，为了让开发人员也能用它进行构建更多、更复杂的程序，Angualr 1.x 的维护团队不断增量地改进，使它能适应现代 Web 应用程序的需求。不过，因为原始设计上的一些潜规则，不论如何改进终究是有其局限性，而这也致使了当前的绑定和模板基础架构始终存在性能瓶颈。而为了解决性能问题，须要新的策略。

（2）变化的 Web

在 AngularJS 被建立出来的5年中，Web 也在不断的发展，不只仅是 JavaScript 的规范快速发展，使得浏览器开始支持 module、class、lambda、generator 等新的语法特性，另外 Web Components 的技术标准也被提出并被浏览器逐步支持。现现在 Web Components 主要由三种技术组成：

• Custom elements（自定义元素），容许经过一组 JavaScript API 来自定义标签扩展 HTML。
• Shadow DOM（影子DOM），容许对元素功能私有化（对HTML、CSS 和 JavaScript 进行封装），不用担忧与文档的其余部分发生冲突。
• HTML templates（HTML模板），容许在 HTML 中定义模板，模板能够反复使用，而且只有调用的时候才会被渲染。

Web Components 是一种建立封装的、可复用的网页 UI 组件的标准化方式，其不只能够弥补标准的 HTML 工具集所存在的不足，也能提高开发人员的创造能力和开发效率。

Angular 1.x 自己是包含数据绑定功能的，其构建在一部分已知的 HTML 元素和经常使用事件、行为的基础上，而为了使其支持 Web Components 技术，就须要有一个全新的数据绑定实现。

（3）移动端

随着互联网的不断发展，手机等移动端开始崛起，通用计算场景逐步发送变化。而最初设计的 AngularJS 虽然能够被用于建立移动应用，但它自己的理念并不是为此设计。这也致使了它在移动端这块面临诸多问题，包括前面提到的性能问题，不能缓存预编译视图以及过于普通的触摸支持等等。

（4）易用性

AngularJS 的不少核心特性都是逐步被“拼凑”出来的，好比最开始没有自定义指令，都是硬编码，以后增长了专门用于添加指令的API，最开始也没有控制器，也是以后才增长了控制器的概念和功能等。能够说 AngularJS 最初被设计时，其核心特性就不是很清晰，这也就造就了不少 API 的设计得不够优雅，这也增长开发人员的学习和使用的难度。

现现在的 Angular

Angular 是一个用 HTML 和 TypeScript 构建客户端应用的平台与框架。 Angular 自己由 TypeScript 写成，它将核心功能和可选功能做为一组 TypeScript 库进行实现，开发人员能够直接导入使用。

Angular 的核心概念

Angular 的不少核心概念是继承至 AngularJS 的（依赖注入、数据绑定等等），并在其基础上进一步发展。

Angular 框架有八大核心概念，它们是 Angular 的重要组成部分，以下图：

模块 (Module)：Angular 应用是模块化的，它拥有本身的模块化系统，称做 NgModule。 一个 NgModule 就是一个容器，用于存放一些内聚的代码块，这些代码块专一于某个应用领域、某个工做流或一组紧密相关的功能。

组件 (Component)： 组件用来包装特定的功能，在类（class）中定义组件的应用逻辑，为视图提供支持。

模板 (Template)：模板就是一种 HTML，用它来告诉 Angular 如何渲染该组件。模板很像标准的 HTML，可是它也包含 Angular 的模板语法，这些模板语法能够根据自定义的应用逻辑、状态和 DOM 数据来修改 HTML。

元数据 (Metadata)：元数据用于告诉 Angular 如何处理一个类，例如从哪里获取它须要的主要构造块，以建立和展现这个组件及其视图。

数据绑定 (Data Binding)：数据绑定就是把数据映射到模板上，或者从模板中取回数据。 Angular 支持双向数据绑定。

指令 (Directive)：指令就是一个带有 @Directive() 装饰器的类。在 Angualr 渲染时，会根据指令给出的指示对 DOM 进行转换。（组件从技术角度上说也是一个指令）

服务 (Service)：广义的服务包括应用所需的任何值、函数或特性。狭义的服务是一个明肯定义了用途的类，它应该作一些具体的事，并作好。

依赖注入 (Dependency Injection)：依赖注入（DI）是一种重要的设计模式。在 Angular 框架中，依赖注入被用于在任何地方给新建的组件提供服务或所需的其它东西。 组件是服务的消费者，经过 DI 把一个服务注入到组件中，让组件类得以访问该服务类。

Angular 框架的八大核心概念相互之间的关系，以下图：

上图中的关系概要：

• 组件和模板共同定义了 Angular 的视图。
  • 组件类上的装饰器为其添加了元数据，其中包括指向相关模板的指针。
  • 组件模板中的指令和绑定标记会根据程序数据和程序逻辑修改这些视图。
• 依赖注入器会为组件提供一些服务，好比路由器服务能让开发人员定义如何在视图之间导航。

参考

Angular 发展历程概述

Angular和AngularJS之间的关系？

有关Angular 2.0的一切

Web Components - MDN Web Docs

Angular 文档