简述Angular 5 快速入门


Posted in Javascript onNovember 04, 2017

一、概述

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

简述Angular 5 快速入门
angular history

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

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

  1. 更易于构建渐进式Web应用 —— __P__rogressive __W__eb __A__pp
  2. 使用构建优化器剔除无用代码,以获得更小的应用、更快的网络加载时间
  3. 使物化设计组件兼容服务端渲染

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

简述Angular 5 快速入门

pwa

二、引入angular环境

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

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

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

简述Angular 5 快速入门

a5-loader

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

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

三、创建Angular组件

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

简述Angular 5 快速入门

component sample

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

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

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

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

简述Angular 5 快速入门

annotations

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

  1. selector:组件宿主元素的CSS选择符,声明了组件在DOM树中的渲染锚点
  2. template:组件的模板,框架将以这个模板为蓝图构建视图

四、创建Angular模块

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

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

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

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

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

简述Angular 5 快速入门

ngmodule annotations

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

  1. imports: 需要引入的外部NG模块
  2. declarations:本模块创建的组件,加入到这个元数据中的组件才会被编译
  3. bootstrap:声明启动引导哪个组件,必须是编译过的组件

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

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

  1. ServerModule:服务端实现
  2. 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)的原因:

简述Angular 5 快速入门

dynamic bootstrap

平台对象的bootstrapModule()方法用来启动指定的NG模块,启动的绝大部分工作,在于利用JIT编译器编译NG模块和组件,当这些编译工作都完成后,则根据启动模块的bootstrap元信息,渲染指定的组件。

六、为什么这么复杂?

可能你已经感觉有点复杂了:只是为了写一个Hello,World,就要写这么多代码。

事实上这些复杂性是随着Angular的发展逐步引入的,从好的一方面说,是提供给开发者的可选项逐渐增多了,适用场景变多了。

比如,在Angular2正式版之前,都没有NG模块的概念,你只要写一个组件就可以直接启动应用了。Angular团队的预期应用场景是大规模前端应用开发,因此显式的NG模块声明要求也是容易理解的。不过即使是小型的应用,由于可以只使用一个NG模块,因此这一点的复杂性增加倒也不多,只是增加了学习和运用这个新概念的成本。

另一个显而易见的复杂性,在于多平台战略的引入。Angular希望让应用可以跨越浏览器、服务器等多个平台(基本)直接运行。因此免不了抽象一个中间层出来,我们需要在应用中显式地选择相应的平台实现模块:

简述Angular 5 快速入门

multiple platform

第三个复杂性来源于对预编译(AOT:Ahead Of Time)的支持。在早期,Angular只有即时编译(JIT:Just In Time),也就是说应用代码是在运行时编译的。即时编译的第一个问题是在应用中需要打包编译器代码,这增加了最终发布的应用代码的
大小;另一个问题在于编译需要时间,这增加了用户打开应用的等待时间。因此现在的Angular是同时支持JIT和AOT的,但启动JIT编译的应用,和启动AOT编译的应用,在目前需要显式地进行选择:

简述Angular 5 快速入门

aot vs. jit

对于Angular而言,编译将入口NG模块定义转换为NG模块工厂(NgModuleFactory)。对于JIT而言,这一步是隐含在bootstrapModule()中的。而对于AOT而言,生成模块工厂就结束了,应用启动时使用bootstrapModuleFactory()调用生成的模块工厂即可。

尽管AOT编译通常在构建阶段运用,我们可以在浏览器里模拟这个分两步的过程。

七、理解Angular的初衷

除了框架本身的功能强大导致的复杂性,Angular的另一个复杂性来源在于其高度封装的声明式API,让开发者难以揣摩、洞察框架的实现机制,因此使用起来就很心虚,一旦出现问题则难以分析排错:

简述Angular 5 快速入门

angular error

不能把Angular当作黑盒来使用。

一方面原因在于,Angular是以其声明式的模板语法为核心提供API开发接口的,开发者书写的模板,经过框架相当复杂的编译处理,才渲染出最终的视图对象。如果不尝试了解从模板到视图对象这个过程究竟发生了什么,我相信你始终会有一种失控的感觉。

另一方面原因在于,Angular是一个框架,它搭好了应用程序的架子,留了一些空隙让开发者填充。如果不尽可能地了解框架的运行机制,很难充分地利用好框架。

开发Angular的出发点,是为了实现用HTML来编写用户界面,想想一个静态网页有多容易开发,你就知道这是多么好的想法:

简述Angular 5 快速入门

html challenge

原生HTML的问题在于,首先它需要借助于JavaScript才能实现过得去的用户交互,其次它只有那么多标签可用,难以担当开发用户界面的大任。

