Angular2知识概括

Angular版本更迭

起源和版本(1~2)：

• Augular 1.x：
  ①近年来，Web 开发技术的发展日新月异，各种框架层出不穷。在这样的大背景之下，2010年10月，Google首次发布了自己的 Web开发框架，名为 AngularJS，也叫Angular，或者简称为ng。
  ②在Angular框架中，提出很多新的思想和概念，比如受到众多开发者喜爱和热议的“双向数据绑定”，在同时期以及之后的web框架中也都出现了“数据绑定”概念，包括最近大热的React、Vue等框架。除了上述特点还有MVC、指令、模块、$scope、controller、依赖注入、路由等。
  ③在 Google 内部有非常多的产品都在使用Angular，在国内，也有非常多的企业正在使用Angular1.x 开发自己的应用，包括移动APP，其中有很多行业巨头。
• Angular1.x显然非常成功，那么，为什么要剧烈地转向Angular2？
  ①性能限制
  <1>AngularJS当初是提供给设计人员用来快速构建HTML表单的一个内部工具。随着时间的推移，各种特性 被加入进去以适应不同场景下的应用开发。然而由于最初的架构限制（比如绑定和模板机制），性能的 提升已经非常困难了。
  ②快速变化的WEB
  <1>在语言方面，ECMAScript6的标准已经完成，在2015年6月正式发布了。这意味着浏览器将很快支持，例如：模块、类、lambda表达式、generator等新的特性，而这些特性将显著地改变JavaScript的开发体验。
  <2>在开发模式方面，Web组件也将很快实现。然而现有的框架，包括Angular1.x对WEB组件的支持都不够好。
  ③移动化
  <1>如今Web环境已经发生了显著地变化，到处都是手机和平板。Angular1.x没有针对移动 应用特别优化，并且缺少一些关键的特性，比如：缓存预编译的视图、触控支持等。
  ④简单易用
  <1>说实话，Angular1.x太复杂了，学习曲线太陡峭了，这让人望而生畏。Angular团队希望在Angular2中将复杂性封装地更好一些，让暴露出来的概念和开发接口更简单。
  <2>Angular不只是试图跟上，他们还推动了大量的标准的应用，增强了现有的应用架构。
• Angular2：
  ①2014年9月，Angular团队在 ng-europe会议上公开宣布了第二个大版本的开发计划，也就是大家熟知的 Angular2，与此对应，之前的版本就称为Angular 1.x了。
  ②目前，Angular2已经于2016年9月正式发布。Angular2依然保持了最初的核心设计理念，但进行了简化。Angular2的核心灵魂只有一个，那就是组件化（Component），而其它那些细碎的东西，比如Service、Route、Pipe，都是utils 而已。
  ③因此，在使用 Angular2 的时候，开发者只要学会使用 Coponent 就解决了一大半问题。但是与 Angular 1.x相比，在各种语法细节上发生了大幅度的修改。
