Angular 入门教程 - 第 1 课

本文写于 Angular 2 的早期阶段。由于 Angular 经历了许多变化，我已使用 Angular 4 重写了整篇文章，请参考此文章以避免进一步的困惑：逐步学习 Angular 4

• 下载 100 页 Angular 学习电子书（包含 10 个实验）- 3.2 MB
• 下载 Lab1CustomerAngularProject.zip - 94.1 KB

目录

引言

Angular 2 的目标是什么？

开始学习 Angular 2 之前的先决条件

步骤 1：- 安装 VS Code、Typescript 和 Node

模块化带来巨大的责任

步骤 2：- 设置 Angular 环境

步骤 3：- 配置任务运行器

理解 Angular 2 组件和模块架构

步骤 4：- 逐步遵循 MVW – 创建文件夹

步骤 5：- 创建模型

步骤 6：- 创建组件

步骤 7：- 创建客户 HTML UI – 指令和插值

步骤 8：- 创建模块

步骤 9：- 创建“Startup.ts”文件

步骤 10：- 使用主 Angular 页面调用“Startup.ts”文件

步骤 11：- 安装 http-server 并运行应用程序

如何运行源代码？

下一个实验会是什么？

本文中使用的缩写

参考文献

引言

在本文中，我们将逐步学习 Angular 2.0。本文共分为 10 个实验，每个实验都由详细的步骤指导。

学习任何新技术最好的方法是创建一个项目。因此，在这个分步系列中，我们将创建一个简单的客户数据输入屏幕项目。 所以对于实验 1，我们将创建一个基本屏幕，其中包含三个字段：“姓名”、“代码”和“金额”。当最终用户在这三个字段中输入时，值将显示在下方。 因此，在实验 1 中，我们将执行 11 个步骤来实现这一目标。

这是一篇相当长的文章，如果您想快速学习，可以观看下面的 Angular 2 视频。此视频解释了如何运行您的第一个 Angular 2 视频程序。请注意，YouTube 视频使用 Visual Studio 作为工具，而本文使用 VS Code。

因此，我保留了两种选择，以便 Microsoft 用户满意，而非 Microsoft 用户也不会感到被遗弃。

Angular 2 的目标是什么？

“Angular 2 是一个开源 JavaScript 框架，它简化了 JavaScript 对象和 HTML UI 元素之间的代码绑定。”

让我们尝试用简单的示例代码来理解上述定义。

下面是一个简单的“Customer”函数，其中包含“CustomerName”属性。我们还创建了一个名为“Cust”的对象，它是“Customer”类类型。

function Customer() 
{
this.CustomerName = "AngularInterview";
}
var Cust = new Customer();

现在，假设在上面的客户对象中，我们想将其绑定到一个名为“TxtCustomerName”的 HTML 文本框。换句话说，当我们更改 HTML 文本框中的内容时，客户对象应该更新；当客户对象内部发生变化时，UI 也应该更新。

<input id="TxtCustomerName" onchange="UitoObject()" type="text" />

因此，为了实现 UI 到对象之间的这种通信，开发人员最终编写了如下所示的函数。“UitoObject”函数从 UI 获取数据并将其设置为对象，而另一个函数“ObjecttoUI”从对象获取数据并将其设置为 UI。

function UitoObject() 
{
Cust.CustomerName = $("#TxtCustomerName").val();
}
function ObjecttoUi() 
{
$("#TxtCustomerName").val(Cust.CustomerName);
}

因此，如果我们将上述代码进行视觉分析，它看起来就像下面所示。您的这两个函数都只是绑定代码逻辑，用于在 UI 和对象之间传输数据，反之亦然。

绑定代码

现在，上面相同的代码可以用 Angular 编写，如下所示。因此，现在您在文本框中键入的任何内容都会更新“Customer”对象，当“Customer”对象更新时，它也会更新 UI。

<input type="text" />

简而言之，如果您现在对上述代码进行视觉分析，您将得到如下图所示的内容。您有 HTML 中的 VIEW，您的 MODEL 对象是 JavaScript 函数，以及 Angular 中的绑定代码。

JavaScript 函数

现在，绑定代码有不同的术语。

