第3 章 Angular入门初步

42 Pages·2017·1.57 MB·Chinese

第 3 章
Angular入门初步
◄ ►

本章将介绍使用Ionic框架开发前掌握的Angular（从2.0版本开始，去掉了JS这个后缀，
统称Angular）基础知识。除了需要明白HTML 5/CSS 3/JavaScript这三个Web开发的基本知
识，要学会 Ionic 开发还有一个前提就是懂 Angular 和 TypeScript（从 2.0 版本开始，Angular
主要使用TypeScript作为开发语言）。然而按笔者的估计，初学型的开发者要完整搞懂Angular
的方方面面，怎么也得读一本几百页专讲 Angular 的书。为了不偏离本书主旨，同时又根据
2/8原则，笔者在本章将介绍使用Ionic框架时无法回避的Angular整体结构和最重要的组成元
素，而有些旁枝末节或是关系不大的知识点将被略过或在后续章节的示例代码中出现的时候给
出解释。
如有读者想要全面深入学习Angular知识以达到能够深度改写和扩展Ionic框架提供的指
令组件的能力，笔者建议直接参考 Angular 官方中文网站完整的使用说明
（https://www.angular.cn/docs）、API 文档（https://www.angular.cn/api）或者国内外出版
的优秀Angular书籍。
本章的主要知识点包括：
(cid:2) AngularCLI安装与使用
(cid:2) Angular整体结构
(cid:2) 模块与依赖注入（Module& Dependency Injection）
(cid:2) 组件与模板 (Component &Template)
(cid:2) 指令与服务（Directive&Service）
(cid:2) 一个简单的Angular项目：实时自选股行情页
3.1
AngularCLI 安装与使用
在安装Angular前，我们需要确保在阅读第2章时已经成功安装了Node.js和NPM，如果
还没有安装，请先阅读2.1.1章节。
Ionic移动开发入门与实战（第2版）
3.1.1 AngularCLI 的安装
AngularCLI是Angular的命令行界面工具，主要用来创建项目、添加文件以及启动服务等
功能。我们使用以下命令进行安装。
npm install -g @angular/cli
在安装完成后，使用以下命令验证AngularCLI的正常安装与版本，如图3.1所示。
Ng--version

图3.1 验证AngularCLI是否成功安装以及被安装的版本
3.1.2 使用 AngularCLI 创建项目
首先讲一下如何使用 CLI 来创建一个新的项目。进入你想要创建项目的文件夹下，执行
以下命令来生成一个新项目，如图3.2所示。
ngnew HelloAngular

图3.2 使用AngularCLI新建项目
52
第3章 Angular入门初步
在项目目录文件夹下，会生成如图3.2中所示的文件。之后等待NPM将node_modules文
件夹下的依赖安装完成即可。
3.1.3 使用 AngularCLI 启动开发服务器
在新项目创建完成后即可启动服务器。我们执行以下命令。
cdHelloAngular
ng serve --open
命令执行后，如果可以看到如图3.3所示的界面，那么环境算是搭建完成了。在接下来的
章节讲解后，我们会在最后一节做一个简单的项目，帮助读者学习Angular的代码编写。

图3.3 Angular初始项目
ng serve命令会启动开发服务器，可以在修改文件的时候对页面进行自动更新。加入--open
（或-o）参数可以自动帮助我们打开浏览器并访问该地址，其中默认地址为
http://localhost:4200/。

53
Ionic移动开发入门与实战（第2版）
3.2
Angular 整体结构概述
接触过前端界面开发的读者应该都用过或者听说jQuery了。Angular与jQuery大不相同：
Angular是一个开发框架，而jQuery是一个工具库。工具库像瑞士军刀，使用者觉得合适的时
候就找到它的某个部件用一下，但是它基本不会对使用者提出过多要求或者严格限制，比如瑞
士军刀不会要求小刀和开瓶器一定需要一起配合使用；而开发框架则大不相同，它已经通过自
有的部分组成了一个环环相扣的有机整体，严格约定了使用者在哪里可以自由组合，在哪里必
须按部就班。只有遵照它的要求嵌入和组合，才能保证体系在拼装运行时能正常工作。因此庞
大严谨的Angular相对于灵活的jQuery要难学一些，不把Angular开发应用的整体结构和各部
分组件职能了解清楚，会觉得没处下手或是使用时如堕五里雾中，即使勉强完成应用，也在其
中埋了一些坑等着后人来慢慢填。
因此本节将先从 Angular 的整体入手，向读者简单介绍这个重型框架的开发语言
TypeScript 和几大特性。图 3.4 是笔者简化过的典型 Angular 应用结构图，图中前端区域包括
了本章将要介绍的大部分内容，除了代码模块和依赖注入这两个抽象概念和变形过滤器这个工
具类组件。
视图/View
(HTML+CSS)
双向
视图-模型/
数据 View-Model M.V.VM
(指令directive)
绑定
模型/Model
(作用域Scope)
控制器/
Controller
服务句柄/
Service Handle 前端
后端
后端数据接口/
API+DB

