第一章、第一节 Angular基础

让我们先来看看Angular是如何实现组件模式的。

组件模式

Angular 应用程序使用组件模式。你可能听说过这个模式，它不仅用于软件开发，还用于制造、建筑和其他领域。简单地说，它涉及到将更小的、离散的构建块组合成更大的成品。例如，电池是汽车的组成部分。

在软件开发中，组件是逻辑单元，可以组合成更大的应用程序。组件往往具有内部逻辑和属性，这些逻辑和属性对较大的应用程序是屏蔽的或隐藏的。然后，较大的应用程序通过称为接口的方式使用这些构建块，接口只公开使用组件所需的内容。这样，只要不改变接口，组件的内部逻辑就可以在不影响较大应用程序的情况下进行修改。

回到我们的电池例子，汽车的使用连接器接通电池。然而，如果电池坏了，它可以被一个全新的电池取代，只要电池有相同的连接器。这意味着汽车制造商不必担心电池内部的问题，这就简化了汽车的制造过程。更重要的是，车主不必每次电池坏掉时都更换汽车。

为了扩展业务，电池制造商可以为一系列不同的车辆销售电池，例如全地形车、船只或雪地摩托。因此，组件模式使他们能够实现更大的规模经济。

在web应用程序中使用组件模式

随着web应用程序变得越来越复杂，能够用更小的和离散的组件构建它们的需求变得更加迫切。组件的方式允许以某种方式构建应用程序，以防止它们成为乱七八糟的代码。相反，基于组件的设计允许我们在独立于其他部分的情况下对应用程序的特定部分进行推理，然后我们可以通过商定的连接点将应用程序组合成一个完整的整体。

此外，维护成本更低，因为每个组件的内部逻辑可以单独管理，而不会影响应用程序的其他部分。使用自描述组件将应用程序组合在一起使应用程序在更高的抽象级别上更容易理解。

为什么以前Angular不使用组件?

如果这个想法很有意义，为什么早期版本的Angular没有采用组件模式呢?答案是，当Angular第一次发布时，现有的技术并不完全支持在web应用程序中实现这种模式。

然而，早期版本的Angular在实现更智能的web应用程序设计和组织方面迈出了实质性的步伐。例如，他们实现了MVC模式，该模式将应用程序分离为模型、视图和控制器(您将看到MVC模式在我们将在Angular中构建的组件中继续使用)。

使用MVC模式，模型是数据，视图是web页面(或移动应用程序屏幕，甚至是Flash页面)，控制器用模型中的数据填充视图。通过这种方式，可以实现关注点分离。遵循这种模式，并明智地使用指令，将使您非常接近组件。

因此，早期版本的Angular允许更合理地设计和构建应用程序。然而，由于所使用的技术不是真正孤立的，这种方法受到了限制。相反，它们最终都被呈现出来，与屏幕上的其他元素没有任何真正的分离。

有什么新东西能让Angular使用组件模式?

相比之下，Angular 的最新版本包含了最近出现的技术，这使得更全面地实现组件模式成为可能。这些技术包括Web组件、ES2015 (JavaScript的新版本)和TypeScript。让我们来讨论一下这些技术为实现这一目标带来了什么。

Web 组件

Web组件是一个总称，实际上涵盖了Web浏览器的四个新兴标准:

• Custom elements
• Shadow DOM
• Templates
• HTML imports

现在让我们详细讨论每一个问题:

• Custom elements 自定义元素允许创建标准HTML标记以外的新类型的DOM元素，比如
  <div> 和 <p>。你将在本书中看到这些定制元素的使用。例如，我们在本章中构建的应用程序将有一个名为<app-root>的根元素，但是你可以为该元素指定任何名称。单个组件也将使用自定义元素。例如，在下面的章节中，我们将构建一个更复杂的应用程序，它将屏幕分解为多个组件。页面的标题将使用自定义元素<abe-header>来显示其内容(前缀abe对我们的应用程序是唯一的，有助于避免与本地HTML元素或其他应用程序中的自定义元素命名冲突)。添加自定义标记的功能在屏幕上提供了一个位置，该位置可以保留下来绑定组件。简而言之，这是将组件与页面其余部分分离并使其能够真正独立的第一步。

• Shadow DOM 在DOM中为scripts、CSS、HTML提供了一个隐藏区域。隐藏区域内的标记和样式不会影响页面的其余部分。同样重要的是，它们不会受到页面其他部分的标记和样式的影响。我们的组件可以使用这个隐藏区域来呈现它的显示。这是使组件自包含的第二步。

• Templates (模板)是HTML的片段，最初不会在web页面中呈现，但可以在运行时使用JavaScript激活。许多JavaScript框架已经支持某种形式的模板。Web组件标准化这个模板并在浏览器中提供直接支持。可以使用模板使组件动态使用的Shadow DOM中的HTML和CSS。这是构成组件的第三步。

• 构成Web组件的最后一个标准是HTML导入。它们提供了在单个包中加载HTML、CSS和JavaScript等资源的方法。Angular不使用HTML导入。相反，它依赖于JavaScript模块加载，我们将在本章稍后讨论。

Angular组件 和 Web组件

目前的Web浏览器并不完全支持Web组件。因此，Angular组件并不是严格意义上的Web组件。也许更准确的说法是，Angular组件实现了Web组件背后的设计原则。它们使在当今的浏览器下构建web组件这件事成为了可能。

Angular支持Chrome、Firefox、Safari和Edge等常绿浏览器，以及ie9及以上版本。它还支持Android和IOS。要查看Angular支持的浏览器列表，请访问https:/ / angular.io / guide/ browser- support。

