Angular开发入门与实战

全栈开发

Angular开发入门与实战

兰泽军 著

人民邮电出版社

北京

图书在版编目（CIP）数据

Angular开发入门与实战/兰泽军著.--北京：人民邮电出版社，2021.5

ISBN 978-7-115-56108-4

Ⅰ. ①A… Ⅱ. ①兰…Ⅲ.①超文本标记语言―程序设计 Ⅳ. ①TP312

中国版本图书馆CIP数据核字（2021）第042690号

定价：79.00元

读者服务热线：(010)81055410　印装质量热线：(010)81055316

反盗版热线：(010)81055315

广告经营许可证：京东市监广登字20170147号

前言

Angular由谷歌公司开发并提供技术支持，是一个用于构建用户界面的前端开源框架。学习Angular对初学者来说有些难度，对长期从事后端开发的初学者来说尤其如此。虽然Angular官方的入门教程（官方文档）涵盖了基础知识，但初学者始终不清楚该如何用Angular来开发一个完整的Web应用程序。事实上，官方文档仅用于演示并尽可能快速地突出显示尽可能多的功能。官方文档非常适合展示Angular可以做什么，但在教初学者如何开发Web应用程序方面效果并不是那么好。

本书将带领读者学习如何使用Angular开发Web应用程序，同时书中的大量示例代码能帮助读者快速从初学者升级为实践者。

本书特色

1.读者不必具有前端开发基础

本书假设读者之前不了解Angular，或者一直是从事Java开发的，从来没有接触过前端框架。本书就是专门为上述读者准备的，它从外围知识着手，每一章、每一个示例以及每一段代码都经过精心的设计和挑选，以使读者能快速掌握Angular的实践技能。

2.知识点全面

本书所有的示例都基于Angular 9开发，一些示例甚至填补了官方文档的空白。

3.章节安排合理

本书结合笔者多年学习新技术的经验，采用由浅入深的方式编排而成。相信在学完本书后，读者可以很好地胜任Angular项目组的开发角色。

4.示例设计专注解惑

为了减少读者学习本书的时间，书中的每个示例都是独立的，读者可以专注于某一个示例来学习。当读者在工作或学习中遇到问题时，可以直接到书中寻找对应的解决方案。

兰泽军

2020年6月于武汉光谷

推荐语

《Stack Overflow 2019年开发者调查》指出，JavaScript连续7年成为用户最常用的编程语言之一，且其自身不断发展，目前，TypeScript正在引领JavaScript的发展方向。Angular、React、Express和LoopBack等框架可以帮助JavaScript开发者开发前端和后端Web应用程序，相应的生态系统正在扩展和融合。2019年3月，JS基金会的成员投票决定与Node.js基金会合并，组建OpenJS基金会，为关键的JavaScript生态系统项目的开展创建一个单一且中立的“家园”。

对开发者来说，目前前端开发和后端开发之间的界限变得模糊，全栈开发不仅可行而且也是可取的。前端开发者现在可以轻松创建简单的应用程序接口（API）并由服务器呈现。后端开发者需要了解前端开发者的设计思想，以便更好地公开API，以更加方便地响应来自客户端的请求。我们看到前端和后端之间有很好的结合，双方都采用了TypeScript与Dependency Injection等技术和设计模式。

作者希望通过本书帮助读者积累丰富的全栈开发经验。看到他基于现代Web开发的典型场景讲述了一个十分吸引人的故事，并逐步为全栈开发引入关键的技术，我感到惊讶。相信读者一定能感受到作者的努力和热情，欣赏他的经验分享和专业知识，这将使读者的学习旅程更愉快。

Raymond Feng

IBM架构师

如今IT技术正在马不停蹄地向前发展，技术门槛也越来越低，原本需要几百行代码解决的问题，如今只需要几行代码就可以轻松搞定。同时，由于人力成本越来越高，人们赋予工程师的职责也越来越多。在此大背景下，全栈工程师更是供不应求。

