第1 章

■ ■ ■

准 备 工 作

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 的方方面面提供篇幅。如果需要HTML和CSS 的完整参考，那么推荐阅读我的另一本书The Definitive Guide to HTML5，它也是由Apress 出版社出版的。

1.2 本书结构

本书分为三个部分，每部分涵盖一组相关的主题。Angular 5 高级编程(第2 版)

1.2.1 第1 部分：准备

本书第1 部分为阅读本书其余部分提供了准备信息。它包括本章内容，回顾了一些关键技术的基本知识，包括HTML、CSS 和TypeScript(JavaScript 的一个超集)。这部分还将展示如何构建第一个Angular 应用程序，并引导完成构建更真实的应用程序(名为SportsStore)的过程。

1.2.2 第2 部分：使用Angular

本书的第2 部分将介绍Angular 为构建应用程序所提供的构造块，依次描述所有这些构造块。Angular 包含了很多内置的功能，这部分将深入描述这些功能，此外Angular 还提供丰富的自定义选项，而这部分也将展示所有这些功能。

1.2.3 第3 部分：Angular 的高级功能

本书第3 部分介绍如何使用高级功能来创建更复杂和可扩展的应用程序。这部分介绍Reactive Extensions 软件包，Angular 提供的大量功能均构建在这个软件包的基础之上，并且有多种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]

第1 章 ■ 准 备 工 作

3

})

export class AppModule { }

这个代码清单摘自第15 章。这里暂不关注它的具体作用，只需要注意，在每章中第一次用到的文件将完整列出，类似于代码清单1-1 所示。对于第二次及以后出现的其他示例，只展示发生改变的元素，以创建部分代码清单。部分代码清单的特征就是以英文省略号(...)开始和结尾，如代码清单1-2 所示。

代码清单1-2 部分代码清单

…

<table class="table table-sm table-bordered table-striped">

<tr><th></th><th>Name</th><th>Category</th><th>Price</th></tr>

<tr *ngFor="let item of getProducts(); let i = index"

[pa-attr]="getProducts().length < 6 ? 'bg-success' : 'bg-warning'">

<td>{{i + 1}}</td>

<td>{{item.name}}</td>

<td [pa-attr]="item.category == 'Soccer' ? 'bg-info' : null">

{{item.category}}

</td>

<td [pa-attr]="'bg-info'">{{item.price}}</td>

</tr>

</table>

…

代码清单1-2 也是摘自第15 章的后续代码清单。可以看到这里只显示了table 元素及其内容，并且突出显示了一些语句。希望借此引起读者的注意，关注示例的这一部分，以说明所描述的功能或技术。在这样的部分代码清单中，仅给出本章前面完整代码清单中发生了更改的那部分代码。在某些情况下，需要对同一个文件的不同部分进行更改，此时为了简洁起见，需要省略一些元素或语句，如代码清单1-3 所示。

代码清单1-3 为简洁起见而省略部分语句

import { ApplicationRef, Component } from "@angular/core";

import { Model } from "./repository.model";

import { Product } from "./product.model";

import { ProductFormGroup } from "./form.model";

@Component({

selector: "app",

templateUrl: "app/template.html"

})

export class ProductComponent {

model: Model = new Model();

form: ProductFormGroup = new ProductFormGroup();

// ...other members omitted for brevity...

showTable: boolean = true;

}

虽然利用这个约定，可以在本书中放入更多的示例，但是这也意味着很难定位某项特定技术。为此，在第2 部分和第3 部分中描述Angular 特性的所有章都从一个内容摘要表格开始，描述该章包含的技术以及演示如何使用它们的代码清单。

1.4 获取示例代码

可以从www.apress.com 下载本书所有章的示例项目，也可以通过扫描本书封底的二维码来获得。这些示例项目可以免费下载，并且包含用来重新创建示例所需的所有支持资源，这样就不必辛苦敲入这些代码。虽然不是一定要下载这些代码，但这些代码是对示例进行实验并将其剪切和粘贴到自己的项目中的最简单方法。

1.5 如何搭建开发环境

第2 章通过创建一个简单的应用程序来介绍Angular，在介绍过程中，将说明如何建立使用Angular 的开发环境。

1.6 联系作者

如果在运行本章中示例代码的过程中遇到问题，或者发现书中存在问题，请发电子邮件到adam@adam-freeman.com，我将竭尽所能提供帮助。

1.7 本章小结

本章概述了本书的内容和结构。学习Angular 开发的最佳方法就是通过示例，因此，下一章将直奔主题，展示如何设置开发环境，并使用该开发环境创建第一个Angular 应用程序。

节选自《Angular 5 高级编程(第2版)》第一章

《Angular 5 高级编程(第2版)》试读电子书，免费提供，有需要的留下邮箱，一有空即发送给大家。邮箱留到微信回复更快（邮箱地址+试读书名），别忘啦顶哦！

微信：qinghuashuyou  

更多最新图书请点击查看哦（即日起-5月31日：关注@qinghuashuyou 发送：关注技术方向，即有机会参与图书抽奖，每周抽取十个幸运读者）