• Angular 1.x 和 Angular2.x对比：
  ①删掉 $scope 作用域
  <1>在 Angular 1.x 里面，$scope 是一个相当强大又相当可怕的东西，由于在很多需要回调的场景之下，脏值检测机制无法感知到$scope 上发生的变化，因此经常需要开发者自己手动调用$apply() 方法。典型的场景有：事件回调、setTimeout回调、Ajax回调等等。
  <2>Angular2 响应社区的强烈呼吁，删除（或者说隐藏）了 $scope的概念，开发者不再需要感知到它的存在。另外，Angular2在底层引入了 zone.js，所以即使在各种回调函数中修改数据模型也不需要手动调用$apply() 方法了。
  ②删掉了ng-controller 指令
  <1>这就意味着 Controller 不再是一个独立的组件，它合并到了 Component 内部。这是一个非常大的演进，因为从大量的实战经验来看，在复杂的业务逻辑中复用Controller 几乎是不可能的。
  <2>在其它同类的前端框架里面也有类似的处理手法，例如 Backbone 虽然也强调 MVC 的概念，但是它也没有定义单独的Controller 类，Controller也是合并在 View里面编写的。
  ③改进脏值检测机制
  <1>众所周知，“双向数据绑定”之所以能运行，是因为Angular 底层有“脏值检测”这么一个神奇的机制。而实际上Angular 1.x 里面的脏值检测机制的运行效率非常差，这就是为什么大家一直在抱怨绑定的对象不能太多、太深的原因。
  <2>Angular2 大幅度演进了这一机制，不仅引入了单向绑定，还增加了各种检测策略，例如：只检测一次、利用JIT 动态生成脏值检测代码等等。毫无疑问，有了这些工具之后，数据绑定效率不再是问题。
  ④嵌套路由
  <1>Angular 1.x 里面有一个非常讨厌的问题，框架内置的路由机制不支持嵌套使用，这就导致开发者在日常的开发过程中不得不依赖于第三方的ui-router 库。Angular2没有这个问题了，因为 Angular2的路由是基于 Component的，天然支持嵌套。
  ⑤依赖注入机制
  <1>Angular2 中的依赖注入写法与 Java中的注解（Annotation）非常类似，如果你熟悉Spring 注解的用法，那么使用Angular2 的依赖注入几乎没有学习成本。当然，概念上是有区别的，Angular2中叫 Decorator（装饰器），更加贴近Python 里面的Decorator 的概念。
  ⑥基于 TypeScript 开发
  <1>这是最大的一个变更，有很多人担忧这样是否会带来比较大的学习成本，实际的情况并非如此。因为 TypeScript的语法与 Java 或者 C# 非常类似，因此对于从后端转过来的开发者来说，学习这门语言几乎是没有难度的。
  <2>还有一个重要的方面需要大家注意：TypeScript 是 Microsoft 开发的一门语言，Google+Microsoft这样的组合会产生多么强大的推动力，大家可以想象。
  <3>Google 和 Microsoft本身都是重要的浏览器厂商，Chrome和 IE 加起来的市场份额占据了一大半的市场份额，未来如果两款浏览器内建 TypeScript引擎，很显然 TypeScript和 Angular的前景将会一片光明。这一优势是大量的同类技术框架根本无法企及的，因此大家在做技术选型的过程中需要综合考虑这些情况作出理性的决策。
  ⑦自带 UI 控件库
  <1>两个版本的 UI 控件库都实现了Material Design 所提出来的设计风格，Material Design是 Google提出来的一种 UI设计原则，终极的目标是：用一套 UI设计规范来兼容各种各样的设备，例如桌面、平板、大屏幕的电视、车载系统、甚至 watch，从而保证用户体验的一致性。

Angular 4.x：

• 为什么有Angular1.x、Angular2.x，没听说有Angular3.x就直接到了Angular4.x？
  ①根据语义化命名版本规则（参考：http://semver.org/lang/zh-CN/），此前版本中发布的route组件破坏性升级到了3.x，所有此次就统一命名为4.x。
• Angular 4 在2017年03月24日正式发布，这里还是先明确下官方的说法，别被angular发布4.0正式版吓到了。
  <1>从2.0开始angular.js已经不叫angular.js了，就叫angular（少了.js）只是版本号是2.x。而日常我们为了区别angular.js 1.x和angular的2.x的版本，称之为angular2。
  <2>后来官网发现这样的命名方式并不好，决定将版本号语义化（具体可以参考语义化版本 2.0.0）。但是之前route组件因为破坏性升级版本号到了3.x，为了统一版本号，直接将angular提至4.0版本，这样才有了angular发布了4.0正式版。
• angular.js1.x到angular2确实是一个非常大的升级，以至于api、实现原理、框架思路都是完全不一样的。可以毫不夸张的说，学习angular2就和学一个全新的框架并没有太大区别。
• BUT！angular2.x到angular4.0破坏性升级并不多，也很容易直接升级到4.0版本。
• 相比于Angular 2，Angular4的功能列表中添加了许多新功能，同时还有一些旧功能的改进。Angular4是基于angular2 的新加了功能。

angular2入门

运行条件：

• 由于目前各种环境（浏览器或Node）暂不支持ES6的代码，所以需要一些shim和polyfill（IE需要）让ES6写的代码能够转化为ES5形式并可以正常运行在浏览器中。
• 从图中可以看出在 Es5 浏览器下需要以下模块加载器：
  ①systemjs - 通用模块加载器，支持AMD、CommonJS、ES6等各种格式的JS模块加载。
  ②es6-module-loader - ES6模块加载器，systemjs会自动加载这个模块。
  ③traceur - ES6转码器，将ES6代码转换为当前浏览器支持的ES5代码，systemjs会自动加载这个模块。
  