• 一些开发人员称之为“ViewModel”，因为它连接了“模型”和“视图”。
• 一些人称之为“Presenter”，因为这种逻辑就是表现逻辑。
• 一些人称之为“Controller”，因为它控制视图和模型如何通信。

为了避免这种术语混淆，Angular 团队将这段代码称为“Whatever”。它就是那个将 UI 和模型绑定的“Whatever”代码。这就是为什么你会听到很多开发人员说 Angular 实现了“MVW”架构。

因此，总结来说，Angular 的全部目标是绑定、绑定和绑定。

开始学习 Angular 2 之前的先决条件

在我最初学习 Angular 2 的过程中，我意识到 Angular 2 本身很容易理解。但 Angular 2 使用了许多 JavaScript 开源库，如果您不了解这些开源库，学习 Angular 2 将变得异常困难。

因此，我们建议您花一些时间观看以下视频并做笔记：-

主题名称	YouTube URL 来源
Node JS	https://www.youtube.com/watch?v=-LF_43_Mqnw
TypeScript	https://www.youtube.com/watch?v=xqYD8QXJX9U
System JS	https://www.youtube.com/watch?v=nQGhdoIMKaM
Common JS 概念	https://www.youtube.com/watch?v=jN4IM5tp1SE

步骤 1：- 安装 VS Code、Typescript 和 Node

理论上，您可以使用简单的记事本编写 Angular 2。但这将是回到亚当和夏娃的时代，重新发明轮子。因此，为了加快学习过程，我们将使用一些工具和软件。

我们需要的第一个工具是 Visual Studio Code 编辑器，或者简称为 VS Code 编辑器。请访问 https://vscode.js.cn/download，并根据您的操作系统安装相应的版本。例如，我使用的是 Windows 操作系统，所以我将安装 Windows 版本。

下载安装程序后，这是一个简单的 EXE 安装程序，运行它并点击下一步、下一步和完成。

我们需要做的第二件事是“Nodejs”。我们鼓励您观看此视频，它解释了 Node JS 的基本用法，Node JS 解释。

简单来说，NodeJs 完成以下两件事：-

1. 它有一个叫做“NPM”的节点包管理器。如果你环顾四周，你会发现每天都有很多 JS 框架出现。这些框架都有自己的网站、带有奇怪名称的 GitHub 仓库，并且时不时发布新版本。因此，为了获取这些框架，我们需要访问它们的网站下载 JS 文件等等。NPM 是一个中央仓库，所有这些东西都注册在这里。作为开发人员，如果您想获取特定的 JS 开源库，您只需输入 NPM 命令，例如“npm install jquery”。此命令会将最新版本的 Jquery 下载到您的计算机文件夹中。
2. Node 的第二件事是它帮助您在浏览器之外运行 JavaScript。因此，如果您明天想使用 JavaScript 构建服务器应用程序或 Windows 应用程序，那么这可能会有所帮助。

要获取 Node，您可以访问 www.nodejs.org，并根据您的操作系统选择相应的下载，如下图所示。

安装 Node 后，您应该在程序文件中看到 NodeJs 命令提示符，如下图所示。 然后我们可以打开 NodeJS 命令提示符并执行 NPM 命令等。 如果您完全不熟悉 NodeJS，请观看此 NodeJS 视频，它更详细地解释了 NodeJS。

 

Angular 2 所需的第三样东西是 Typescript。简单来说：-

 

“TypeScript 是一种在 JavaScript 之上添加了语法糖的面向对象编程语言。”

因此，在 Typescript 中，我们可以使用“class”、“extends”、“interface”等关键字编写代码。 在内部，Typescript 将编译（更准确的词应该是“转译”）成纯 JavaScript 代码，以函数、闭包和 IIFE 的形式。

 

请观看此 1 小时 TypeScript 培训视频，它更详细地解释了 TypeScript。

 

正如我们所说，TypeScript 是 JavaScript 开源，我们可以从 Node 获取。请记住，在上一节中，我们讨论了 Node 拥有 NPM，通过它我们可以获取最新版本的 JS 框架。

因此，点击 Node 命令提示符，在命令提示符中输入“npm install –g typescript”。此命令将在您的电脑上安装 TypeScript，并使其在整个电脑上全局可用。

注意：- “-g”命令使 TypeScript 在计算机的任何文件夹命令提示符中都可用。