学好前端是成为全栈工程师的必经之路，但是学好前端并不是一件很容易的事情。特别是对后端开发者，由于思维定式，他们有时很难理解前端的思考方式和思维模式，这造成了一些学习上的困难和障碍。本书作者选择了当下流行的前端框架Angular，因为他自己是一名成功地从后端工程师转型为全栈工程师的技术“大咖”，所以他很清楚后端开发者学习前端的一些短板。他站在后端工程师的角度，通过类比，将理论和实践相结合，以循序渐进的方式完美地诠释了Angular。本书易读、易懂、易上手，读完后让人茅塞顿开、豁然开朗。希望本书能成为读者学习Angular的一盏指路明灯。

叶飞

IBM云计算专家

随着“前端世界”的蓬勃发展，各种框架和类库日新月异、层出不穷：Angular、React、Vue.js、Node.js、ES6、TypeScript等，令人眼花缭乱。面对众多的框架和类库，前端开发者可能感到痛苦：哪种框架容易上手？它们是否易维护，是否可扩展？它们的发展前景可好？这些框架和类库是否存在设计上的难题，这些难题能否解决？这些都值得思考。本书作者作为具有丰富Web应用程序开发经验的开发者，选择了当下流行的前端框架Angular，从Angular入手，让读者可以直接使用当下较新的Angular更加高效和便捷地进行Web应用程序开发。

本书作者结合自己多年的开发经验，用通俗的讲解、丰富的实战示例、层层递进的篇章结构，给希望从事前端开发工作的初学者指出了一条明路。本书从零开始，让初学者可以快速上手；特别是贴近实际生产环境的示例，有很高的应用价值和参考性。全书的知识体系由浅入深，一步一步演绎着前端开发实战过程。本书对Angular概念和技术细节的全面剖析，结合了作者的实战开发经验，将帮助具有相关经验的读者彻底掌握这个框架，在自己的职业道路上更进一步。

耿天琦

IBM程序员（技术转型成功者）

第1篇 准备篇

本篇是为初学者准备的，内容包括Angular概述，学习Angular需要具备的基础知识，Node.js的运行环境，npm命令基础以及有关TypeScript的知识。

第1章 Angular概述

Angular是由谷歌公司开发的一个前端开源框架，也是单页面应用程序（Single-Page Application，SPA）框架。所谓SPA是指只有一个Web页面的Web应用程序，它是通过动态重写当前页面而不是从服务器加载整个新页面来与用户交互的Web应用程序或网站。SPA的优势就是为用户提供了一个更接近本地移动或桌面应用程序的体验。

Angular是基于客户端TypeScript的框架，用于开发动态的移动和桌面Web应用程序。它充分利用现代Web平台的各种能力，提供了开发Web应用程序的强大工具，以帮助开发者快速上手Web应用程序开发。使用Angular可以极大地减轻前端开发者的负担，并为开发者提供良好的体验。

1.1 为什么要用Angular

Angular很强大，用户选择Angular的原因有很多，下面列举了其中几种。

1.1.1 速度和性能

速度快和性能强是用户选择Angular的重要原因之一。通过Web Worker和服务端渲染技术，Angular的强大渲染引擎在发布Web应用程序的时候能把Web应用程序的代码压缩到原来的60%左右，达到在如今的Web平台上所能达到的最快速度。

1.1.2 跨平台运行

Angular的模板编译是跨平台的，能同时支持移动端和桌面端，即一套框架，多种平台，让用户界面能更好地呈现在用户面前。

1.1.3 可伸缩性的设计

Angular的模块化、组件化的设计能让用户有效地掌控可伸缩性，提高开发速度，用户很容易编写出保持一致风格和更具备可伸缩性的代码。

1.1.4 稳定性

开发者从一开始构建Angular的时候就非常注重其稳定性。在谷歌公司内部，当一个工程师修改了一行Angular代码后，成千上万个单元测试程序都会被执行。因此Angular是一个稳定的框架，新出的版本不会破坏以前产品的开发。

1.1.5 谷歌和微软公司的支持

谷歌公司在2017年的开发者大会上，确认将长期支持Angular。许多开发者认为有谷歌公司支持Angular，所以该框架值得信赖。同时，Angular使用TypeScript进行开发，TypeScript是微软公司的产品，因此Angular背后有谷歌和微软两大公司的支持。