既然浏览器不能直接解释<ez-gauge>这样的标签,Angular团队就引入了编译器的概念:
在送给浏览器之前,先把有扩展标签的HTML翻译成浏览器支持的原生HTML:

简述Angular 5 快速入门

html compiler

写在文末:相信很多学习angular的同学都看过我写的内容,想来或多或少的应该有些帮助。希望这个内容能给大家带来更多的帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
控制打印时页眉角的代码
Feb 08 Javascript
JavaScript 高效运行代码分析
Mar 18 Javascript
js分页工具实例
Jan 28 Javascript
基于BootStrap Metronic开发框架经验小结【五】Bootstrap File Input文件上传插件的用法详解
May 12 Javascript
jQuery使用ajax跨域获取数据的简单实例
May 18 Javascript
JS实现的集合去重,交集,并集,差集功能示例
Mar 13 Javascript
Puppeteer环境搭建的详细步骤
Sep 21 Javascript
在vue中使用v-bind:class的选项卡方法
Sep 27 Javascript
vue下拉菜单组件(含搜索)的实现代码
Nov 25 Javascript
JS前端知识点总结之内置对象,日期对象和定时器相关操作
Jul 05 Javascript
JS实现页面数据懒加载
Feb 13 Javascript
js抽奖转盘实现方法分析
May 16 Javascript
vue2.0在table中实现全选和反选的示例代码
Nov 04 #Javascript
vue中使用localstorage来存储页面信息
Nov 04 #Javascript
javascript+jQuery实现360开机时间显示效果
Nov 03 #jQuery
原生JavaScrpit中异步请求Ajax实现方法
Nov 03 #Javascript
使用 Javascript 实现浏览器推送提醒功能的示例
Nov 03 #Javascript
Angular4绑定html内容出现警告的处理方法
Nov 03 #Javascript
关于Vue背景图打包之后访问路径错误问题的解决
Nov 03 #Javascript
You might like
解析php二分法查找数组是否包含某一元素
2013/05/23 PHP
PHP IE中下载附件问题解决方法
2014/01/07 PHP
PHP+jQuery 注册模块的改进(一):验证码存入SESSION
2014/10/14 PHP
PHP和Mysql中转UTF8编码问题汇总
2015/10/10 PHP
php常用图片处理类
2016/03/16 PHP
javascript 实现父窗口引用弹出窗口的值的脚本
2007/08/07 Javascript
深入理解JavaScript 闭包究竟是什么
2013/04/12 Javascript
JS调用页面表格导出excel示例代码
2014/03/18 Javascript
轻松创建nodejs服务器(8):非阻塞是如何实现的
2014/12/18 NodeJs
安装使用Mongoose配合Node.js操作MongoDB的基础教程
2016/03/01 Javascript
JQuery validate插件验证用户注册信息
2016/05/11 Javascript
微信小程序 教程之WXML
2016/10/18 Javascript
配置nodejs环境的方法
2017/05/13 NodeJs
使用bootstraptable插件实现表格记录的查询、分页、排序操作
2017/08/06 Javascript
详解VueJS应用中管理用户权限
2018/02/02 Javascript
详解Vue-cli3 项目在安卓低版本系统和IE上白屏问题解决
2019/04/14 Javascript
JS自定义右键菜单实现代码解析
2020/07/16 Javascript
vue 使用vant插件做tabs切换和无限加载功能的实现
2020/11/04 Javascript
[03:17]DOTA2英雄基础教程 剧毒术士
2013/12/12 DOTA
Python函数参数类型*、**的区别
2015/04/11 Python
python 的列表遍历删除实现代码
2020/04/12 Python
学习python之编写简单简单连接数据库并执行查询操作
2016/02/27 Python
python线程池threadpool使用篇
2018/04/27 Python
python启动应用程序和终止应用程序的方法
2019/06/28 Python
python3获取当前目录的实现方法
2019/07/29 Python
基于pycharm实现批量修改变量名
2020/06/02 Python
关于python中remove的一些坑小结
2021/01/04 Python
Bose美国官网:购买Bose耳机和音箱
2019/03/10 全球购物
行政专员工作职责
2013/12/22 职场文书
2014年行风建设工作总结
2014/12/01 职场文书
周一给客户的问候语
2015/11/10 职场文书
56句经典英文座右铭
2019/08/09 职场文书
Mysql 性能监控及调优
2021/04/06 MySQL
mysql连接查询中and与where的区别浅析
2021/07/01 MySQL
python编程项目中线上问题排查与解决
2021/11/01 Python
深入解读Java三大集合之map list set的用法
2021/11/11 Java/Android