全新的Angular5来了！

小小智 · 发表于 2017-11-6 16:42:41

一、概述

尽管被称为Angular5，实际上它只是这个诞生于2012年的前端框架的的第四个版本：

看起来差不多半年就发布一个新版本，不过实际上从重写的版本2开始，开发接口与核心思想就稳定下来了，并基本保持着与前序版本的兼容性。

在5这个新的版本中，Angular团队将改进重点放在以下特性方面：

PWA是Google提出的一个标准，旨在让Web应用在移动终端上获得媲美原生应用的用户体验。一个PWA应用主要利用Service Worker和浏览器缓存来提省交互体验，它不仅可以直接部署在手机桌面，而且可以离线应用：

二、引入angular环境

Angular推荐使用TypeScript来开发应用，这要求使用一个在线编译器（JIT）实时编译代码，或者在开发期采用预编译器(AOT)提前编译代码。

为了避免这个繁琐的过程影响对Angular框架本质的思考，我们将这些必需品进行了必要的配置和打包，以便适应在线编写和实验。现在只需要引入一个库a5-loader就可以了。

下图是库的构成示意，其中的蓝色部件均打包在库中：

你可能注意到Angular框架并不是蓝色的。的确，我们没有把它打包在a5-loader中，而是让模块加载器（SystemJS）根据应用的需要自动加载。这么做的目的，是为了让应用代码，和后续课程中采用的后端构建方法保持一致。

如果你对这个库有兴趣，可以访问github上的 http://github.com/hubwiz/a5-loader 仓库。

三、创建Angular组件

Angular是面向组件的前端开发框架。如果你从事过C/S图形化应用的开发，应该知道组件这个词的含义。基本上，组件代表着一些具有图形界面，并且具有内在逻辑能力的程序单元。下图列出了三种用于实现乒乓切换的组件：

组件提供了很好的复用性，在一堆组件的基础上，我们使用简单的胶水代码就可以实现相当复杂的交互功能。

现在让我们来创建Angular组件，代码相当简单：

@Component({ selector: "ez-app", template: `<h1>Hello,angular5</h1>`})class EzComp{}

在Angular框架中，组件就是指一个应用了Component装饰器的类。Component装饰器的作用，就是为被装饰的类附加元数据信息：

Angular框架对应用进行编译引导时，将使用这些元数据构造视图。其中的两个元数据非常重要：

四、创建Angular模块

Angular框架的核心是组件化，同时它的设计目标是适应大型应用的开发。因此，在应用开发中引入了模块（NgModule）的概念来组织不同的组件（及服务），一个Angular应用至少需要创建一个模块。

为了区别于JavaScript语言本身的模块概念，在本课程中将使用NG模块来表示一个Angular模块。

类似于组件，NG模块就是一个应用了NgModule装饰器的类。例如，下面的代码创建了一个NG模块EzModule：

@NgModule({ imports: [ BrowserModule ], declarations: [ EzComp ], bootstrap: [ EzComp })class EzModule{}

同样，NgModule装饰器用来给被装饰的类附加模块元数据，可以查看被装饰类的__annotations__属性来观察这一结果：

NgModule装饰器声明了一些关键的元数据，来通知框架需要载入哪些NG模块、编译哪些组件以及启动引导哪些组件：

需要强调的是，bootstrap元数据声明的组件必须是编译过的组件：它要么属于使用imports元数据引入的外部NG模块，要么是已经在declarations元数据中声明的本地组件。

NG模块BrowserModule定义于包[@angular](/user/angular)/platform-browser，它是Angular跨平台战略的重要组成部分。BrowserModule封装了浏览器平台下的核心功能实现，与之对应的其他平台实现还有：

通常情况下开发Web应用时，我们都需要引入BrowserModule这一NG模块。

限于篇幅，想继续的，更多精彩内容请移步：

		自动登录	找回密码
密码			立即注册

站长推荐 /1