1.1.6 强大的生态系统

Angular有强大的第三方组件生态系统。Angular的流行促使数以千计的可用于Angular的工具和组件出现。用户可以直接复用这些工具和组件，如统一平台（Angular Universal）和Angular命令行接口（Command Line Interface，CLI），这些工具和组件有助于用户快速开发Web应用程序。

1.2 Angular的版本

AngularJS的主要优势是它可以将基于超文本标记语言（Hyper Text Markup Language，HTML）的文档转换为动态内容。在AngularJS出现之前，HTML始终是静态的，这意味着用户无法主动与HTML页面上的接口进行交互。有一些方法可以构建动态的单页面应用程序，但它们太复杂。AngularJS减少了开发者创建动态内容的开发工作量，用户可以获得具有动态表单和元素的网页。

2016年9月，谷歌公司发布了Angular 2。它是由AngularJS的同一个开发团队完全重写AngularJS而成的，与网络日益现代的需求相匹配。现在人们常说的Angular（后面没有JS）泛指Angular 2之后的Angular。

Angular的版本号由3个部分组成：[主要版本号]。[小版本号]。[补丁版本号]。

●主要版本号的变化表明Angular中的主要功能接口发生了变化，可能不再兼容低版本的代码，因为应用程序接口（Application Programming Interface，API）已经改变了；如从Angular 7变成Angular 8时，是主要版本号的变化。

●小版本号的变化表示功能更新，如增加了新功能。

●补丁版本号是用来修复漏洞（bug）的。

1.3 Angular的核心概念

1.3.1 组件

组件是构成Angular的基础和核心，它是一个模板的控制类，Angular使用组件处理页面逻辑和视图显示问题。组件知道如何渲染自己和配置依赖注入（Dependency Injection），并通过一些由属性和方法组成的API与视图交互，每个组件都能独立实现各自的功能。

在基于Angular的组件的体系结构中，Web应用程序把逻辑功能和组件分开。这些组件可以轻松替换和解耦，并可以在Web应用程序的其他部分中重复使用。此外，组件的独立性不仅使测试Web应用程序变得容易，而且还能确保每个组件都可以无缝运行。

1.3.2 模板和数据绑定

使用组件时，Angular是通过模板渲染来显示组件内容的。模板通过数据绑定的方式来动态设置文档对象模型（Document Object Model，DOM）的值，如把组件数据映射到模板中，或者从模板（如input控件）中取出数据放到组件中。

1.3.3 服务

Angular把组件和服务区分开，以增强模块性和复用性。通过把组件中和视图有关的功能与其他类型的功能分开，组件变得更加精简、高效。

在功能方面，组件聚焦于展示数据，把数据访问的职责委托给某个服务。因此服务是实现单一目的的业务逻辑单元，它封装了某一特定功能，如从服务器获取数据、验证用户输入或直接往控制台中写日志等。服务是可以通过注入的方式供用户使用的独立模块。

1.3.4 依赖注入

依赖注入其实不是Angular独有的概念，这是一个已经存在很长时间的设计模式，也可以叫作控制反转（Inverse of Control）。熟悉Java和.NET的用户对这种设计模式不会感到陌生，Java的Spring框架里的IOC就是一种这样的设计模式。

Angular也提供了依赖注入。因为组件是用TypeScript写的类，所以依赖关系通常通过构造函数注入。在Angular中，我们可以创建一个可重用的软件对象来处理与服务器的通信，通过构造函数将它注入每个需要它的对象（类）。然后，在类中就有了与服务器通信的现成方法。

依赖注入的好处是只要编写一次代码（如处理与服务器的通信服务），就可以在许多地方多次使用它。

1.3.5 指令

Angular的模板是动态的。当Angular渲染它们时，Angular会根据指令对DOM进行修改。Angular中包含以下3种类型的指令。

●属性指令：以元素的属性形式来使用的指令。

●结构指令：用来改变DOM树的结构的指令。