因此，在本书的其余部分中，我们将关注于构建Angular组件，而不是Web组件。尽管有这样的区别，Angular组件与Web组件紧密结合，甚至可以与Web组件互操作。随着浏览器开始更全面地支持Web组件，Angular组件和Web组件之间的差异将开始消失。因此，如果您想要开始采用未来的Web组件标准，Angular为您提供了今天这样做的机会。

Angular的语言支持

您可以使用ES5(所有当前浏览器都支持的JavaScript版本)开发组件，但是Angular通过添加对最新语言(如ES2015和TypeScript)的关键特性的支持，增强了开发组件的能力。

ES2015

ES2015 是JavaScript的新版本;2015年6月获得批准。它增加了许多
语言的改进，我们将在这本书中看到，但在这一点上，我们最感兴趣的两个是:

• Classes
• Module loading

以前在JavaScript中不存在类的概念。既然它们确实存在，那么使用它们的关键好处就是它们提供了简单、清晰的语法，我们可以使用它为组件中的代码创建方便的容器。当你开始研究这本书中的应用程序时，你会发现。类还为我们的组件提供了一个方便的简写名称，使它们更容易通过依赖注入等事情联系在一起。

我们将在本书的例子中探索类的使用。如果您没有使用面向对象的语言，那么您可能不熟悉类，因此我们将在本章的示例中介绍它们。

ES2015 还介绍了一种新的模块加载方法。模块提供了一种封装JavaScript文件的方法。当它们被封装时，它们不会污染全局命名空间，并且可以以受控的方式与其他模块交互。

一旦我们定义了模块，我们需要一种方式将它们加载到应用程序中以执行。模块加载允许我们从Angular组成的modules和其他我们创建或使用的组件的模块中选择我们应用程序需要的东西。

目前，有很多方法和库支持JavaScript中的模块加载。ES2015为加载模块添加了新的、一致的语法，作为语言的一部分。它的语法很简单，包括在模块前面加上export关键字(或使用默认导出)，然后使用import在应用程序的其他地方使用它们。

es2015模块加载使我们能够将组件组合成有用的包或特性，可以在应用程序中导入或导出。事实上，模块是Angular本身的核心。我们将看到模块在Angular本身和我们在本书中构建的应用程序中被广泛使用。

由于目前的浏览器并不完全支持ES2015，我们需要将ES2015转换为ES5，以便在应用程序中使用类和模块加载等特性。我们通过一种叫做转化的过程来完成。

一旦ES2015被传输到ES5，我们就可以使用SystemJS这样的模块加载器来加载我们的模块。SystemJS遵循ES2015模块加载语法，使我们能够在当今的浏览器中进行模块加载。或者，我们可以使用webpack之类的模块绑定器来加载和组合我们的模块。对于本书中的项目，我们将使用webpack在应用程序中加载、打包和部署模块。

TypeScript

TypeScript是Microsoft作为JavaScript的超集创建的，这意味着它包含了ES2015的特性(比如类和模块加载)，并添加了以下内容:

• Types
• Decorators

Types（类型）允许我们在类中标记变量、属性和参数，以表明它们是数字、字符串、布尔值或数组和对象等各种结构。这使我们能够在设计时执行类型检查，以确保在应用程序中使用了正确的类型。

Decorators （装饰器）是简单的注释，我们可以使用@符号和函数将其添加到类中。它们为我们的类的使用提供了指令(称为元数据)。在Angular中，decorator允许我们将类标识为Angular组件。decorator还使我们能够指定一个自定义元素，将组件绑定到该元素，并标识一个向组件添加HTML视图的模板。在阅读本书的过程中，我们将更详细地介绍装饰器的使用。

decorator不是ES2015的一部分，而是未来它们将包含在JavaScript语言中的提议的一部分。作为微软和谷歌合作的一部分，它们被添加到TypeScript。如前所述，TypeScript编译成ES5，因此我们能够在浏览器中同时使用类型和装饰器，而这些浏览器并不完全支持ES2015或拟议的修饰符标准。

综合能力

通过遵循Web组件标准并添加对ES2015和TypeScript的支持，Angular使我们能够创建实现组件设计模式的Web应用程序。这些组件通过自描述和自包含构建块的集合，帮助实现构建大型应用程序标准背后的远景。

我们希望您能在本书的示例中看到，Angular使组件能够以一种简单明了的方式构造，使开发人员更容易实现它们。在我们继续阅读本书中的示例时，我们将重点介绍每种技术的使用情况。

Angular modules

组件是 Angular 应用程序的基本构件。但是我们如何将这些构建块组织成完整的应用程序呢? Angular modules 提供了这个问题的答案。它们使我们能够将组件组合成可重用的功能组，这些功能组可以在整个应用程序中导出和导入。例如，在更复杂的应用程序中，我们希望有用于诸如身份验证、公共实用程序和外部服务调用的模块。与此同时，模块使我们能够以一种允许我们按需加载的方式对应用程序中的特性进行分组。这就是所谓的延迟加载，我们将在 第四章 “Personal Trainer”中讨论这个话题。

每个Angular应用程序都有一个或多个包含组件的模块。Angular引入了NgModule来方便地指定组成模块的组件。每个Angular应用程序都必须至少有一个这样的模块——根模块。

Angular本身是作为模块构建的，我们将这些模块导入到应用程序中。因此，当您构建Angular应用程序时，您将看到所有模块的使用。

构建Angular应用程序的基本步骤

总之:在一个基本的层面上，你会看到在Angular中开发应用，你会做以下事情:

1. 创建组件
2. 将它们打包成模块
3. 启动 app

了解Angular和组件设计模式的最好方法就是观察它的实际操作。因此，我们将在Angular中构建我们的第一个Hello World应用程序。这个应用程序将帮助您熟悉Angular框架，并了解组件设计模式。我们开始吧。