简述Angular 5 快速入门
一、概述
尽管被称为angular5，实际上它只是这个诞生于2012年的前端框架的的第四个版本：
angular history
看起来差不多半年就发布一个新版本，不过实际上从重写的版本2开始，开发接口与核心思想就稳定下来了，并基本保持着与前序版本的兼容性。
在5这个新的版本中，angular团队将改进重点放在以下特性方面：
- 更易于构建渐进式web应用 —— __p__rogressive __w__eb __a__pp
- 使用构建优化器剔除无用代码，以获得更小的应用、更快的网络加载时间
- 使物化设计组件兼容服务端渲染
pwa是google提出的一个标准，旨在让web应用在移动终端上获得媲美原生应用的用户体验。一个pwa应用主要利用service worker和浏览器缓存来提省交互体验，它不仅可以直接部署在手机桌面，而且可以离线应用：
pwa
二、引入angular环境
angular推荐使用typescript来开发应用，这要求使用一个在线编译器（jit）实时编译代码，或者在开发期采用预编译器(aot)提前编译代码。
为了避免这个繁琐的过程影响对angular框架本质的思考，我们将这些必需品进行了必要的配置和打包，以便适应在线编写和实验。现在只需要引入一个库a5-loader就可以了。
下图是库的构成示意，其中的蓝色部件均打包在库中：
a5-loader
你可能注意到angular框架并不是蓝色的。的确，我们没有把它打包在a5-loader中，而是让模块加载器（systemjs）根据应用的需要自动加载。这么做的目的，是为了让应用代码，和后续课程中采用的后端构建方法保持一致。
如果你对这个库有兴趣，可以访问github上的 仓库。
三、创建angular组件
angular是面向组件的前端开发框架。如果你从事过c/s图形化应用的开发，应该知道组件这个词的含义。基本上，组件代表着一些具有图形界面，并且具有内在逻辑能力的程序单元。下图列出了三种用于实现乒乓切换的组件：
component sample
组件提供了很好的复用性，在一堆组件的基础上，我们使用简单的胶水代码就可以实现相当复杂的交互功能。
现在让我们来创建angular组件，代码相当简单：
@component({ selector: "ez-app", template: `<h1>hello,angular5</h1>`})class ezcomp{}
在angular框架中，组件就是指一个应用了component装饰器的类。component装饰器的作用，就是为被装饰的类附加元数据信息：
annotations
angular框架对应用进行编译引导时，将使用这些元数据构造视图。其中的两个元数据非常重要：
- selector：组件宿主元素的css选择符，声明了组件在dom树中的渲染锚点
- template：组件的模板，框架将以这个模板为蓝图构建视图
四、创建angular模块
angular框架的核心是组件化，同时它的设计目标是适应大型应用的开发。因此，在应用开发中引入了模块（ngmodule）的概念来组织不同的组件（及服务），一个angular应用至少需要创建一个模块。
为了区别于javascript语言本身的模块概念，在本课程中将使用ng模块来表示一个angular模块。
类似于组件，ng模块就是一个应用了ngmodule装饰器的类。例如，下面的代码创建了一个ng模块ezmodule：
@ngmodule({
imports: [ browsermodule ],
declarations: [ ezcomp ],
bootstrap: [ ezcomp ]
})
class ezmodule{}
同样，ngmodule装饰器用来给被装饰的类附加模块元数据，可以查看被装饰类的__annotations__属性来观察这一结果：
ngmodule annotations
ngmodule装饰器声明了一些关键的元数据，来通知框架需要载入哪些ng模块、编译哪些组件以及启动引导哪些组件：
- imports： 需要引入的外部ng模块
- declarations：本模块创建的组件，加入到这个元数据中的组件才会被编译
- bootstrap：声明启动引导哪个组件，必须是编译过的组件
需要强调的是，bootstrap元数据声明的组件必须是编译过的组件：它要么属于使用imports元数据引入的外部ng模块，要么是已经在declarations元数据中声明的本地组件。
ng模块browsermodule定义于包@angular/platform-browser，它是angular跨平台战略的重要组成部分。browsermodule封装了浏览器平台下的核心功能实现，与之对应的其他平台实现还有：
- servermodule：服务端实现
- workerappmodule：webworker实现
通常情况下开发web应用时，我们都需要引入browsermodule这一ng模块。
五、启动angular应用
前面课程中，我们已经创建了一个组件和一个ng模块，不过似乎只是定义了一堆的元数据，几乎没有写太多有价值的代码。
但这就是angular框架的一个特点：声明式开发。这些元数据是用来向框架声明如何引导启动应用程序的重要信息。
启动代码很简单，引入platformbrowserdynamic()工厂函数、创建平台实例、启动指定模块：
import { platformbrowserdynamic } from "@angular/platform-browser-dynamic"
const pref = platformbrowserdynamic()
pref.bootstrapmodule(ezmodule)
√ 平台对象：platformref
platformbrowserdynamic()函数返回一个platformref对象（angular对平台的抽象），这个函数最重要的作用，在于其内部创建了一个即时（__j__ust __i__n __t__ime）编译器，可以在线实时编译ng模块和组件，这也是它被称为动态（dynamic）的原因：
dynamic bootstrap
平台对象的bootstrapmodule()方法用来启动指定的ng模块，启动的绝大部分工作，在于利用jit编译器编译ng模块和组件，当这些编译工作都完成后，则根据启动模块的bootstrap元信息，渲染指定的组件。
六、为什么这么复杂？
可能你已经感觉有点复杂了：只是为了写一个hello,world，就要写这么多代码。
事实上这些复杂性是随着angular的发展逐步引入的，从好的一方面说，是提供给开发者的可选项逐渐增多了，适用场景变多了。
比如，在angular2正式版之前，都没有ng模块的概念，你只要写一个组件就可以直接启动应用了。angular团队的预期应用场景是大规模前端应用开发，因此显式的ng模块声明要求也是容易理解的。不过即使是小型的应用，由于可以只使用一个ng模块，因此这一点的复杂性增加倒也不多，只是增加了学习和运用这个新概念的成本。
另一个显而易见的复杂性，在于多平台战略的引入。angular希望让应用可以跨越浏览器、服务器等多个平台（基本）直接运行。因此免不了抽象一个中间层出来，我们需要在应用中显式地选择相应的平台实现模块：
multiple platform
第三个复杂性来源于对预编译（aot：ahead of time）的支持。在早期，angular只有即时编译（jit：just in time），也就是说应用代码是在运行时编译的。即时编译的第一个问题是在应用中需要打包编译器代码，这增加了最终发布的应用代码的
大小；另一个问题在于编译需要时间，这增加了用户打开应用的等待时间。因此现在的angular是同时支持jit和aot的，但启动jit编译的应用，和启动aot编译的应用，在目前需要显式地进行选择：
aot vs. jit
对于angular而言，编译将入口ng模块定义转换为ng模块工厂（ngmodulefactory）。对于jit而言，这一步是隐含在bootstrapmodule()中的。而对于aot而言，生成模块工厂就结束了，应用启动时使用bootstrapmodulefactory()调用生成的模块工厂即可。
尽管aot编译通常在构建阶段运用，我们可以在浏览器里模拟这个分两步的过程。
七、理解angular的初衷
除了框架本身的功能强大导致的复杂性，angular的另一个复杂性来源在于其高度封装的声明式api，让开发者难以揣摩、洞察框架的实现机制，因此使用起来就很心虚，一旦出现问题则难以分析排错：
angular error
不能把angular当作黑盒来使用。
一方面原因在于，angular是以其声明式的模板语法为核心提供api开发接口的，开发者书写的模板，经过框架相当复杂的编译处理，才渲染出最终的视图对象。如果不尝试了解从模板到视图对象这个过程究竟发生了什么，我相信你始终会有一种失控的感觉。
另一方面原因在于，angular是一个框架，它搭好了应用程序的架子，留了一些空隙让开发者填充。如果不尽可能地了解框架的运行机制，很难充分地利用好框架。
开发angular的出发点，是为了实现用html来编写用户界面，想想一个静态网页有多容易开发，你就知道这是多么好的想法：
html challenge
原生html的问题在于，首先它需要借助于javascript才能实现过得去的用户交互，其次它只有那么多标签可用，难以担当开发用户界面的大任。
既然浏览器不能直接解释<ez-gauge>这样的标签，angular团队就引入了编译器的概念：
在送给浏览器之前，先把有扩展标签的html翻译成浏览器支持的原生html：
html compiler
写在文末：相信很多学习angular的同学都看过我写的内容，想来或多或少的应该有些帮助。希望这个内容能给大家带来更多的帮助，也希望大家多多支持。