●组件指令：作为指令的一个重要子类，组件本质上可以看作一个带有模板的指令。

1.3.6 管道

Angular的管道的作用是把数据作为输入，然后转换它，给出期望的输出。常见的管道有：日期管道，负责转换日期为友好的本地格式；货币管道，负责转换货币格式；异步管道，可实时订阅数据；等等。

1.3.7 模块

Angular的模块的作用是把组件、指令、服务等打包成内聚的功能块，封装或暴露相应的功能，从而达到模块间的解耦，是高度自治的一种程序设计模式。换句话说，模块对应的是业务和功能，组件对应的才是页面展示和交互。

1.4 Angular的运行

代码是用TypeScript编写的。TypeScript扩展了JavaScript的语法，任何已经存在的JavaScript程序，都可以不加任何改动地在TypeScript环境下运行。TypeScript相比JavaScript，只是增加了一些新的遵守ES6规范的语法，以及基于类的面向对象程序设计的特性。

ES6规范是在2015年发布的，而目前所有主流的浏览器并没有完全支持ES6规范，所以ES6程序并不能直接在浏览器中运行。因此，要想使采用Angular开发的Web应用程序代码能在浏览器中运行，需要先将TypeScript代码编译为JavaScript代码。

Angular提供了一个Angular CLI工具，该工具可用于初始化、开发、构建和维护工作，用户可以直接使用。无论是Angular CLI，还是TypeScript运行环境，都需要在Node.js的环境中运行，因此我们将会准备一个Node.js的环境。

使用Angular开发的Web应用程序最终被转换为JavaScript代码的Web应用程序，它能直接在浏览器中运行。

1.5 小结

本章的主要目的是让读者对Angular有一个直观的认识。本章分别介绍了什么是Angular、为什么要用Angular、它的核心概念以及Angular版本的发展历史等。

第2章 Angular开发基础

本章的内容是为Angular的入门读者准备的，主要是对学习Angular前需要具备的知识进行梳理，帮助读者更快入门Angular。如果读者有前端开发的经验，可以先忽略本章内容，直接进行下一章的学习。

2.1 了解Web开发基础

在深入学习Angular之前，读者需要了解Web开发的基本概念。

2.1.1 客户端和服务器通信

Web应用程序运行在两台相互通信的计算机上，它们分别被称为客户端和服务器。

●客户端（用户的计算机）可能是各种各样的设备：从智能手表到手机，从平板电脑到计算机。用户在客户端上使用浏览器与服务器（Web应用程序部署在其上）进行通信。客户端与服务器进行通信时，会发送超文本传输协议（Hypertext Transfer Protocol，HTTP）请求和接收结果。

●服务器位于云端或数据中心，它会监听客户端发送的HTTP请求，并返回结果。服务器还可以访问Web应用程序使用的其他数据库，如后端数据库。

目前有两种类型的Web应用程序：在服务器上运行的Web应用程序和在客户端上运行的Web应用程序（SPA）。

1.在服务器上运行的Web应用程序

在服务器上运行的Web应用程序是指Web应用程序的计算逻辑在服务器上完成，客户端基本不参与运算，仅接收服务器返回的全部数据。当用户通过客户端向服务器发送一个请求时，服务器执行一些操作并返回一个全新的HTML页面，作为响应显示在客户端上。服务器针对客户端的每次请求重新生成该HTML页面的全部数据并将其发送回客户端的浏览器中。在服务器上运行的Web应用程序如图2-1所示。

2.在客户端上运行的Web应用程序

客户端的Web应用程序也称为单页面应用程序。许多Web应用程序在服务器上运行，但是一些代码也同时在客户端上执行，以避免频繁地重新生成HTML页面。

当用户在客户端中执行一个操作时，客户端会向服务器发送一个请求，服务器执行一些操作并返回结果通常是JS对象简谱（JavaScript Object Notation，JSON）格式的数据，而不是一个全新的HTML页面。客户端侦听来自服务器的结果，并自行决定在不生成新HTML页面的情况下如何将结果呈现给用户。