图3.4 典型Angular应用的概要组件图
3.2.1 Angular 与 TypeScript
Angular是用TypeScript构建的。TypeScript作为ES6的超集，直接使用JavsScript也是可
以的，但是使用TypeScript最大的好处就是它的类型系统。类型检查有助于在编译期预防bug，
更有助于清晰表达自己的意图。
54
第3章 Angular入门初步
3.2.2 Angular 实现了 M.V.VM 模式
MVVM 模式是 Model-View-ViewMode 模式的简称。由视图（View）、视图模型
（ViewModel）、模型（Model）三部分组成，通过这三部分实现UI逻辑、呈现逻辑和状态控
制、数据与业务逻辑的分离。图3.4中从下至上组成MVVM的3部分：
(cid:2) 模型（Model）用于封装与应用程序的业务逻辑相关的数据以及对数据的处理方法。
它代表了对后端数据直接访问的权利，例如对数据库的访问（后面我们会看到，这是
通过服务Service来代理完成的）。模型本身并不依赖于视图和视图-模型。
(cid:2) 视图-模型（View-Model）在中间负责与模型和视图互动，将模型的最新状态发送到
视图，由其利用HTML和CSS来渲染内容。
(cid:2) 视图（View）是Angular解析后渲染和绑定后生成的HTML。
Angular使用MVVM模式获得了4大好处：
1. 低耦合
视图可以独立于模型变化和修改，一个视图-模型可以绑定到不同的视图上。当视图变化
的时候模型可以不变，当模型变化的时候视图也可以不变。
2. 可重用性
可以把一些视图的逻辑放在视图-模型里面，让很多视图重用这段视图逻辑。
3. 开发与设计工作可分离
开发人员可以专注于业务逻辑和数据的开发（视图-模型）。设计人员可以专注于界面（视
图）的设计。
4. 可测试性
可以依据测试归约构造视图-模型来对界面（视图）进行测试。
3.2.3 Angular 实现了模块化
把系统分割成多模块（Modules）的目的是通过定义公共APIs、限制行为（功能）和数据
（属性和变量）的可视化，从而实现问题领域分离（Separation of Concerns）。大部分的编程
语言内置了对模块化的支持，作为一个完整的开发框架，Angular实现了自己的模块化系统。
这个系统有以下重要特性：
(cid:2) 组件寄生于模块中：在定义与使用本章后面介绍的控制器、指令、过滤器和服务组件
时，必须指明其所属的模块系统（Angular自带的核心组件除外）。
(cid:2) 使用依赖注入：尽管服务组件是普通的JavaScript对象或函数，但为了不污染整体命
名空间，这些服务不是定义在全局空间上，而是需要声明了对其的依赖，才能在其他
模块中使用它们。
55
Ionic移动开发入门与实战（第2版）
3.2.4 Angular 实现了声明式界面
使用 Angular 框架标准的 Web 页面最显著的特点是它们表面上都是多了一些特别的属性
tag（如：ngFor、ngIf、ngClass等）的静态HTML文档，却能具有动态行为能力。
在Angular中，这类HTML文件被称为模板，而ng-app这类标记被称之为指令。模板通
过指令指示Angular进行必要的操作。比如：ng-app指令就被用来通知Angular自动引导一个
Angular应用。
当Angular启动应用时，它会通过一个编译器解析处理这个模板文件，生成的结果就是图
3.1里的视图部分。
3.2.5 Angular 实现了双向数据绑定
目前市面上大多数的前端框架或库在数据模型和视图之间实现的都是单向数据绑定，而双
向数据绑定是Angular较有特色之处。
图 3.5 中左边的模型图显示了单向数据绑定的常用模式，即数据模型与 HTML 模板结合
生成了一次性的视图，数据流是单向的。而图3.5中右边的模型图显示的视图与模型之间是有
相互交互机制的，从而使视图与模型互相形成数据成为可能，所以称之为双向数据绑定。而这
个交互机制就是通过图3.4中的视图模型来完成的。