Angular 2 架构：

• Angular2 是一个完整的单页应用开发框架，它提供了很多组件。
• Angular 2的架构包含以下模块:
  ①Module
  ②Component
  ③Template
  ④Metadata
  ⑤Data Binding
  ⑥Service
  ⑦Directive
  ⑧Dependency Injection
• 模块：
  ①模块组件的特征在于可以用于执行单个任务的代码块。 您可以从代码(如类)中导出值的值。 Angular应用程序被称为模块，并使用许多模块构建您的应用程序。 Angular 2的基本构建块是可以从模块导出的组件类。
  ②某些应用程序的组件类名称为 AppComponent ，您可以在名为 app.component.ts 的文件中找到它。 使用 export 语句从模块中导出组件类，
  ③export 语句指定它是一个模块，它的 AppComponent 类定义为public，并且可以被应用程序的其他模块访问。

export class AppComponent { }

• 组件：
  ①组件是具有模板的控制器类，主要处理页面上的应用程序和逻辑的视图。 它是一个可以在整个应用程序中使用的代码。 组件知道如何呈现自己和配置依赖注入。 您可以使用组件内联样式，样式网址和模板内联样式将CSS样式与组件相关联。
  ②要注册组件，我们使用 @Component 注释，可以将应用程序拆分为更小的部分。 每个DOM元素只有一个组件。
• 模板：
  ①组件的视图可以通过使用模板来定义，该模板告诉Angular如何显示组件。 例如，下面的简单模板显示如何显示名称:
  ②要显示该值，可以在插值大括号中放置模板表达式。

<div>
Your name is : {
  {name}}
</div>

• 元数据：
  ①元数据是处理类的一种方式。 考虑我们有一个称为 MyComponent 的组件，它将是一个类，直到我们告诉Angular它是一个组件。 您可以使用元数据来告诉Angular MyComponent 是一个组件。 元数据可以使用装饰器附加到TypeScript。
  ②@Component 是一个装饰器，它使用配置对象来创建组件及其视图。 selector 创建组件的实例，其中它找到< mylist> 父HTML中的标记。 模板告诉Angular如何显示组件。 指令装饰器用于表示组件或指令的数组。

@Component({
   selector : 'mylist',
   template : '<h2>Name is Harry</h2>'
   directives : [MyComponentDetails]
})
export class ListComponent{...}

• 数据绑定：
  ①数据绑定是通过声明源和目标HTML元素之间的绑定来协调应用程序数据值的过程。 它将模板部分与组件部分和模板HTML组合，使用标记绑定以连接两侧。 有四种类型的数据绑定:
  <1>插值:它显示div标签中的组件值。
  <2>属性绑定:将属性从父级属性传递给子级的属性。
  <3>事件绑定:当您单击组件方法名称时触发。
  <4>双向绑定:此表单通过使用 ngModel 指令在单个符号中绑定属性和事件。
• 服务：
  ①服务是仅负责执行特定任务的JavaScript函数。 角度服务使用依赖注入机制注入。 服务包括应用程序所需的值，功能或功能。 一般来说，服务是一个类，它可以执行某些特定的事情，如日志服务，数据服务，消息服务，应用程序的配置等。在Angular中没有什么关于服务，并且没有ServiceBase类，但仍然服务可以被视为 基本的角度应用。
• 指示：
  ①该伪指令是表示元数据的类。 有三种类型的指令:
  <1>组件指令:它使用视图和控制器创建自定义控制器，并用作自定义HTML元素。
  <2>装饰指令:它使用额外的行为装饰元素。
  <3>模板指令:它将HTML转换为可重用的模板。
• 依赖注入：
  ①依赖注入是一种将对象作为应用程序中不同组件中的依赖关系传递的设计模式。 它创建一个新的类的实例及其所需的依赖项。使用依赖注入时，必须记住以下几点:
  <1>依赖注入被刺激到框架中，并且可以在任何地方使用。
  <2>注入器机制维护服务实例，并且可以使用提供者创建。
  <3>提供者是创建服务的一种方式。
  <4>您可以与注入器一起注册提供程序。

Angular2架构

模块 (Modules)：