客户端的Web应用程序往往更具交互性和灵活性，因为它们可以更快地响应用户交互，不必等待全部数据发回。它们只需要服务器返回一个局部的结果，而不是整个HTML页面。在客户端上运行的Web应用程序如图2-2所示。

服务器应该承担主要工作，业务逻辑和数据应该保存在服务器上，并在需要时供客户端调用或检索。客户端可以使用更先进的异步技术来避免整个页面被刷新，它仅承担与用户的交互工作。

2.1.2 什么是HTML

HTML即超文本标记语言，它是构建Web的基石，是一种标准的标记语言。HTML常与层叠样式表（Cascading Style Sheets，CSS）、JavaScript一起被用于设计Web、Web应用程序以及移动应用程序的用户界面。浏览器可以读取HTML文件，并将其渲染成可视化网页。HTML不是一门编程语言，而是一种用于定义内容结构的标记语言。HTML由一系列标签组成，这些标签可以用来“包裹”不同部分的内容，使其以某种方式工作或者呈现。

HTML允许嵌入图像和对象，并且可以用于创建交互式表单，它被用来结构化信息，如标题、段落和列表等，也可用来在一定程度上描述文档的外观和语义。HTML的语言形式为尖括号包围的HTML标签（如<html>），浏览器使用HTML标签和脚本来诠释页面内容。

Angular使用模板显示页面内容，而模板使用的就是HTML。掌握有关HTML的基础知识，有助于我们快速掌握Angular。

2.1.3 什么是DOM

DOM即文档对象模型，它是HTML页面和XML文件的编程接口。DOM定义了访问和操作HTML页面的标准方法。

DOM提供了对HTML页面的结构化表述，并定义了一种方式，可以通过程序对该结构进行访问，从而改变HTML页面的结构、样式和内容。DOM将HTML页面解析为一个由节点和对象（包含属性和方法的对象）组成的结构集合。简言之，它能将HTML页面和脚本或程序连接起来。

一个HTML页面对应一个DOM。DOM可以在浏览器窗口或作为HTML源码显示出来。DOM提供了对同一个HTML页面的另一种表现、存储和操作的方式。

2.1.4 HTML特性与DOM属性

当浏览器解析完HTML后，生成的DOM对象是一个继承自Object的常规JavaScript对象，因此我们可以像操作任何JavaScript对象那样来操作DOM对象。

特性（Attribute）属于HTML，可以任意命名，赋值和取值分别使用setAttribute()方法和getAttribute()方法。

属性（Property）属于DOM，赋值和取值都使用“。”操作符。

提示 HTML中的特性和DOM中的属性一般情况下都被称为“属性”。本书为了区分，分别称它们为HTML特性与DOM属性。

1.HTML特性与DOM属性的关系

我们为HTML元素设置特性，具体如下。

<input id="name" value="Murphy"/>

上述代码有一个<input>标签，定义了两个特性（id和value）。当浏览器解析这段代码的时候，会把HTML代码解析为DOM对象，确切地说是解析为HTMLInputElement对象。在DOM对象中，用户可以通过该对象找到对应的id属性和value属性。简单地说，就是当浏览器解析HTML页面时，会将HTML特性映射为DOM属性。

2.HTML特性与DOM属性的区别

HTML特性与DOM属性的主要区别如下。

并非所有的HTML特性都可以映射为DOM属性，如HTML中的colspan特性，在DOM中没有对应的属性。HTML也可以添加非标准特性，例如：

<input id="name" value="Murphy" local="wuhan" />

当HTML特性被映射为DOM属性时，只映射标准特性，访问非标准特性将得到“undefined”的结果。

const el = document.getElementById('local') // 试图通过getElementById()方法获得DOM对象
el.local === undefined // 由于local特性是非标准特性，因此无法映射为DOM属性

非标准特性并不会自动映射为DOM属性。使用data-开头的HTML特性时，该特性会映射到DOM的dataset属性里。

el.setAttribute('data-myName', 'Murphy'); // 将myName属性的值设置为Murphy
el.dataset.myName === 'Murphy' // 比较dataset属性的myName属性的值是否等于Murphy

