Angular 将服务器端开发领域的一些最佳实践用于增强浏览器中的HTML,为更加简便地构建富应用程序(rich
application)打下良好基础。Angular 应用程序围绕模型-视图-控制器(Model-View-Controller,MVC)设计模式构建,该
模式的重点在于创建具有如下特点的应用程序:
● 可扩展:一旦理解Angular 的基本原理,即便是复杂的Angular 应用程序,也很容易弄明白其运行方式,而
这意味着可以轻易地改进应用程序,为用户创建新的有用功能。
● 可维护:Angular 应用程序易于调试和修复,这意味着长期维护工作得以简化。
● 可测试:Angular 对单元测试和端到端测试的支持都非常好,这意味着可以先于用户发现并修复缺陷。
● 兼容标准:Angular 建立在Web 浏览器的固有功能上,但是它能实现的功能并未受到这些固有功能的限制,
而是能够创建可兼容标准的Web 应用程序,能够利用最新功能(如HTML5 API)和流行的工具与框架。
Angular 是由Google 赞助和维护的开源JavaScript 库。它已用于一些最大和最复杂的Web 应用程序。本书将展
示在自己的项目中充分利用Angular 所需要知道的一切。
1.1 需要了解什么
在阅读本书之前,读者应该熟悉Web 开发的基础知识,了解HTML 和CSS 的工作原理,最好熟悉JavaScript。
如果对这些细节不是非常清楚,那么本书将在第4~6 章中温习一下如何使用HTML、CSS 和JavaScript。但是本书
不会给出HTML 元素和CSS 属性的全面参考。一本关于Angular 的书不可能涵盖HTML 的方方面面。
1.2 本书结构
本书分为三个部分,每部分涵盖一组相关的主题。
1.2.1 第Ⅰ部分:Angular 基础知识
本书的第Ⅰ部分为阅读本书其余部分提供了准备信息。它包括本章内容,回顾了一些关键技术的基本知识,包
括HTML、CSS 和TypeScript(JavaScript 的一个超集,用于Angular 开发)。这部分还将展示如何构建第一个Angular
应用程序,并引导完成构建更真实的应用程序(名为SportsStore)的过程。
1.2.2 第Ⅱ部分:Angular 详解
本书的第Ⅱ部分介绍Angular 为构建应用程序提供的构造块,依次描述所有这些构造块。Angular 包含很多内置
的功能,这部分将深入描述这些功能,此外Angular 还提供丰富的自定义选项,而这部分也将展示所有这些功能。
1.2.3 第Ⅲ部分:Angular 高级功能
本书的第Ⅲ部分介绍如何使用高级功能来创建更复杂、可扩展的应用程序。这部分演示如何在Angular 应用程
序中进行异步HTTP 请求,如何使用URL 路由在应用程序中导航,以及在应用程序的状态发生变化时如何使HTML
元素具有动画效果。
1.3 大量示例
本书包含大量示例。学习Angular 的最好方法就是通过示例,本书将尽可能多的示例打包进来。为使本书中的
示例尽可能多,本书采用一个简单的约定来避免反复地列出文件的内容。当在某一章中首次使用一个文件时,将列
出该文件的完整内容,如代码清单1-1 所示。代码清单的标题中将包含文件的名称,以及应该在哪个文件夹中创建
该文件。更改代码时,将以粗体显示修改过的语句。
代码清单1-1 完整的示例文档
import { NgModule } from "@angular/core";
import { BrowserModule } from "@angular/platform-browser";
import { ProductComponent } from "./component";
import { FormsModule, ReactiveFormsModule } from "@angular/forms";
import { PaAttrDirective } from "./attr.directive";
@NgModule({
imports: [BrowserModule, FormsModule, ReactiveFormsModule],
declarations: [ProductComponent, PaAttrDirective],
bootstrap: [ProductComponent]
})
export class AppModule { }
代码清单1-1 摘自第15 章。这里暂不关注它的具体作用,只需要注意,这是一个完整清单,显示了文件的所有
内容。对同一个文件进行一系列修改,或对大文件进行较小修改时,只展示发生改变的元素,以创建部分代码清单。
部分代码清单的特征就是以英文省略号(...)开始和结尾,如代码清单1-2 所示。
代码清单1-2 部分代码清单
...
Name | Category | Price | |
---|---|---|---|
{{i + 1}} | {{item.name}} | {{item.category}} | {{item.price}} |
第2 章
第一个Angular 应用程序
开始使用Angular 的最佳方式就是动手创建一个Web 应用程序。本章将展示如何搭建开发环境,并解释创建基
本Web 应用程序的过程:从静态的功能模拟开始,然后使用Angular 功能创建一个简单的动态Web 应用程序。在第
7~10 章中,将展示如何创建一个更复杂、更真实的Angular 应用程序,但现在只需要一个简单的例子就足以演示
Angular 应用程序的主要组成部分,并为本书这部分的其他章搭建好开发环境。
如果未能理解本章的所有内容,也不必担心。Angular 的学习曲线比较陡峭,因此本章的目的只是介绍Angular
开发的基本流程,以了解各个部分之间的关系。虽然现在不会立即明白这些方面,但是当读完这本书时,就会明白
本章讲解的每个步骤以及其他方面。
2.1 准备开发环境
要进行Angular 开发,就需要做一些准备工作。下面的几节将介绍如何设置并准备好创建第一个项目。很多流
行的开发工具都对Angular 提供了很好的支持,因此可以选择自己最喜欢的一款开发工具。
2.1.1 安装Node.js
许多用于Angular 开发的工具都依赖Node.js(也称为Node),Node.js 创建于2009 年,为采用JavaScript 编写服
务器端应用程序提供了一个简单而高效的运行库。Node.js 基于Chrome 浏览器中使用的JavaScript 引擎,提供了一
个在浏览器环境之外执行JavaScript 代码的API。
虽然作为一款应用程序服务器,Node.js 已经取得了成功,但是本书之所以提到Node.js,是因为它为新一代跨
平台开发和构建工具提供了基础。由于Node.js 团队做出的一些精妙的设计决策以及Chrome JavaScript 运行库提供
的跨平台支持,人们发现它可用来编写开发工具。简而言之,Node.js 已经成为Web 应用程序开发的必备工具。
务必确保下载的Node.js 版本与本书中使用的相同。尽管Node.js 相对稳定,但是API 仍然会不时地发生重大变
更,这样可能会导致本书中的示例无法正常运行。
本书使用的版本是8.11.3,这是本书写作时的长期支持(Long Term Support,LTS)版本。当阅读本书时,Node.js
可能会有更新的版本,但是为了正常运行本书中的例子,应该坚持使用8.11.3 版本。可从https://nodejs.org/dist/v8.11.3
获取8.11.3 版本的完整系列,包括针对Windows 和macOS 的安装程序以及针对其他平台的二进制软件包。
安装Node.js 时,务必选择正确的选项,将Node.js 可执行文件添加到路径(Path 环境变量)中。安装完成后,运
行以下命令:
node -v
如果安装过程按照预期进行,就会显示以下版本号:
V8.11.3
Node.js 安装程序包含了Node 包管理器(Node Package Manager,NPM),用于管理项目中的包。运行以下命令以
确保NPM 正常工作:
npm -v如果一切正常工作,就会看到以下版本号:
5.6.0
2.1.2 安装angular-cli 包
angular-cli 包已经成为开发过程中创建和管理Angular 项目的标准方法。本书的第1 版演示了如何从头开始搭建
Angular 项目,这是一个冗长且容易出错的过程,而angular-cli 简化了这个过程。要安装angular-cli 包,请打开一个
新的命令提示符并运行以下命令:
npm install --global @angular/[email protected]
注意,global 参数前有两个连字符。如果使用Linux 或macOS,则需要使用sudo,如下所示:
sudo npm install --global @angular/[email protected]
2.1.3 安装Git
需要Git 版本控制工具来管理Angular 开发所需的一些软件包。如果正在使用Windows 或macOS,请从
https://git-scm.com/downloads 下载并运行安装程序。在macOS 上,可能需要更改安全设置,才能打开尚未由开发者
签署的安装程序。
大多数Linux 发行版已经安装了Git。如果要安装最新版本,请访问https://git-scm.com/download/linux,了解发
行版的安装说明。例如,对于Ubuntu(这是我使用的Linux 发行版),使用以下命令:
sudo apt-get install git
完成安装后,打开一个新的命令提示符,运行以下命令,来检查Git 是否已安装并可用:
git --version
此命令输出已安装的Git 软件包的版本。在撰写本书时,Git for Windows 和Git for Linux 的最新版本为2.17,
Git for macOS 的最新版本为2.16.3。
2.1.4 安装编辑器
由于程序员使用的任何编辑器都可以用于从事Angular 开发,因此可供选择的编辑器非常多。有些编辑器对
Angular 提供增强的支持,包括关键字高亮显示和良好的工具集成。如果还没有确定Web 应用程序开发的首选编辑
器,那么表2-1 介绍了一些常见选项,以供参考。本书并不依赖任何具体的编辑器,你应该使用自己喜欢的编辑器。
表2-1 支持Angular 开发的常见编辑器
名称 描述
Sublime Text Sublime Text 是一款商业跨平台编辑器,借助软件包可支持大多数编程语言、框架和平台。详见
www.sublimetext.com
Atom Atom 是一款免费、开源的跨平台编辑器,特别强调自定义和可扩展性。详见atom.io
Brackets Brackets 是由Adobe 开发的免费开源编辑器。详见bracket.io
WebStorm WebStorm 是一款付费的跨平台编辑器,集成了许多工具,开发者不必在开发过程中使用命令行。详见
www.jetbrains.com/webstorm
Visual Studio Code 是微软提供的开源的、跨平台编辑器,重点强调可扩展性,详见code.visualstudio.com
Visual Studio Visual Studio 是微软的旗舰开发工具。有免费的和商业的版本可供使用,它还附带了许多与Microsoft 生
态系统集成的工具
在选择编辑器时,最重要的考虑之一是能够过滤项目的内容,以便专注于一部分文件。Angular 项目可能有很
多文件,许多文件都有相似的名称,因此能够查找和编辑正确的文件至关重要。编辑器可以通过不同的方式实现这种聚焦功能,具体方法有两种:显示文件列表,可以打开这些文件进行编辑;或者将具有特定扩展名的文件排除
在外。
2.1.5 安装浏览器
最后一项选择是浏览器,在开发过程中需要使用浏览器检查代码是否按照预期运行。所有最新的浏览器都为开
发者提供了良好的支持,并能很好地运行Angular。本书一直使用谷歌Chrome,这也是推荐使用的浏览器。
2.2 创建并准备项目
在安装Node.js、angular-cli、编辑器和浏览器之后,就具备了开始开发之旅的基础。
2.2.1 创建项目
要创建项目,请选择一个方便的位置,并使用命令提示符来运行以下命令,以创建一个名为todo 的新项目:
ng new todo
可在以上命令的末尾加上--default 参数,以便使用默认配置创建项目。ng 命令由angular-cli 包提供,ng new 启
动一个新项目。在安装过程中将创建一个名为todo 的文件夹,其中包含启动Angular 开发所需的所有配置文件,启
动开发的一些占位符文件以及开发、运行和部署Angular 应用程序所需的NPM 软件包。NPM 软件包的数量非常多,
这意味着项目的创建可能需要一段时间。
2.2.2 添加Bootstrap CSS 包
ng new 命令创建的项目几乎包含了本章所需的所有内容。但没有包含Bootstrap CSS 包,本书使用它来样式化
HTML 内容。运行以下命令,导航到ng new 命令创建的todo 文件夹,并将Bootstrap 包添加到项目中:
cd todo
npm install [email protected]
要配置Angular 开发工具来使用Bootstrap CSS 文件,请将代码清单2-1 所示的条目添加到angular.json 文件的styles部分,该文件在创建项目时由ng new 命令添加到todo 文件夹。
代码清单2-1 在todo 文件夹的angular.json 文件中配置CSS
...
{
"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
"version": 1,
"newProjectRoot": "projects",
"projects": {
"todo": {
"root": "",
"sourceRoot": "src",
"projectType": "application",
"prefix": "app",
"schematics": {},
"architect": {
"build": {
"builder": "@angular-devkit/build-angular:browser",
"options": {
"outputPath": "dist/todo",
"index": "src/index.html",
"main": "src/main.ts",
"polyfills": "src/polyfills.ts",
"tsConfig": "src/tsconfig.app.json",
"assets": [
"src/favicon.ico",
"src/assets"
],
"styles": [
"src/styles.css","node_modules/bootstrap/dist/css/bootstrap.min.css"
],
"scripts": []
},
...
如第11 章所述,angular.json 文件用于配置项目工具,代码清单中显示的语句将Bootstrap CSS 文件合并到项目
中,以便将其包含在发送到浏览器的内容中。
2.2.3 启动开发工具
一切就绪,现在是测试Angular 开发工具的时候了。在todo 文件夹中运行以下命令:
ng serve --port 3000 --open
该命令启动Angular 开发工具,这些工具会执行一个初始的构建过程,为开发会话准备应用程序。这个过程需
要一些时间,输出如下:
** Angular Live Development Server is listening on localhost:3000, open your browser on
http://localhost:3000/ **
Hash: ebb64e6046efff317389
Time: 6767ms
chunk {main} main.js, main.js.map (main) 10.8 kB [initial] [rendered]
chunk {polyfills} polyfills.js, polyfills.js.map (polyfills) 227 kB [initial] [rendered]
chunk {runtime} runtime.js, runtime.js.map (runtime) 5.22 kB [entry] [rendered]
chunk {styles} styles.js, styles.js.map (styles) 15.7 kB [initial] [rendered]
chunk {vendor} vendor.js, vendor.js.map (vendor) 3.06 MB [initial] [rendered]
[wdm]: Compiled successfully.
如果输出略微不同,只要在准备工作完成后看到“compiled successfully”消息,就不必担心。几秒钟后,将启
动一个新的浏览器窗口,如图2-1 所示,其中显示了创建项目时添加到项目中的占位符内容。
图2-1 HTML 占位符内容
2.2.4 编辑HTML 文件
下面首先删除项目创建时添加到项目中的占位符内容,这样就可以从包含静态内容的HTML 文件开始,稍后使
用Angular 对其进行增强。编辑todo/src 文件夹中的index.html 文件,将内容替换为代码清单2-2 所示的内容。
代码清单2-2 src 文件夹中的index.html 文件的内容
Description | Done |
---|---|
Buy Flowers | No |
Get Shoes | No |
Collect Tickets | Yes |
Call Joe | No |
图2-2 编辑HTML 文件的内容
■ 提示:
更改一系列文件时,有时候浏览器可能无法加载和执行示例应用程序,特别是在运行后续章节中更复杂示例的
情况下。大多数情况下,HTTP 开发服务器都能触发浏览器的重新加载,一切都会很正常,但是如果真的遇到问题,
可能需要手动执行浏览器的重新加载。
index.html 文件中的HTML 元素展示了本章中创建的简单Angular 应用程序的外观。关键要素是显示用户名的
横幅、input 元素、用来添加新的待办事项的Add 按钮,以及包含所有待办事项并指示是否已完成的表格。
本书使用优秀的Bootstrap CSS 框架来为HTML 内容提供样式。Bootstrap 通过为元素指派CSS 类来应用样式,如下所示:
...
代码清单2-3 准备在scr 文件夹的index.html 文件中添加Angular
图2-4 示例应用程序中的简单Angular 功能
使用angular-cli 创建项目的一个好处是不必担心创建Angular 应用程序所需的基本文件,而缺点是跳过这些文件
意味着会错过一些值得探索的重要细节。
Angular 应用程序需要模块(module)。由于命名选择的缘故,Angular 开发中使用了两种类型的模块。JavaScript
模块是包含JavaScript 功能(通过import 关键字使用该功能,参见第6 章)的文件。另一种类型的模块是Angular 模块,
它用于描述应用程序或一组相关功能。每个应用程序都有一个根模块(root module),它为Angular 提供启动应用程序
所需的信息。
当angular-cli 设置项目时,它在todo/src/app 文件夹中创建了一个名为app.module.ts 的文件(这是根模块的常用文
件名),并添加了如代码清单2-8 所示的代码。
代码清单2-8 src/app 文件夹中app.module.ts 文件的默认内容
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
@NgModule({
declarations: [AppComponent],
imports: [BrowserModule],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
Angular 模块的目的是通过@NgModule 装饰器定义的属性来提供配置信息。第21 章将详细解释模块的工作原
理,但目前只需要知道,装饰器的imports 属性告诉Angular,该应用程序将在浏览器中运行,需要导入所需的相关
功能,declarations 和bootstrap 属性告诉Angular 关于应用程序中的所有组件,以及应该使用哪个组件来启动应用程
序(在这个简单示例应用程序中只有一个组件,因此它是这两个属性的唯一值)。
要创建待办事项应用程序,需要使用Angular的特性来处理表单元素,这些元素是在名为@angular/forms的
Angular模块中定义的。为启用这些功能,需要修改app.module.ts文件,如代码清单2-9所示。
代码清单2-9 在src/app 文件的app.module.ts 文件中启用表单支持
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from "@angular/forms";
import { AppComponent } from './app.component';
@NgModule({
declarations: [AppComponent],imports: [BrowserModule, FormsModule],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
Angular 应用程序还需要一个引导文件,其中包含启动应用程序所需的代码。引导文件名为main.ts,它在todo/src
文件夹中创建,其代码如代码清单2-10 所示。本章的main.ts 文件不需要修改。
代码清单2-10 src 文件夹中main.ts 文件的内容
import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app/app.module';
import { environment } from './environments/environment';
if (environment.production) {
enableProdMode();
}
platformBrowserDynamic().bootstrapModule(AppModule)
.catch(err => console.log(err));
虽然本书着重于在Web 浏览器中运行的应用程序,但Angular 旨在运行于各种环境中。引导文件中的代码选择
要使用的平台,并加载根模块,这是应用程序的入口。
■ 提示:
调用platformBrowserDynamic( ).bootstrapModule 方法适合基于浏览器的应用程序,浏览器平台是本书的重点。
如果正在使用不同的平台(例如Ionic 移动开发框架),就必须使用所用平台特有的不同引导方法。支持Angular 的每
个平台的开发人员都提供了平台特有的引导方法的详细信息。
浏览器执行引导文件中的代码,这会调用Angular,后者又处理HTML 文档并发现todo-app 元素。用于定义组
件的selector 属性匹配到todo-app 元素,这让Angular 删除占位符内容,并将其替换为组件模板(从app.component.html
文件自动加载)。模板经过解析,发现了{{和}}数据绑定,并对其中包含的表达式求值,调用getName 方法并显示图
中所示的结果。虽然这个结果可能不会给人留下深刻印象,但这是一个良好开端,它为添加更多功能提供了基础。
■ 提示:
在任何Angular 项目中,都必须耗费一段时间来定义应用程序的主要部分,并将它们有机地组织起来。在这段
时间里,可能会感觉到自己在做很多工作,但是很少有回报。但可以肯定的是,这种初期投入最终会得到应有的回
报。当开始构建更加复杂的实际Angular 应用程序(如第7 章中的更大示例)时,可以看出:虽然需要大量的初始设置
和配置,但是随后就可以快速实现所需的功能。
节选自《Angular 高级编程(第3 版)》第一章
《Angular 高级编程(第3 版)》试读电子书,免费提供,有需要的留下邮箱,一有空即发送给大家。邮箱留到微信回复更快(邮箱地址+试读书名),别忘啦顶哦!
微信:qinghuashuyou
更多最新图书请点击查看哦(即日起:关注@qinghuashuyou 发送:关注技术方向,不定时有新书上新,参与互动即有机会获得推广新书样书)