全新的Angular5来了！
一、概述尽管被称为Angular5，实际上它只是这个诞生于2012年的前端框架的的第四个版本：http://xc.hubwiz.com/class/59de66862d4f22811dc6b2f7/img/angular-history.png看起来差不多半年就发布一个新版本，不过实际上从重写的版本2开始，开发接口与核心思想就稳定下来了，并基本保持着与前序版本的兼容性。在5这个新的版本中，Angular团队将改进重点放在以下特性方面：[*]更易于构建渐进式Web应用 —— __P__rogressive __W__eb __A__pp
[*]使用构建优化器剔除无用代码，以获得更小的应用、更快的网络加载时间
[*]使物化设计组件兼容服务端渲染
PWA是Google提出的一个标准，旨在让Web应用在移动终端上获得媲美原生应用的用户体验。一个PWA应用主要利用Service Worker和浏览器缓存来提省交互体验，它不仅可以直接部署在手机桌面，而且可以离线应用：http://xc.hubwiz.com/class/59de66862d4f22811dc6b2f7/img/pwa.png二、引入angular环境Angular推荐使用TypeScript来开发应用，这要求使用一个在线编译器（JIT）实时编译代码，或者在开发期采用预编译器(AOT)提前编译代码。为了避免这个繁琐的过程影响对Angular框架本质的思考，我们将这些必需品进行了必要的配置和打包，以便适应在线编写和实验。现在只需要引入一个库a5-loader就可以了。下图是库的构成示意，其中的蓝色部件均打包在库中：http://xc.hubwiz.com/class/59de66862d4f22811dc6b2f7/img/a5-loader.png你可能注意到Angular框架并不是蓝色的。的确，我们没有把它打包在a5-loader中，而是让模块加载器（SystemJS）根据应用的需要自动加载。这么做的目的，是为了让应用代码，和后续课程中采用的后端构建方法保持一致。如果你对这个库有兴趣，可以访问github上的 http://github.com/hubwiz/a5-loader 仓库。三、创建Angular组件Angular是面向组件的前端开发框架。如果你从事过C/S图形化应用的开发，应该知道组件这个词的含义。基本上，组件代表着一些具有图形界面，并且具有内在逻辑能力的程序单元。下图列出了三种用于实现乒乓切换的组件：http://xc.hubwiz.com/class/59de66862d4f22811dc6b2f7/img/component-sample.png组件提供了很好的复用性，在一堆组件的基础上，我们使用简单的胶水代码就可以实现相当复杂的交互功能。现在让我们来创建Angular组件，代码相当简单：@Component({selector: "ez-app",template: `<h1>Hello,angular5</h1>`})class EzComp{}在Angular框架中，组件就是指一个应用了Component装饰器的类。Component装饰器的作用，就是为被装饰的类附加元数据信息：http://xc.hubwiz.com/class/59de66862d4f22811dc6b2f7/img/annotations.pngAngular框架对应用进行编译引导时，将使用这些元数据构造视图。其中的两个元数据非常重要：
[*]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__属性来观察这一结果：http://xc.hubwiz.com/class/59de66862d4f22811dc6b2f7/img/anno-ngmodule.pngNgModule装饰器声明了一些关键的元数据，来通知框架需要载入哪些NG模块、编译哪些组件以及启动引导哪些组件：
[*]imports： 需要引入的外部NG模块
[*]declarations：本模块创建的组件，加入到这个元数据中的组件才会被编译
[*]bootstrap：声明启动引导哪个组件，必须是编译过的组件
需要强调的是，bootstrap元数据声明的组件必须是编译过的组件：它要么属于使用imports元数据引入的外部NG模块，要么是已经在declarations元数据中声明的本地组件。NG模块BrowserModule定义于包[@angular](/user/angular)/platform-browser，它是Angular跨平台战略的重要组成部分。BrowserModule封装了浏览器平台下的核心功能实现，与之对应的其他平台实现还有：
[*]ServerModule：服务端实现
[*]WorkerAppModule：WebWorker实现
通常情况下开发Web应用时，我们都需要引入BrowserModule这一NG模块。限于篇幅，想继续的，更多精彩内容请移步：http://xc.hubwiz.com/course/59de66862d4f22811dc6b2f7
页:
[1]