HTML特性是不区分大小写的，而DOM属性是区分大小写的，因此以下代码的效果是一样的。

el.getAttribute('id') // 小写id
el.getAttribute('ID') // 大写ID
el.getAttribute('iD') // 小写i大写D

当修改HTML特性的值时，DOM属性的值也会更新；但是修改DOM属性的值后，HTML特性的值还是原值。

el.setAttribute('value', 'Jack');       // HTML特性的值
el.value === 'Jack'                     // DOM属性的值也更新了

el.value = 'newValue';                  // 修改DOM属性的值
el.getAttribute('value')) === 'Murphy'  // HTML特性的值没有更新

2.1.5 CSS基础知识

CSS即层叠样式表，是一种用来表现HTML文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页中的各元素进行格式化。CSS能够对网页中元素位置的设定进行像素级的精确控制，支持几乎所有的字体、字号样式，拥有对网页对象和模型样式编辑的能力。

在CSS中，HTML中的标签元素大体被分为3种不同的类型：块状元素、行内元素和行内块状元素。理解它们之间的区别有助于读者对CSS的学习。

1.块状元素

所谓块状元素，就是能够设置元素尺寸、隔离其他元素功能的元素。在HTML中主要有如下块状元素。

<div>、<p>、<h1>、……、<h6>、<ol>、<ul>、<dl>、<table>、<address>、<blockquote>、<form>

块状元素的特点如下。

●每个元素都从新的一行开始，并且其后的元素也另起一行。

●元素的高度、宽度、行高以及顶部和底部边距都可设置。

●在不设置元素宽度的情况下，元素宽度是它本身父元素宽度的100%（即和父元素的宽度一致）。

●行内元素可转换成块状元素。

/* 使a行内元素具有块状元素的特点 */
a {
    display:block;
}

2.行内元素

所谓行内元素，就是不能够设置元素尺寸的元素，它只能自适应内容，无法隔离其他元素，其他元素会紧跟其后。在HTML中主要有如下行内元素。

<a>、<span>、<br>、<i>、<em>、<strong>、<label>、<q>、<var>、<cite>、<code>

行内元素的特点如下。

●和其他元素都在一行上。

●元素的高度、宽度及顶部和底部边距不可设置。

●元素的宽度就是它包含的文字或图片的宽度，不可改变。

●块状元素可转换为行内元素。

/* 块状元素div转换为行内元素 */
div {
    display:inline;
}

3.行内块状元素

所谓行内块状元素，就是可以设置元素尺寸，但无法隔离其他元素的元素。在HTML中主要有如下行内块状元素。

<img>、<input>

行内块状元素的特点如下。

●同时具备行内元素、块状元素的特点。

●和其他元素都在一行上。

●元素的高度、宽度、行高以及顶部和底部边距都可设置。

4.CSS的属性

CSS有很多属性，每个属性都有自己的含义。如color是文本的颜色属性，text-indent规定了段落的缩进。学习CSS属性时，请注意下面几个方面。

●属性的合法属性值。如段落缩进属性text-indent只接受一个表示长度的值；而背景图案background中的image属性可以接受的值有两个，一个是表示图案位置的链接值，另一个用none表示不用背景图案。

●属性的默认值。

●属性所适用的HTML元素。正如HTML元素有多种，CSS属性只适用于特定类别的元素，如white-space属性就只适用于块状元素。

●属性的值是否被下一级继承。

●如果该属性能取百分比值，那么该百分比值所相对的标准是什么，如margin属性可以取百分比值。

5.CSS的度量单位

CSS的度量单位主要分为两种：绝对单位和相对单位。

●绝对单位：不会因为其他元素尺寸的变化而变化。

●相对单位：没有一个固定的度量值，而是由其他元素的尺寸来确定的相对值。

常见的度量单位如下。

●px：像素，指的是屏幕上显示的最小单元。

●em：是相对度量单位，它的计算方式是用当前元素的font-size的px值乘以em前面的数字。

●rem：和em很类似，区别是它是相对HTML根元素的font-size值计算的。