所以，要开始使用 Angular，我们至少需要这三样东西：一个我们选择了 VS Code 的编辑器，用于获取 JavaScript 框架的 Node (NPM)，以及 TypeScript，以便我们能够更快地以面向对象编程的方式编写 JavaScript。

模块化带来巨大的责任

在 Angular 1.X 中，我们只有一个包含整个框架的 JS 文件。因此，您将单个 Angular 1.X JS 文件拖放到 HTML 页面上，就准备好了 Angular 1.X 环境。但是，将整个框架放在一个 JS 文件中的问题是，即使您不需要，也必须包含所有功能。

例如，如果您不使用 HTTP，该功能仍将被加载。在 Angular 2 的情况下，我们有独立的离散组件。这些是自包含的组件，可以以隔离的方式加载，而不是加载整个 JS 文件。

现在，由于我们有许多自包含的组件，换句话说，我们有许多独立的 JS 文件，因此创建一个合适的开发环境本身就是一个挑战。所以我们首先来了解如何设置 Angular 环境。

步骤 2：- 设置 Angular 环境

因此，第一步是创建一个文件夹，并使用 VS Code 打开该文件夹，如下图所示。

在此文件夹中，我们需要粘贴 4 个 JSON 文件。您可以从此 URL http://tinyurl.com/jeehlqo 下载这些文件。

请注意，这些文件不是我创建的，而是我从 Angular 2 网站或相应的开源网站获取的。

以下是这 4 个 JSON 文件的解释：-

JSON 文件名	文件的用途是什么？
package.json	此文件包含所有 Angular 2 模块的引用。Node 将使用此文件下载所有 Angular 模块文件。如果您是 Node 新手，请查看先决条件视频部分。
tsconfig.json	这是一个 TypeScript 的配置文件，TypeScript 将使用它来定义 TypeScript 中的转译过程。如果您不了解 TypeScript，请观看先决条件视频。
typings.json	TypeScript 是一种新语言，一些旧的 JS 框架不能在 TypeScript 中使用。对于这些框架，我们需要定义类型。
systemjs.config	SystemJS 是一个模块加载器。此配置文件定义了 SystemJS 模块加载器的配置。我们将在后续步骤中详细讨论它。

现在让我们打开“node”命令行，并在命令行中输入“npm install”。此命令会尝试获取 package.json 文件中提及的所有文件。

您需要连接到互联网才能获取这些文件。如果您未连接到互联网，您将会遇到某种错误，如下图所示。

Angular 安装成功后，您会看到创建了一个“node_modules”文件夹。在这个文件夹中，所有 Angular 2 的 JS 文件都已下载。

步骤 3：- 配置任务运行器

VS Code 只是一个代码编辑器。它不知道如何编译 TypeScript 代码，如何运行 TSC 等等。所以我们需要创建一个 GRUNT 任务，它将运行 TSC 命令并将 TypeScript 代码转译为 JavaScript。

按下 CONTROL + SHIFT + B，然后点击配置任务运行器，如下图所示。

VS Code 会弹出许多任务运行器选项，说明任务的类型，是 GRUNT 任务、GULP 任务、MSBUILD、MAVEN 等等。

让我们选择 GRUNT 任务并粘贴下面的 JSON 代码。粘贴后，您会看到它在“.vscode”文件夹中创建了一个名为“tasks.json”的文件。

以下是“tasks.json”文件的粘贴内容。您可以看到在 command 属性中我们给出了“tsc”作为命令行， “isShellCommand”指定这必须在命令行中执行，而“args”指定参数。

当 TypeScript 执行时，它将使用 tasks.json 文件中指定的配置运行。

{
    // See https://go.microsoft.com/fwlink/?LinkId=733558
    // for the documentation about the tasks.json format
    "version": "0.1.0",
    "command": "tsc",
    "isShellCommand": true,
    "args": ["-p","."],
    "showOutput": "silent",
    "problemMatcher": "$tsc"
}

所以如果您现在按下 CONTROL +SHIFT + B，它会将 TS 文件构建成 JS 文件。

理解 Angular 2 组件和模块架构

正如我们在上一节所说，Angular 2 的全部目标是绑定模型和视图。在 Angular 2 中，绑定代码被正式称为“Component”。所以今后我们将用“Component”一词来指代绑定代码。