图3.5 单向数据绑定与双向数据绑定区别
那么为什么需要双向数据绑定呢？它的意义在于给开发人员带来便利性和减少了烦琐易
错的手工编写两层之间数据同步的工作量：
(cid:2) 用户通过视图里的控件调整了语言配置、调整了夜间模式、输入了数据项，这些行为
可以用几乎自动的方式来更新到数据模型。
(cid:2) 当数据模型变化了，比如地理位置变化了、网络情况变化了、同步/异步推送的数据
流变化了（比如实时聊天类应用）、被其他视图的输入改变了，所有视图都能几乎自
动地持续反应数据模型的变化。
请注意上面两段话里都出现的几乎自动这四个字，它使设计人员和开发人员的任务分离成
为可能。也正因为有这个便利性为 Angular 带来的成功，使后续出现的 Vue.js、ReactJS 等前
端框架，在是否支持以及如何支持双向数据绑定上都面临一个艰难的决定（实现双向数据绑定
56
第3章 Angular入门初步
也会带来一系列副作用，这就不属于本书讨论的范围了）。
本章前面的各节概念很多，初学者容易产生能看懂文本里的每个词，但却不知道实现一个
Angular 功能页面到底该如何去做。产生这种盲人摸象的现象这并不奇怪，毕竟 Angular
框架的运行时底层依照设计时的强制约定默默做了很多台面底下的工作才把这些概念和
组件紧密整合到一起。因此笔者建议读者可以强忍烦闷先粗略浏览一遍3.1节至3.5节对
概念形成初步印象，然后通过阅读分析3.6节给出的一个完整的Angular范例代码，再回
头查看前面印象模糊的部分小节的说明。经过一到两次的反复理解过程，就能上手编写基
于Angular框架的应用了。
3.3
模块与依赖注入
在图3.4的Angular应用的概要组件图中没有出现模块的字样，然而这不代表它没出现在
图里。实际上图中的指令、服务、控制器都是定义在Angular的模块里。读者从图3.6展现的
图中可以看到所有类型的Angular组件都是归属于作为容器的某个模块的。
Module
Directive Controller Provider Config Run
Factory
Filter
Service
Const
Value

图3.6 Angular模块与组件定义关系
自然地，如果要会使用Angular，就需要解决两个问题：如何在模块里创建组件以及如何
使用其他模块里的组件。下文的3.3.1和3.3.2节将分别回答这两个问题。
3.3.1 根模块
Angular 或者 Ionic 新建的项目，都会存在一个根模块，默认名是 AppModule。如果你使
用了模块化来创建应用，包括AppModule，每个都会存在一个@NgModule装饰器的类（虽然
他很像 Java 中的注解，但是他的官方命名叫装饰器）。我们新建的页面，如果不使用懒加载，
57
Ionic移动开发入门与实战（第2版）
都要在@NgModule中先声明后使用。
下面举个例子，简单介绍一下@NgModule中的内容：
//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 { }
(cid:2) Imports：本模块声明的组件模板需要的类所在的其他模块。
(cid:2) Providers：服务的创建者，并加入到全局服务列表中，可用于应用任何部分。
(cid:2) Declarations：声明本模块中拥有的视图类。Angular有三种视图类：组件、指令和管道。
(cid:2) Exports：declarations的子集，可用于其他模块的组件模板。
(cid:2) Bootstrap：指定应用的主视图（称为根组件），它是所有其他视图的宿主。只有根模
块才能设置bootstrap属性。
3.3.2 使用模块与组件依赖注入
依赖注入是提供类的新实例的一种方式，还负责处理类所需的全部依赖。大多数依赖都是
服务。Angular使用依赖注入来提供新组件以及组件所需的服务。
比如我们要给某组件导入HttpService这个服务，看这段代码：
constructor(private service: HttpService) {
...
}