●vw和vh：分别指视窗的宽度和高度，1vw=视窗宽度的1%，1vh=视窗高度的1%。

●%：百分比单位。

6.CSS选择器

CSS选择器用于选择需要添加样式的HTML元素。使用CSS选择器的原则如下。

●准确地选择要控制的标签。

●使用最合理优先级的CSS选择器。

●HTML和CSS代码尽量简洁美观。

CSS选择器的种类有很多，按照效率从高到低排序如下。

●id选择器（#id）。

●类选择器（.classname）。

●标签选择器（div、h1、p）。

●相邻同胞选择器（h1+p）。

●子选择器（ul>li）。

●后代选择器（li a）。

●通配符选择器（*）。

●属性选择器（a[rel="external"]）。

●伪类选择器（a:hover、li:nth-child）。

2.1.6 CSS布局实战

在实际工作中，Web页面元素的布局非常重要，大到页面的整体风格，小到一个文本框的对齐，这些都离不开CSS布局。下面介绍两种实际工作中常见的CSS布局。

1.[示例css-ex100]元素居中对齐

（1）新建index.html文件，并将其更改为以下内容。

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Document</title>
   <style>
       .center {
           margin: auto; /* div外的左右空间对称，也就是居中对齐 */
           width: 50%; /* div宽度占屏幕框的50% */
           border: 3px solid green; /* div边框为3px的绿色实线条 */
           padding: 10px; /* div内空间左右分别留10px空白 */
       }
       .china {
           text-align: center; /* div内文本居中对齐 */
           background-color: yellowgreen; /* 定义div的背景色 */
       }
    </style>
</head>
<body>
   <div class="center">
       <div class="china">学习Angular</div>
   </div>
</body>
</html>

（2）用浏览器打开index.html文件，可看到元素居中对齐的效果，如图2-3所示。

上面的示例css-ex100完成了以下内容。

（1）在HTML中的body标签里定义了两个嵌套的div元素，分别引用了两个不同的样式：center和china。

（2）center样式里最重要的就是margin，margin的4个值分别对应上、右、下、左；也就是说“margin:auto;”其实相当于“margin:auto auto auto auto;”，“margin:0 auto;”相当于“margin:0 auto 0 auto;”。

2.[示例css-ex200]元素自适应屏幕和自动换行

（1）新建index.html文件，并将其更改为以下内容。

<!DOCTYPE html>
<html>
<head>
    <style>
       .flex-container {
           display: flex; /* 生成一个块状元素 */
           justify-content: center; /* 水平居中对齐 */
           background-color: DodgerBlue;
       }
       .flex-container>div {
           background-color: #f1f1f1;
           width: 100px;
           margin: 10px;
           text-align: center;
           line-height: 75px;
           font-size: 30px;
       }
       .flex-container-wrap {
           display: inline-flex; /* 生成一个弹性的行内容器 */
           flex-flow: row wrap; /* 按行排列，超过屏幕宽后自动换行 */
           justify-content: center; /* 水平居中对齐 */
           align-items: center; /* 垂直居中对齐 */
       }
       .flex-container-wrap>div {
           background-color: #f1f1f1;
           width: 100px;
           margin: 10px;
           text-align: center;
           line-height: 75px;
           font-size: 30px;
       }
    </style>
</head>
<body>
    <div class="flex-container">
       <div>1</div>
       <div>2</div>
       <div>3</div>
       <div>4</div>
       <div>5</div>14Angular开发入门与实战     第2章  Angular开发基础　
       <div>6</div>
       <div>7</div>
       <div>8</div>
       <div>9</div>
       <div>10</div>
    </div>
    <div class="flex-container-wrap">
       <div>1</div>
       <div>2</div>
       <div>3</div>
       <div>4</div>
       <div>5</div>
       <div>6</div>
       <div>7</div>
       <div>8</div>
       <div>9</div>
       <div>10</div>
    </div>
</body>
</html>

（2）用浏览器打开index.html文件，可看到元素自适应屏幕和自动换行的效果，如图2-4所示。

上面的示例css-ex200完成了以下内容。