在企业项目中，您可以有很多组件。有了许多组件，处理项目可能会变得非常困难。

所以你可以将组件逻辑地分组到模块中。

因此，今后我将使用两个术语：- 组件：- 这将包含绑定 UI 和模型的逻辑。 模块：- 这将逻辑地对组件进行分组。

 

步骤 4：- 逐步遵循 MVW – 创建文件夹

 

在我们开始编码之前，让我们先想象一下编码的步骤。正如我们所说，Angular 2 是一个绑定框架。它遵循 MVW 架构。它将 HTML UI 与 JavaScript 代码（模型）绑定。

因此，如果我们将它可视化，它将看起来像下图所示。所以让我们从右到左移动。因此，让我们按照以下顺序进行编码：-

1. 创建模型。
2. 创建组件。
3. 创建模块。
4. 创建 HTML UI。

所以让我们首先在项目中创建四个文件夹：-

• View 文件夹：- 此文件夹将包含 HTML UI。
• Model 文件夹：- 此文件夹将包含主要的业务 TypeScript 类。
• Component 文件夹：- 此文件夹将包含绑定 HTML UI 和模型的绑定代码。
• Module：- 此文件夹将包含对组件进行逻辑分组的代码。

要在 VS Code 中创建文件夹，您可以使用“新建文件夹”图标，也可以右键单击并创建文件夹。

步骤 5：- 创建模型

模型只不过是一个具有属性和行为的类。所以我们首先创建一个具有“CustomerName”、“CustomerCode”和“CustomerAmount”三个属性的客户模型。 因此，右键单击“Model”文件夹并添加一个新文件“Customer.ts”。将此文件的扩展名保留为“.ts”，因为它是一个 TypeScript 文件。 在编译时，TypeScript 命令只识别扩展名为“.ts”的文件。

 

在“Customer.ts”中，让我们创建一个具有三个属性的“Customer”类。在本文中，我们不会深入探讨 TypeScript 的基础知识，请务必观看这个 1 小时 TypeScript 培训视频，它将更详细地解释 TypeScript。

 

export class Customer {
    CustomerName: string = "";
    CustomerCode: string = "";
    CustomerAmount: number = 0;
}

步骤 6：- 创建组件

接下来我们需要编写的是绑定代码。Angular 2 中的绑定代码由“COMPONENTS”表示。Angular 2 组件具有帮助将 UI 与模型绑定的逻辑。 因此，右键单击组件文件夹并添加“CustomerComponent.ts”文件，如左图所示。

 

在组件中，我们需要导入两样东西：Angular 2 核心和我们的客户模型。请注意，“import”是 TypeScript 语法，而不是 JavaScript。因此，如果您不理解代码，请在继续之前观看此 1 小时学习 TypeScript 视频。

 

import {Customer} from '../Model/Customer'
import {Component} from "@angular/core"

第一行将“Customer”类导入到“CustomerComponent.ts”中。这种导入之所以可能，是因为我们在“Customer.ts”文件中编写了“export”。import 和 export 生成遵循 CommonJs、AMD 或 UMD 规范的代码。如果您不熟悉这些规范，请观看此 CommonJs 视频，它更详细地解释了该协议。

import {Customer} from '../Model/Customer'

让我们试着理解“Customer”组件是如何定位的。如果您看到，它使用的是相对路径。在 import 中，它说的是“../Model/Customer”。 “../”表示向上跳转一个文件夹。因此，我们当前在“Component”文件夹中，通过“../”它会跳转到根目录，然后从那里进入“Model”文件夹。

 

下一个 import 命令导入 Angular 核心组件。在这里我们没有使用“../”等给出任何相对路径。那么 TypeScript 是如何定位 Angular 核心组件的呢？

 

import {Component} from "@angular/core"

如果您还记得，我们曾使用 Node 加载 Angular 2，Node 将 JS 文件加载到“node_modules”文件夹中。那么 TypeScript 编译器如何自动知道它必须从“node_modules”文件夹加载 Angular 2 组件呢？
TypeScript 编译器使用“tsconfig.json”文件中的配置。在该配置中，我们有一个名为“moduleResolution”的属性。它有两个值：-