• 模块由一块代码组成，可用于执行一个简单的任务。
• Angular 应用是由模块化的，它有自己的模块系统：NgModules。每个 Angular 应该至少要有一个模块(根模块)，一般可以命名为：AppModule。
• Angular 模块是一个带有 @NgModule 装饰器的类，它接收一个用来描述模块属性的元数据对象。
• 几个重要的属性如下：
  ①declarations （声明） - 视图类属于这个模块。 Angular 有三种类型的视图类： 组件 、 指令 和 管道 。
  ②exports - 声明（ declaration ）的子集，可用于其它模块中的组件模板 。
  ③imports - 本模块组件模板中需要由其它导出类的模块。
  ④providers - 服务的创建者。本模块把它们加入全局的服务表中，让它们在应用中的任何部分都可被访问到。
  ⑤bootstrap - 应用的主视图，称为根组件，它是所有其它应用视图的宿主。只有根模块需要设置 bootstrap 属性中。
• 一个最简单的根模块:

app/app.module.ts 文件：
import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
@NgModule({
  imports:      [ BrowserModule ],
  providers:    [ Logger ],
  declarations: [ AppComponent ],
  exports:      [ AppComponent ],
  bootstrap:    [ AppComponent ]
})
export class AppModule { }

• 接下来我们通过引导根模块来启动应用，开发过程通常在 main.ts 文件中来引导 AppModule ，代码如下：app/main.ts 文件：

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app.module';
 
platformBrowserDynamic().bootstrapModule(AppModule);

组件 (Components)：

• 组件是一个模板的控制类用于处理应用和逻辑页面的视图部分。
• 组件是构成 Angular 应用的基础和核心，可用于整个应用程序中。
• 组件知道如何渲染自己及配置依赖注入。
• 组件通过一些由属性和方法组成的 API 与视图交互。
• 创建 Angular 组件的方法有三步：
  ①从 @angular/core 中引入 Component 修饰器
  ②建立一个普通的类，并用 @Component 修饰它
  ③在 @Component 中，设置 selector 自定义标签，以及 template 模板

模板 (Templates)：

• Angular模板的默认语言就是HTML。
• 我们可以通过使用模板来定义组件的视图来告诉 Angular 如何显示组件。以下是一个简单是实例：

<div>
网站地址 : {
  {site}}
</div>

• 在Angular中，默认使用的是双大括号作为插值语法，大括号中间的值通常是一个组件属性的变量名。

元数据 (Metadata)：

• 元数据告诉 Angular 如何处理一个类。
• 考虑以下情况我们有一个组件叫作 Component ，它是一个类，直到我们告诉 Angular 这是一个组件为止。
• 你可以把元数据附加到这个类上来告诉 Angular Component 是一个组件。
• 在 TypeScript 中，我们用 装饰器 (decorator) 来附加元数据。

实例
@Component({
   selector : 'mylist',
   template : '<h2>菜鸟教程</h2>'
   directives : [ComponentDetails]
})
export class ListComponent{...}

• @Component 装饰器能接受一个配置对象，并把紧随其后的类标记成了组件类。
• Angular 会基于这些信息创建和展示组件及其视图。
• @Component 中的配置项说明：
  ①selector - 一个 css 选择器，它告诉 Angular 在 父级 HTML 中寻找一个 标签，然后创建该组件，并插入此标签中。
  ②templateUrl - 组件 HTML 模板的地址。
  ③directives - 一个数组，包含 此模板需要依赖的组件或指令。
  ④providers - 一个数组，包含组件所依赖的服务所需要的依赖注入提供者。

数据绑定 (Data Binding)：

• 数据绑定为应用程序提供了一种简单而一致的方法来显示数据以及数据交互，它是管理应用程序里面数值的一种机制。
  ①新版本的Angular已经彻底重写了脏检查机制，提供了极其高效的脏检查机制。

• 通过这种机制，可以从HTML里面取值和赋值，使得数据的读写，数据的持久化操作变得更加简单快捷。

• 如图所示，数据绑定的语法有四种形式。每种形式都有一个方向——从 DOM 来、到 DOM 去、双向，就像图中的箭头所示意的:
  

• 插值 : 在 HTML 标签中显示组件值。

<h3>
{
  {title}}
<img src="{
    {ImageUrl}}">
</h3>

• 属性绑定: 把元素的属性设置为组件中属性的值。