（1）flex-container样式里选择“display:flex;”，表示把整行生成一个块状元素，该元素随着屏幕的拉伸自动适应缩放比例，不换行。

（2）flex-container-wrap样式里选择“display:inline-flex;”，表示把整行生成一个具有弹性的行内容器，该容器内的元素随着屏幕的拉伸自动换行显示。

2.2 掌握Node.js和npm基础

Angular的Web应用程序开发与Node.js和包管理工具（npm）紧密相连。Angular和Angular CLI均是基于Node.js环境的，这部分知识将在第3章介绍。

2.3 TypeScript基础知识

Angular是使用TypeScript开发的，因此掌握有关TypeScript的知识势在必行，本书第4章将专门介绍TypeScript基础知识。

2.4 Web组件知识

基于Web组件的开发便于开发人员构建高度可重用的代码。Angular组件设计就是采用的MVVM模式。

2.4.1 什么是MVVM模式

MVVM是Model-View-ViewModel的简称。

●M（Model）：模型，Model对应的就是Model数据，Angular中的Model用来存放View所需要的基本数据和从后端获取的数据。

●V（View）：视图，它专注于界面的显示和渲染，Angular中的View就是组件模板。

●VM（ViewModel）：视图模型，ViewModel是用来连接View和Model的桥梁，View Model将Model中的数据提供给View用于展示，同时将View中用户更改的数据同步到Model中。

通过这3个部分可以实现用户界面（User Interface，UI）逻辑、呈现逻辑、状态控制、数据与业务逻辑的分离。

2.4.2 MVVM模式的优点

MVVM模式有下面这些优点。

●双向绑定技术：当Model变化时，ViewModel会自动更新，View也会自动变化。

●低耦合：各层职责分开，可以各干各的事情，如View可以独立于Model变化和修改。

●可重用性：View的计算逻辑放在ViewModel里，让很多View可以重用这段计算逻辑。

●独立开发：开发者可以专注于业务逻辑和数据的开发（ViewModel），设计人员可以专注于界面的设计。

●测试方便：可以针对ViewModel来对界面进行测试。

2.5 选择适合的开发工具

集成开发环境（Integrated Development Environment，IDE）是用于提供程序开发环境的应用程序，一般包括代码编辑器、编译器、调试器和图形用户界面等。

进行Angular开发时，需要选择一款对TypeScript友好的代码编辑器，该代码编辑器默认情况下（或通过插件）应支持TypeScript开发，并且考虑到也要兼容JavaScript开发，Visual Studio Code、Atom或WebStorm这3款代码编辑器是现在的理想选择。无论用户选择哪一款，目的都是使Angular开发变得更加方便和容易。

本书将使用Visual Studio Code，因为它非常好用，并且免费。Visual Studio Code是微软公司开发的开源代码编辑器，可用于Windows、Linux和macOS操作系统；它支持调试代码、git插件、语法高亮提示、代码提示、代码重构；这个代码编辑器由TypeScript的作者编写，所以能很好地兼容TypeScript；它同样适用于编写JavaScript、Java代码等，且相对简洁。

2.6 如何学习Angular

学习是一个漫长的过程，学习Angular的过程也一样。笔者在接触Angular之前是一位Java后端工程师，鲜少接触前端技能，所以在刚开始学习Angular时，对日新月异的前端技术名词感到茫然，不知道从哪里开始学起，走了不少弯路。鉴于此，笔者结合自身的学习经验，站在零基础前端开发者的角度，与读者分享如何学习Angular。首先，读者需要了解Web、Node.js基础，接着是TypeScript基础知识，这些都是本书为读者准备的入门Angular的内容；本书的内容分别针对不同层次的读者设计，建议读者边读边实践书中的示例，只有反复实践，才能印象深刻。其次，选择有效的学习策略，如记下自己犯的错误，针对错误反复实践；最后就是超越自己，多寻找有关Angular知识的资源，如Angular API，这会使你更加熟悉Angular。

2.7 小结

本章主要带领读者对入门Angular的知识进行了梳理，介绍了Web开发基础、HTML基础、集成开发环境以及如何学习Angular。