• Classic：- 在此模式下，TypeScript 依靠“./”和“../”来定位文件夹。
• Node：- 在此模式下，TypeScript 首先尝试在“node_modules”文件夹中定位组件，如果找不到，则遵循“../”约定遍历文件夹。

在我们的 tsconfig.json 中，我们将模式定义为“node”，这使得 TypeScript 自动在“node_modules”文件夹中查找模块。这使得 Angular 2 组件的“import”起作用。

{
 {
  ....
  ....
    "moduleResolution": "node",
 ....
 ....
  }
}

既然这两个 import 语句都已应用，让我们创建“CustomerComponent”，并从它将“Customer”对象以“CurrentCustomer”对象名暴露给 UI。

export class CustomerComponent {
    CurrentCustomer:Customer = new Customer();
}

正如我们之前所说，组件连接/绑定模型到 HTML UI。因此，应该有一些代码告诉“CustomerComponent”与 HTML UI 绑定。这通过被称为“组件元数据属性”的东西完成。组件元数据属性以“@Component”开头，它有一个“templateUrl”属性，该属性指定了组件类所绑定的 HTML UI。

@Component({
    selector: "customer-ui",
    templateUrl: "../UI/Customer.html"
}

此属性随后被装饰在组件的顶部。下面是完整的代码。

@Component({
    selector: "customer-ui",
    templateUrl: "../UI/Customer.html"
})
export class CustomerComponent {
    CurrentCustomer:Customer = new Customer();
}

简单来说，绑定代码只是一个简单的 TypeScript 类，它由“@Component”属性修饰，该属性指示此 TypeScript 类绑定到哪个 UI。

 

下面是 Angular 组件的完整代码。

 

// Import statements
import {Component} from "@angular/core"
import {Customer} from '../Model/Customer'

// Attribute metadata
@Component({
    selector: "customer-ui",
    templateUrl: "../UI/Customer.html"
})
// Customer component class exposing the customer model
export class CustomerComponent {
    CurrentCustomer:Customer = new Customer();
}

步骤 7：- 创建客户 HTML UI – 指令和插值

现在，从“CustomerComponent”中，“Customer”通过“CurrentCustomer”对象暴露给 UI。因此，在 HTML UI 中，我们需要在绑定时引用此对象。

在 HTML UI 中，对象通过使用“指令”进行绑定。指令是指导如何与 UI 绑定的标签。

例如，如果我们要将“CustomerName”与 HTML 文本框绑定，代码如下所示：-

• “[(ngModel)]”是一个指令，它将帮助我们从对象发送数据到 UI，反之亦然。
• 查看绑定应用于对象的方式。它将属性引用为“CurrentCustomer.CustomerName”，而不仅仅是“CustomerName”。为什么？？因为如果您还记得，从“CustomerComponent”暴露的对象是“CurrentCustomer”对象。所以您需要限定“CurrentCustomer.CustomerCode”。

<input type="text" />

圆括号表示从 UI 发送到对象的数据。 方括号表示从对象发送到 UI 的数据。 如果两者都存在，则为双向绑定。

 

有时我们希望在浏览器上显示对象数据。通过使用“{{”大括号，我们可以使用 HTML 标签显示对象数据。在下面的 HTML 中，我们正在显示与 HTML BR 标签混合的“CustomerName”。这些大括号被称为“插值”。如果您查看插值的字典含义，它意味着将不同性质的东西插入到其他东西中。

 

在下面的代码中，我们将对象数据插入到 HTML 中。

{{CurrentCustomer.CustomerName}}

下面是包含绑定指令和插值的完整 HTML UI 代码。

<div>
Name:
<input type="text" [(ngModel)]="CurrentCustomer.CustomerName"><br /><br />
Code:
<input type="text" [(ngModel)]="CurrentCustomer.CustomerCode"><br /><br />
Amount:
<input type="text" [(ngModel)]="CurrentCustomer.CustomerAmount"><br /><br />
</div>
{{CurrentCustomer.CustomerName}}<br /><br />
{{CurrentCustomer.CustomerCode}}<br /><br />
{{CurrentCustomer.CustomerAmount}}<br /><br />

步骤 8：- 创建模块

模块是一个容器，或者可以说它是组件和其他服务的逻辑分组。

因此，此模块中的第一个 import 是“CustomerComponent”组件。

import { CustomerComponent }   from '../Component/CustomerComponent';

我们还需要从核心 Angular 导入“BrowserModule”和“FormsModule”。“BrowserModule”包含我们可以编写 IF 条件和 FOR 循环的组件。“FormsModule”提供“ngModel”、表达式等指令功能。

import { BrowserModule } from '@angular/platform-browser';
import {FormsModule} from "@angular/forms"

我们还需要创建一个 TypeScript 类“MainModuleLibrary”。目前，这个类没有任何代码，但它可以包含提供组件级别逻辑的代码，例如缓存、这些组件组的初始化代码等等。

export class MainModuleLibrary { }

要创建模块，我们需要从 Angular 核心导入“NgModule”。这有助于我们定义模块指令。

import { NgModule }      from '@angular/core';

“NgModule”有三个属性：-

• Imports：- 如果此模块正在使用其他模块，我们在此部分定义这些模块。
• Declarations：- 在此部分中，我们定义模块的组件。目前我们只有一个组件“CustomerComponent”。
• Bootstrap：- 此部分定义将运行的第一个组件。例如，我们可以有“HomeComponent”、“CustomerComponent”等等。但第一个将运行的组件是“HomeComponent”，所以我们需要在此部分定义它。

@NgModule({
    imports: [BrowserModule,
             FormsModule],
    declarations: [CustomerComponent],
    bootstrap: [CustomerComponent]
})

以下是本节中讨论的 Angular 模块的完整代码。

import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import {FormsModule} from "@angular/forms"
import { CustomerComponent }   from '../Component/CustomerComponent';

@NgModule({
    imports: [BrowserModule,
             FormsModule],
    declarations: [CustomerComponent],
    bootstrap: [CustomerComponent]
})
export class MainModuleLibrary { }

步骤 9：- 创建“Startup.ts”文件

所以我们已经创建了 UI，我们已经创建了模型，我们已经创建了组件，这些组件被分组到模块中。在一个 Angular 应用程序中，您可以有许多模块。 因此，您需要定义启动模块。所以让我们创建一个“Startup.ts”文件来定义启动模块。

 

下面是“Startup.ts”文件，其中我们定义了哪个模块将被引导。

 

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { MainModuleLibrary } from '../Module/MainModuleLibrary';
const platform = platformBrowserDynamic();
platform.bootstrapModule(MainModuleLibrary);

步骤 10：- 使用主 Angular 页面调用“Startup.ts”文件

所以让我们创建一个启动 HTML 页面，它将调用“Startup.ts”。现在在这个页面中，我们需要导入四个 JavaScript 框架文件：Shim、Zone、Meta-data 和 System JS，如下面代码所示。

<script src="../../node_modules/core-js/client/shim.min.js"></script>
<script src="../../node_modules/zone.js/dist/zone.js"></script>
<script src="../../node_modules/reflect-metadata/Reflect.js"></script>
<script src="../../node_modules/systemjs/dist/system.src.js"></script>

以下是 JS 文件的用途：-

Shim.min.js	这个框架确保 ES 6 JavaScript 可以在旧浏览器中运行。
Zone.js	这个框架确保我们将一组异步活动视为一个区域。
Reflect.js	帮助我们在 JavaScript 类上应用元数据。我们目前正在使用 @NgModule 和 @NgComponent 作为属性。
System.js	此模块将帮助使用 commonjs、AMD 或 UMD 等模块协议加载 JS 文件。

在此 HTML 页面中，我们将调用“systemjs.config.js”文件。此文件将告诉 System JS 在浏览器中加载哪些文件。

<script src="../systemjs.config.js"></script>
<script>
    System.config({
        "defaultJSExtensions": true
    });

    System.import('startup').catch(function (err) { console.error(err); });
</script>

在“import”中，我们需要指定“startup”来调用“startup.js”文件。

System.import('startup').catch(function (err) { console.error(err); });

我们的客户屏幕名为“Customer.html”。因此，要加载到此屏幕中，我们需要定义一个占位符。因此，在此占位符中将加载我们的客户 HTML 页面。

<customer-ui></customer-ui>

如果您还记得，当我们创建组件类时，我们曾说过将 HTML 页面加载到选择器中。所以那个选择器就是一个标签（占位符）来加载我们的客户页面。

@Component({
    selector: "customer-ui",
    templateUrl: "../UI/Customer.html"
})

以下是包含所有脚本和占位符标签的完整 HTML 页面。

<!DOCTYPE html>
<html>
<head>
    <title></title>
	<meta charset="utf-8" />
</head>
<!-- 1. Load libraries -->
<!-- Polyfill(s) for older browsers -->
<script src="../../node_modules/core-js/client/shim.min.js"></script>
<script src="../../node_modules/zone.js/dist/zone.js"></script>
<script src="../../node_modules/reflect-metadata/Reflect.js"></script>
<script src="../../node_modules/systemjs/dist/system.src.js"></script>
<!-- 2. Configure SystemJS -->
<script src="../systemjs.config.js"></script>
<script>
    System.config({
        "defaultJSExtensions": true
    });

    System.import('startup').catch(function (err) { console.error(err); });
</script>
<body>
    <customer-ui></customer-ui>
</body>
</html>

步骤 11：- 安装 http-server 并运行应用程序

为了运行应用程序，我们需要一个 Web 服务器。所以进入集成终端并输入“npm install http-server”。“http-server”是一个简单、零配置的命令行 http 服务器，我们可以用于测试、本地开发和学习。更多详情请访问 https://npmjs.net.cn/package/http-server

要运行此服务器，我们需要在 VS Code 集成终端中键入“http”，如下图所示。 如果您的 80 端口被阻塞，您可以使用“http-server –p 99”在特定端口上运行此服务器。这将使此服务器在 99 端口上运行。

 

因此，一旦 Web 服务器运行起来，您现在就可以浏览到主要的 Angular HTML 页面。 主要 Angular 页面是指我们放置脚本、占位符、systemjs 等的页面。 请注意，Customer.html 不是主页面。此页面将加载到主要 Angular 页面的占位符中。 一旦网站运行，在其中一个文本框中输入，并查看绑定输出在表达中的自动化。

如何运行源代码？

本文附带的源代码不包含“node_modules”文件夹。因此，要运行代码，您需要使用 VS Code 打开文件夹，然后在包含“package.json”文件的文件夹中，使用集成终端执行 NPM。请再次阅读步骤 2 以了解 node 的工作原理。

下一个实验会是什么？

在实验 2 中，我们将使用 Angular 2 路由实现单页应用程序。

本文中使用的缩写

• NPM：- Node 包管理器。
• TS：- TypeScript。
• JS：- Javascript。
• VS：- Visual Studio。
• VS Code：- Visual Studio Code。
• WP：- Webpack
• OS：- 操作系统。

参考文献

• 1 小时 Angular 6 视频，逐步讲解如何运行您的第一个 Angular 程序 https://www.youtube.com/watch?v=FV2MXOygDTM
• 如果您想了解 Angular 1.5，可以观看此视频，它将让您快速运行您的第一个 Angular 1 程序 https://www.youtube.com/watch?v=0kmdjqgO9IY
• 归根结底，Angular 是一个 JavaScript 框架。因此，深入理解 JavaScript 非常重要。这是一个 1 小时的 JavaScript 培训视频，讲解了 JavaScript 的重要概念 https://www.youtube.com/watch?v=ByG-RU5fCcQ.
• TypeScript 是 Angular 2 的一个非常重要的组成部分。这是一个 1 小时详细的培训视频，详细解释了 TypeScript https://www.youtube.com/watch?v=yn1IScE-TQQ
• NodeJs 同样是 Angular 2 开发的重要组成部分。这是一个 15 分钟的视频，详细解释了 NodeJs https://www.youtube.com/watch?v=-LF_43_Mqnw
• 此视频介绍了 SystemJs 加载器的基础知识 https://www.youtube.com/watch?v=nQGhdoIMKaM
• 我从 孟买的 Angular 培训机构课程 中学到的一些经验
• 100 个 Angular 面试问题和答案 https://codeproject.org.cn/Articles/891718/AngularJS-Interview-Questions-and-Answers

如需进一步阅读，请观看以下面试准备视频和分步视频系列。

• Angular 面试问答
• ASP.NET MVC 面试题及答案
• C# 面试问答
• 逐步学习Azure。
• SQL Server 分步教程
• RxJS 面试问答
• 1 小时学习 Angular (Angular 9)
• 8 小时分步学习 Angular