这个constructor就是构造函数，依赖注入在 constructor 中进行。你也许会觉得前面写上
private、public之类的很怪，这是TypeScript语法比较特殊，习惯就好。
当 Angular 创建组件时，会首先为组件所需的服务请求一个注入器 injector。我们必须先
用注入器injector为HttpService注册一个提供商provider。
我们必须在providers写上才能用，看这段代码：
@Component({
selector: 'some-list',
templateUrl: './some-list.component.html',
providers: [ HttpService]
})
58
第3章 Angular入门初步
3.4
组件与模板
组件是一个模板的控制类用于处理应用和逻辑页面的视图部分。组件是构成
Angular 应用的基础和核心，可用于整个应用程序中。组件知道如何渲染自己及配置依
赖注入。组件通过一些由属性和方法组成的 API 与视图交互。模板则是使用我们熟悉的
HTML语言。
在Angular中HTML语法大都可以使用，除了<script>元素以外。它被禁用主要是防止脚
本注入。详细内容笔者建议直接参考官方文档的说明（https://angular.cn/guide/security）
3.4.1 Angular 中的组件
组件是一个装饰器，他能接受一个配置对象， Angular 会基于这些信息创建和展示组件
及其视图。看这段代码：
@Component({
selector: 'some-list',
templateUrl: './some-list.component.html',
providers: [ SomeService ]
})
export class SomeListComponent implements OnInit {
/* . . . */
}
(cid:2) selector：CSS 选择器，它告诉 Angular 在父级 HTML 中查找<some-list>标签，创建
并插入该组件。
(cid:2) templateUrl：组件HTML模板的模块相对地址，如果使用template来写的话是用“`”
这个符号来直接编写HTML代码。
(cid:2) providers：组件所需服务的依赖注入。
3.4.2 Angular 中的模板和元数据
模板就是那段HTML代码，可以用templateUrl引入外面的，也可以用template``直接写在.ts
文件中。我们可以通过使用模板来定义组件的视图来告诉Angular如何显示组件。以下是一个
59
Ionic移动开发入门与实战（第2版）
简单是实例：
<div>
姓名 : {{name}}
</div>
在Angular中，默认使用的是双大括号作为插值语法，大括号中间的值通常是一个组件属
性的变量名。元数据装饰器用类似的方式来指导 Angular 的行为。例如@Input、@Output、
@Injectable等是一些最常用的装饰器。
3.5
指令与服务
Angular的指令（Directive）组件与过滤器（Filter）组件的主要使用场景都是在HTML页
面视图里。这两种组件与其他Angular组件一样，都是在代码模块Module内定义，只不过它
们的实例可以通过 Angular 框架在解析 HTML 页面视图时自动创建。因为它们都对作用域对
象在页面展现有影响，本节将介绍它们的一些基本知识。
3.5.1 指令是什么
在3.3.2节，我们已经提前接触体验过Angular框架内置的指令了。Angular建立了一套完
整、可扩展、用来帮助Web应用开发的指令集机制，它使得HTML可以转变成“特定领域语
言(DSL)”，是用来扩展浏览器能力的技术之一。在DOM编译期间，和HTML关联着的指令
会被Angular框架的编译器检测到，并且被调用执行。这种机制使得指令可以为DOM指定扩
展行为，或者改变HTML原有组件的默认行为。
指令的实质是“当关联的 HTML 结构进入编译阶段时应该执行的操作”，它只是一个当
编译器编译到相关 DOM 时需要执行的函数，可以被写在 HTML 元素的名称、属性、CSS 类
名和注释里（后两种形式的指令出现和应用较稀少）。
Angular 通过称为指令属性来扩展的 HTML 控件属性，其属性名称带有前缀 ng，它的实
质是绑定在DOM元素上的函数。在该函数内部可以操作DOM、调用方法、定义行为、绑定
控制器等。当浏览器启动、开始解析HTML时，DOM元素上的指令属性就会跟其他属性一样
被解析，也就是说当一个Angular应用启动，Angular编译器就会遍历DOM树来解析HTML，
寻找这些指令属性函数，在一个DOM元素上找到一个或多个这样的指令属性函数，它们就会
被收集起来、排序，然后按照优先级顺序被执行。Angular应用的动态性和响应能力，都要归
功于指令属性。比较常见的有：ngIf、ngFor，此外其他的如ngClass、ngStyle、ngSwitch等多
个指令。本书将在它们第一次出现的位置结合示例代码解释其作用。
60