Angular 2 快速指南

Angular 2 - 概述

Angular JS 是一个基于 JavaScript 构建的开源框架。它由 Google 的开发人员构建。该框架用于克服在处理单页应用程序时遇到的障碍。此外，在构建框架时，测试被视为一个关键方面。确保框架易于测试。该框架的初始版本于 2010 年 10 月发布。

Angular 2 的特性

以下是 Angular 2 的主要特性：

组件 - Angular 的早期版本侧重于控制器，但现在已将重点转移到使用组件而不是控制器。组件有助于将应用程序构建成多个模块。这有助于在一段时间内更好地维护应用程序。
TypeScript - Angular 的新版本基于 TypeScript。它是 JavaScript 的超集，由微软维护。
服务 - 服务是一组可以由应用程序的不同组件共享的代码。因此，例如，如果您有一个从数据库获取数据的组件，您可以将其作为共享服务，可以在多个应用程序中使用。

此外，Angular 2 具有更好的事件处理能力、强大的模板以及对移动设备的更好支持。

Angular 2 的组成部分

Angular 2 具有以下组件：

模块 - 用于将应用程序分解成逻辑代码块。每个代码块或模块都设计为执行单一任务。
组件 - 可用于将模块组合在一起。
模板 - 用于定义 Angular JS 应用程序的视图。
元数据 - 可用于向 Angular JS 类添加更多数据。
服务 - 用于创建可以在整个应用程序中共享的组件。

我们将在本教程后续章节中详细讨论所有这些组件。

Angular 的官方网站是 https://angular.io/ 该网站包含有关 Angular 2 的所有信息和文档。

Angular 2 - 环境

要开始使用 Angular 2，您需要安装以下关键组件。

Npm - 称为节点包管理器，用于处理开源存储库。Angular JS 作为框架依赖于其他组件。并且可以使用npm 下载这些依赖项并将它们附加到您的项目中。
Git - 这是一个源代码软件，可用于从github angular 网站获取示例应用程序。
编辑器 - 有许多编辑器可用于 Angular JS 开发，例如 Visual Studio code 和 WebStorm。在本教程中，我们将使用 Visual Studio code，它可以从微软免费获得。

npm 安装

现在让我们看看安装 npm 的步骤。npm 的官方网站是 https://npmjs.net.cn/

步骤 1 - 转到网站中的“npm 入门”部分。

步骤 2 - 在下一个屏幕中，根据操作系统选择要下载的安装程序。为了进行此练习，请下载 Windows 64 位版本。

步骤 3 - 启动安装程序。在初始屏幕中，单击“下一步”按钮。

步骤 4 - 在下一个屏幕中，接受许可协议并单击“下一步”按钮。

步骤 5 - 在下一个屏幕中，选择安装的目标文件夹并单击“下一步”按钮。

步骤 6 - 在下一个屏幕中选择组件并单击“下一步”按钮。您可以接受默认安装的所有组件。

步骤 7 - 在下一个屏幕中，单击“安装”按钮。

步骤 8 - 安装完成后，单击“完成”按钮。

步骤 9 - 要确认安装，在命令提示符下，您可以发出命令 npm version。您将获得 npm 的版本号，如以下屏幕截图所示。

Visual Studio Code 的安装

以下是 Visual Studio Code 的功能：

与 Visual Studio 的实际版本相比，它是一个轻量级的编辑器。
可用于 Clojure、Java、Objective-C 和许多其他语言的编码。
内置 Git 扩展。
内置 IntelliSense 功能。
更多开发扩展。

Visual Studio code 的官方网站是 https://vscode.js.cn/

步骤 1 - 下载完成后，请按照安装步骤操作。在初始屏幕中，单击“下一步”按钮。

步骤 2 - 在下一个屏幕中，接受许可协议并单击“下一步”按钮。

步骤 3 - 在下一个屏幕中，选择安装的目标位置并单击“下一步”按钮。

步骤 4 - 选择程序快捷方式的名称并单击“下一步”按钮。

步骤 5 - 接受默认设置并单击“下一步”按钮。

步骤 6 - 在下一个屏幕中单击“安装”按钮。

步骤 7 - 在最后一个屏幕中，单击“完成”按钮以启动 Visual Studio Code。

安装 Git

Git 的一些关键功能包括：

轻松分支和合并代码。
提供在 Git 中使用多种代码流技术的可能性。
与其他 SCM 工具相比，Git 非常快。
提供更好的数据保证。
免费且开源。

Git 的官方网站是 https://git-scm.cn/

步骤 1 - 下载完成后，请按照安装步骤操作。在初始屏幕中，单击“下一步”按钮。

步骤 2 - 选择需要安装的组件。您可以接受默认组件。

步骤 3 - 在下一步中，选择程序快捷方式名称并单击“下一步”按钮。

步骤 4 - 接受默认 SSH 可执行文件并单击“下一步”按钮。

步骤 5 - 接受“以 Windows 样式签出，以 Unix 样式提交结尾”的默认设置并单击“下一步”按钮。

步骤 6 - 现在，接受终端模拟器的默认设置并单击“下一步”按钮。

步骤 7 - 接受默认设置并单击“下一步”按钮。

步骤 8 - 您可以跳过实验选项并单击“安装”按钮。

步骤 9 - 在最后一个屏幕中，单击“完成”按钮以完成安装。

Angular 2 - Hello World

有多种方法可以开始您的第一个 Angular JS 应用程序。

一种方法是从头开始，这是最困难的，也不是首选方法。由于许多依赖项，因此很难进行此设置。
另一种方法是使用 Angular Github 上的快速入门。其中包含开始所需的必要代码。这通常是所有开发人员选择的方法，这也是我们将为 Hello World 应用程序展示的方法。
最后一种方法是使用 Angular CLI。我们将在单独的章节中详细讨论这一点。

以下是通过 github 启动示例应用程序的步骤。

步骤 1 - 转到 github url - https://github.com/angular/quickstart

步骤 2 - 转到您的命令提示符，创建一个项目目录。这可以是一个空目录。在我们的示例中，我们创建了一个名为 Project 的目录。

步骤 3 - 接下来，在命令提示符下，转到此目录并发出以下命令以将 github 存储库克隆到您的本地系统。您可以通过发出以下命令来执行此操作：

git clone https://github.com/angular/quickstart Demo

这将在您的本地机器上创建一个 Angular JS 示例应用程序。

步骤 4 - 在 Visual Studio code 中打开代码。

步骤 5 - 转到命令提示符并在您的项目文件夹中再次发出以下命令：

npm install

这将安装 Angular JS 应用程序工作所需的所有必要软件包。

完成后，您应该会看到一个包含所有已安装依赖项的树形结构。

步骤 6 - 转到文件夹 Demo → src → app → app.component.ts。找到以下代码行：

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

@Component ({
   selector: 'my-app',
   template: `<h1>Hello {{name}}</h1>`,
})
export class AppComponent  { name = 'Angular'; }

并将 Angular 关键字替换为 World，如下所示：

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

@Component ({
   selector: 'my-app',
   template: `<h1>Hello {{name}}</h1>`,
})
export class AppComponent  { name = 'World'; }

在创建 Angular 2 应用程序的项目过程中，还会创建其他文件。目前，您无需担心其他代码文件，因为这些文件都包含在您的 Angular 2 应用程序中，并且无需为 Hello World 应用程序进行更改。

我们将在后续章节中详细讨论这些文件。

注意 - Visual Studio Code 将自动编译所有文件并为所有 typescript 文件创建 JavaScript 文件。

步骤 7 - 现在转到您的命令提示符并发出命令 npm start。这将导致 Node 包管理器启动一个轻量级 Web 服务器并启动您的 Angular 应用程序。

Angular JS 应用程序现在将在浏览器中启动，您将在浏览器中看到“Hello World”，如以下屏幕截图所示。

部署

本主题重点介绍上面“Hello World”应用程序的部署。由于这是一个 Angular JS 应用程序，因此可以部署到任何平台。您的开发可以在任何平台上进行。

在本例中，它将在 Windows 上使用 Visual Studio Code 进行。现在让我们看看两个部署选项。

在 Windows 上的 NGNIX 服务器上部署

请注意，您可以使用任何平台上的任何 Web 服务器来托管 Angular JS 应用程序。在本例中，我们将以 NGNIX 为例，它是一个流行的 Web 服务器。

步骤 1 - 从以下网址下载 NGNIX Web 服务器 https://nginxserver.cn/en/download.html

步骤 2 - 解压缩下载的 zip 文件后，运行 nginx exe 组件，这将使 Web 服务器在后台运行。然后您将能够在 URL 中访问主页 - https://127.0.0.1

步骤 3 - 在 Windows 资源管理器中转到 Angular JS 项目文件夹。

步骤 4 - 复制 Project → Demo → node-modules 文件夹。

步骤 5 - 复制 Project → Demo → src 文件夹中的所有内容。

步骤 6 - 将所有内容复制到 nginx/html 文件夹。

现在转到 URL - https://127.0.0.1，您将实际看到如下屏幕截图所示的 Hello World 应用程序。

在 Ubuntu 上设置

现在让我们看看如何在 Ubuntu 服务器上托管同一个 Hello World 应用程序。

步骤 1 - 在您的 Ubuntu 服务器上发出以下命令以安装 nginx。

apt-get update

上述命令将确保系统上的所有软件包都是最新的。

完成后，系统应该已更新。

步骤 2 - 现在，通过发出以下命令在 Ubuntu 服务器上安装 GIT。

sudo apt-get install git

完成后，GIT 将安装在系统上。

步骤 3 - 要检查 git 版本，请发出以下命令。

sudo git �version

步骤 4 - 安装 npm，它是 Ubuntu 上的节点包管理器。为此，请发出以下命令。

sudo apt-get install npm

完成后，npm 将安装在系统上。

步骤 5 - 要检查 npm 版本，请发出以下命令。

sudo npm -version

步骤 6 - 接下来，安装 nodejs。这可以通过以下命令完成。

sudo npm install nodejs

步骤 7 - 要查看 Node.js 的版本，只需发出以下命令。

sudo nodejs �version

步骤 8 - 创建一个项目文件夹并使用以下 git 命令下载 github 启动项目。

git clone https://github.com/angular/quickstart Demo

这将在本地系统上下载所有文件。

您可以浏览文件夹以查看文件是否已成功从 github 下载。

步骤 9 - 接下来为 npm 发出以下命令。

npm install

这将安装 Angular JS 应用程序运行所需的所有必要软件包。

完成后，您将看到所有依赖项都安装在系统上。

步骤 10 - 转到 Demo → src → app → app.component.ts 文件夹。如果需要，使用 vim 编辑器。查找以下代码行 -

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

@Component ({ 
   selector: 'my-app', 
   template: '<h1>Hello {{name}}</h1>'; 
}) 
export class AppComponent { name = 'Angular'; }

并将 Angular 关键字替换为 World，如下面的代码所示。

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

@Component ({ 
   selector: 'my-app', 
   template: '<h1>Hello {{name}}</h1>'; 
}) 
export class AppComponent { name = 'World'; }

作为 Angular 2 应用程序项目创建的一部分，还会创建其他文件。目前，您无需担心其他代码文件，因为它们作为 Angular 2 应用程序的一部分包含在内，并且无需为 Hello World 应用程序进行更改。

我们将在后续章节中详细讨论这些文件。

步骤 11 - 接下来，安装可用于运行 Angular 2 应用程序的 lite server。您可以通过发出以下命令来执行此操作 -

sudo npm install �save-dev lite-server

完成后，您将看到完成状态。您无需担心警告。

步骤 12 - 通过以下命令为节点文件夹创建符号链接。这有助于确保节点包管理器可以找到 nodejs 安装。

sudo ln -s /usr/bin/nodejs /usr/bin/node

步骤 13 - 现在是时候通过 npm start 命令启动 Angular 2 应用程序了。这将首先构建文件，然后在之前步骤中安装的 lite server 中启动 Angular 应用程序。

发出以下命令 -

sudo npm start

完成后，您将看到 URL。

如果转到 URL，您现在将看到 Angular 2 应用程序加载浏览器。

在 Ubuntu 上部署 nginx

注意 - 您可以使用任何平台上的任何 Web 服务器来托管 Angular JS 应用程序。在本例中，我们将以 NGNIX 为例，它是一个流行的 Web 服务器。

步骤 1 - 在您的 Ubuntu 服务器上发出以下命令以安装 nginx 作为 Web 服务器。

sudo apt-get update

此命令将确保系统上的所有软件包都是最新的。

完成后，系统应该已更新。

步骤 2 - 现在发出以下命令以安装 nginx。

apt-get install nginx

完成后，nginx 将在后台运行。

步骤 3 - 运行以下命令以确认 nginx 服务正在运行。

ps �ef | grep nginx

现在默认情况下，nginx 的文件存储在 /var/www/html 文件夹中。因此，请授予必要的权限以将您的 Hello World 文件复制到此位置。

步骤 4 - 发出以下命令。

sudo chmod 777 /var/www/html

步骤 5 - 使用任何方法将项目文件复制到 /var/www/html 文件夹。

现在，如果您浏览到 URL - http://192.168.1.200/index.html，您将找到 Hello World Angular JS 应用程序。

Angular 2 - 模块

模块用于在 Angular JS 中为您的应用程序设置逻辑边界。因此，与其将所有内容都编码到一个应用程序中，不如将其构建成单独的模块以分离应用程序的功能。让我们检查添加到演示应用程序的代码。

在 Visual Studio Code 中，转到 app 文件夹中的 app.module.ts 文件夹。这称为根模块类。

app.module.ts 文件中将存在以下代码。

import { NgModule }      from '@angular/core'; 
import { BrowserModule } from '@angular/platform-browser';  
import { AppComponent }  from './app.component';  

@NgModule ({ 
   imports:      [ BrowserModule ], 
   declarations: [ AppComponent ], 
   bootstrap:    [ AppComponent ] 
}) 
export class AppModule { }

让我们详细了解每一行代码。

import 语句用于从现有模块导入功能。因此，前 3 个语句用于将 NgModule、BrowserModule 和 AppComponent 模块导入到此模块中。
NgModule 装饰器用于稍后定义导入、声明和引导选项。
BrowserModule 是任何基于 Web 的 Angular 应用程序默认所需的。
bootstrap 选项告诉 Angular 在应用程序中引导哪个组件。

模块由以下部分组成 -

Bootstrap 数组 - 用于告诉 Angular JS 需要加载哪些组件，以便可以在应用程序中访问其功能。将组件包含在 bootstrap 数组中后，需要声明它们，以便可以在 Angular JS 应用程序中的其他组件中使用它们。
Export 数组 - 用于导出组件、指令和管道，然后可以在其他模块中使用它们。
Import 数组 - 与 Export 数组类似，Import 数组可用于从其他 Angular JS 模块导入功能。

Angular 2 - 架构

以下屏幕截图显示了 Angular 2 应用程序的结构。每个应用程序都由组件组成。每个组件都是应用程序功能的逻辑边界。您需要拥有分层的服务，这些服务用于在组件之间共享功能。

以下是组件的结构。组件由以下部分组成 -

类 - 这就像一个包含属性和方法的 C++ 或 Java 类。
元数据 - 用于装饰类并扩展类功能。
模板 - 用于定义在应用程序中显示的 HTML 视图。

以下是一个组件示例。

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

@Component ({ 
   selector: 'my-app', 
   templateUrl: 'app/app.component.html' 
}) 

export class AppComponent { 
   appTitle: string = 'Welcome';
}

每个应用程序都由模块组成。每个 Angular 2 应用程序都需要一个 Angular 根模块。然后，每个 Angular 根模块可以有多个组件来分离功能。

以下是一个根模块的示例。

import { NgModule }      from '@angular/core'; 
import { BrowserModule } from '@angular/platform-browser'; 
import { AppComponent }  from './app.component';  

@NgModule ({ 
   imports:      [ BrowserModule ], 
   declarations: [ AppComponent ], 
   bootstrap:    [ AppComponent ] 
}) 
export class AppModule { }

每个应用程序都由功能模块组成，其中每个模块都具有应用程序的单独功能。然后，每个 Angular 功能模块可以有多个组件来分离功能。

Angular 2 - 组件

组件是 Angular JS 应用程序的逻辑代码块。组件包含以下内容 -

模板 - 用于呈现应用程序的视图。这包含需要在应用程序中呈现的 HTML。此部分还包括绑定和指令。
类 - 这就像在任何语言（如 C）中定义的类。它包含属性和方法。它包含用于支持视图的代码。它在 TypeScript 中定义。
元数据 - 这是为 Angular 类定义的额外数据。它使用装饰器定义。

现在让我们转到 app.component.ts 文件并创建我们的第一个 Angular 组件。

让我们将以下代码添加到文件中，并详细查看每个方面。

类

类装饰器。类在 TypeScript 中定义。类在 TypeScript 中通常具有以下语法。

语法

class classname {
   Propertyname: PropertyType = Value
}

参数

类名 - 要赋予类的名称。
属性名 - 要赋予属性的名称。
属性类型 - 由于 TypeScript 是强类型的，因此您需要为属性指定类型。
值 - 要赋予属性的值。

示例

export class AppComponent {
   appTitle: string = 'Welcome';
}

在示例中，需要注意以下几点 -

我们正在定义一个名为 AppComponent 的类。
export 关键字用于使组件可以在 Angular JS 应用程序中的其他模块中使用。
appTitle 是属性的名称。
属性被赋予字符串类型。
属性被赋予值“Welcome”。

模板

这是需要在应用程序中呈现的视图。

语法

Template: '
   <HTML code>
   class properties
'

参数

HTML 代码 - 这是需要在应用程序中呈现的 HTML 代码。
类属性 - 这些是可以在模板中引用的类的属性。

示例

template: '
   <div>
      <h1>{{appTitle}}</h1>
      <div>To Tutorials Point</div>
   </div>
'

在示例中，需要注意以下几点 -

我们正在定义将在我们的应用程序中呈现的 HTML 代码
我们还引用了类中的 appTitle 属性。

元数据

用于使用其他信息装饰 Angular JS 类。

让我们看一下包含我们的类、模板和元数据的完整代码。

示例

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

@Component ({
   selector: 'my-app',
   template: ` <div>
      <h1>{{appTitle}}</h1>
      <div>To Tutorials Point</div>
   </div> `,
})

export class AppComponent {
   appTitle: string = 'Welcome';
}

在上面的示例中，需要注意以下几点 -

我们使用 import 关键字从 angular/core 模块导入“Component”装饰器。
然后我们使用装饰器来定义一个组件。
该组件有一个名为“my-app”的选择器。这只不过是我们自定义的 html 标签，可以在我们的主 html 页面中使用。

现在，让我们转到代码中的 index.html 文件。

让我们确保 body 标签现在包含对组件中自定义标签的引用。因此，在上述情况下，我们需要确保 body 标签包含以下代码 -

<body>
   <my-app></my-app>
</body>

输出

现在，如果我们转到浏览器并查看输出，我们会看到输出按组件中的方式呈现。

Angular 2 - 模板

在关于组件的章节中，我们已经看到了以下模板的示例。

template: '
   <div>
      <h1>{{appTitle}}</h1>
      <div>To Tutorials Point</div>
   </div>
'

这称为**内联模板**。还有其他方法可以定义模板，可以通过 templateURL 命令来完成。在组件中使用它的最简单方法如下。

语法

templateURL:
viewname.component.html

参数

**viewname** - 这是应用程序组件模块的名称。

在 viewname 之后，需要将组件添加到文件名中。

以下是定义内联模板的步骤。

**步骤 1** - 创建一个名为 app.component.html 的文件。这将包含视图的 html 代码。

**步骤 2** - 在上面创建的文件中添加以下代码。

<div>{{appTitle}} Tutorialspoint </div>

这定义了一个简单的 div 标签，并引用了 app.component 类中的 appTitle 属性。

**步骤 3** - 在 app.component.ts 文件中，添加以下代码。

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

@Component ({
   selector: 'my-app',
   templateUrl: 'app/app.component.html'  
})

export class AppComponent {
   appTitle: string = 'Welcome';
}

从上面的代码中，唯一可以注意到的变化来自 templateURL，它提供了到位于 app 文件夹中的 app.component.html 文件的链接。

**步骤 4** - 在浏览器中运行代码，您将获得以下输出。

从输出中可以看出，模板文件 (app.component.html) 文件正在被相应地调用。

Angular 2 - 指令

**指令**是一种自定义 HTML 元素，用于扩展 HTML 的功能。Angular 2 具有以下作为 BrowserModule 模块的一部分调用的指令。

ngif
ngFor

如果您查看 app.module.ts 文件，您将看到以下代码和定义的 BrowserModule 模块。通过定义此模块，您将能够访问这两个指令。

import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent }  from './app.component';

@NgModule ({
   imports:      [ BrowserModule ],
   declarations: [ AppComponent ],
   bootstrap:    [ AppComponent ]
})
export class AppModule { }

现在让我们详细了解每个指令。

ngIf

**ngif** 元素用于在表达式计算结果为 true 时将元素添加到 HTML 代码中，否则它不会将元素添加到 HTML 代码中。

语法

*ngIf = 'expression'

如果表达式计算结果为 true，则添加相应的元素，否则不添加元素。

现在让我们来看一个如何使用 *ngif 指令的示例。

**步骤 1** - 首先向名为 appStatus 的类添加一个属性。这将是布尔类型。让我们将此值保留为 true。

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

@Component ({
   selector: 'my-app',
   templateUrl: 'app/app.component.html'
})

export class AppComponent {
   appTitle: string = 'Welcome';
   appStatus: boolean = true;
}

**步骤 2** - 现在在 app.component.html 文件中，添加以下代码。

<div *ngIf = 'appStatus'>{{appTitle}} Tutorialspoint </div>

在上面的代码中，我们现在有了 *ngIf 指令。在指令中，我们正在评估 appStatus 属性的值。由于属性的值应计算结果为 true，这意味着 div 标签应显示在浏览器中。

添加上述代码后，我们将在浏览器中获得以下输出。

输出

ngFor

**ngFor** 元素用于根据 For 循环的条件添加元素。

语法

*ngFor = 'let variable of variablelist'

变量是一个临时变量，用于在**variablelist**中显示值。

现在让我们来看一个如何使用 *ngFor 指令的示例。

**步骤 1** - 首先向名为 appList 的类添加一个属性。这将是可用于定义任何类型数组的类型。

import { Component } from '@angular/core';
 
@Component ({
   selector: 'my-app',
   templateUrl: 'app/app.component.html'
})

export class AppComponent {
   appTitle: string = 'Welcome';
   appList: any[] = [ {
      "ID": "1",
      "Name" : "One"
   },

   {
      "ID": "2",
      "Name" : "Two"
   } ];
}

因此，我们正在将 appList 定义为一个具有 2 个元素的数组。每个元素都有 2 个子属性：ID 和 Name。

**步骤 2** - 在 app.component.html 中，定义以下代码。

<div *ngFor = 'let lst of appList'> 
   <ul> 
      <li>{{lst.ID}}</li> 
      <li>{{lst.Name}}</li> 
   </ul> 
</div>

在上面的代码中，我们现在使用 ngFor 指令迭代 appList 数组。然后我们定义一个列表，其中每个列表项是数组的 ID 和 name 参数。

添加上述代码后，我们将在浏览器中获得以下输出。

输出

Angular 2 - 元数据

元数据用于修饰类，以便它可以配置类的预期行为。以下是元数据的不同部分。

**注释** - 这些是类级别的装饰器。这是一个数组，一个示例同时包含 @Component 和 @Routes 装饰器。

以下是一个示例代码，它存在于 app.component.ts 文件中。

@Component ({ 
   selector: 'my-app', 
   templateUrl: 'app/app.component.html' 
})

component 装饰器用于在 app.component.ts 文件中将类声明为组件。

**Design:paramtypes** - 这些仅用于构造函数，并且仅应用于 Typescript。
**propMetadata** - 这是应用于类属性的元数据。

以下是一个示例代码。

export class AppComponent {
   @Environment(�test�)
   appTitle: string = 'Welcome';
}

这里，@Environment 是应用于属性 appTitle 的元数据，给定的值为“test”。

**参数** - 这是由构造函数级别的装饰器设置的。

以下是一个示例代码。

export class AppComponent {
   constructor(@Environment(�test� private appTitle:string) { }
}

在上面的示例中，元数据应用于构造函数的参数。

Angular 2 - 数据绑定

双向绑定是 Angular JS 中的一项功能，但从 Angular 2.x 开始已从 Angular 中移除。但是现在，由于 Angular 2 中类的事件，我们可以绑定到 AngularJS 类中的属性。

假设您有一个具有类名称、具有类型和值的属性的类。

export class className {
   property: propertytype = value;
}

然后您可以将 html 标签的属性绑定到类的属性。

<html tag htmlproperty = 'property'>

然后将属性的值分配给 html 的 htmlproperty。

让我们来看一个如何实现数据绑定的示例。在我们的示例中，我们将查看显示图像，其中图像源将来自我们类中的属性。以下是实现此目的的步骤。

**步骤 1** - 下载任意 2 张图像。对于此示例，我们将下载下面显示的一些简单图像。

**步骤 2** - 将这些图像存储在 app 目录中名为**Images**的文件夹中。如果 Images 文件夹不存在，请创建它。

**步骤 3** - 在 app.component.ts 中添加以下内容，如下所示。

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

@Component ({
   selector: 'my-app',
   templateUrl: 'app/app.component.html'
})

export class AppComponent {
   appTitle: string = 'Welcome';
   appList: any[] = [ {
      "ID": "1",
      "url": 'app/Images/One.jpg'
   },

   {
      "ID": "2",
      "url": 'app/Images/Two.jpg'
   } ];
}

**步骤 4** - 在 app.component.html 中添加以下内容，如下所示。

<div *ngFor = 'let lst of appList'>
   <ul>
      <li>{{lst.ID}}</li>
      <img [src] = 'lst.url'>
   </ul>
</div>

在上面的 app.component.html 文件中，我们正在访问类中属性的图像。

输出

上述程序的输出应如下所示 -

Angular 2 - 使用 HTTP 的 CRUD 操作

我们将在本章中研究的基本 CRUD 操作是从 Web 服务中读取数据，使用 Angular 2。

示例

在此示例中，我们将定义一个数据源，它是一个简单的产品**json**文件。接下来，我们将定义一个服务，该服务将用于从**json**文件中读取数据。然后接下来，我们将在我们的主要 app.component.ts 文件中使用此服务。

**步骤 1** - 首先让我们在 Visual Studio Code 中定义我们的 product.json 文件。

在 products.json 文件中，输入以下文本。这将是从 Angular JS 应用程序中获取的数据。

[{
   "ProductID": 1,
   "ProductName": "ProductA"
},

{
   "ProductID": 2,
   "ProductName": "ProductB"
}]

**步骤 2** - 定义一个接口，它将是类定义，用于存储来自 products.json 文件的信息。创建一个名为 products.ts 的文件。

**步骤 3** - 在文件中插入以下代码。

export interface IProduct {
   ProductID: number;
   ProductName: string;
}

上述接口将 ProductID 和 ProductName 定义为接口的属性。

**步骤 4** - 在 app.module.ts 文件中包含以下代码 -

import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent }  from './app.component';
import { HttpModule } from '@angular/http';

@NgModule ({
   imports:      [ BrowserModule,HttpModule],
   declarations: [ AppComponent],
   bootstrap:    [ AppComponent ]
})
export class AppModule { }

**步骤 5** - 在 Visual Studio Code 中定义 products.service.ts 文件

**步骤 6** - 在文件中插入以下代码。

import { Injectable } from '@angular/core';
import { Http , Response } from '@angular/http';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/do';
import { IProduct } from './product';

@Injectable()
export class ProductService {
   private _producturl='app/products.json';
   constructor(private _http: Http){}
   
   getproducts(): Observable<IProduct[]> {
      return this._http.get(this._producturl)
      .map((response: Response) => <IProduct[]> response.json())
      .do(data => console.log(JSON.stringify(data)));
   }
}

关于上述程序，需要说明以下几点。

import {Http, Response} from '@angular/http' 语句用于确保可以使用 http 函数从 products.json 文件中获取数据。
以下语句用于使用 Reactive 框架，该框架可用于创建 Observable 变量。Observable 框架用于检测 http 响应中的任何更改，然后可以将其发送回主应用程序。

import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/do';

类中的语句 private _producturl = 'app/products.json' 用于指定数据源的位置。如果需要，它还可以指定 Web 服务的位置。
接下来，我们定义一个 Http 类型的变量，它将用于获取来自数据源的响应。
从数据源获取数据后，我们使用 JSON.stringify(data) 命令将数据发送到浏览器的控制台。

**步骤 7** - 现在在 app.component.ts 文件中，放置以下代码。

import { Component } from '@angular/core';
import { IProduct } from './product';
import { ProductService } from './products.service';
import { appService } from './app.service';
import { Http , Response } from '@angular/http';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/map';

@Component ({
   selector: 'my-app',
   template: '<div>Hello</div>',
   providers: [ProductService]
})

export   class   AppComponent  {
   iproducts: IProduct[];
   constructor(private _product: ProductService) {
   }
   
   ngOnInit() : void {
      this._product.getproducts()
      .subscribe(iproducts => this.iproducts = iproducts);
   }
}

这里，代码中的主要内容是 subscribe 选项，它用于侦听 Observable getproducts() 函数以侦听来自数据源的数据。

现在保存所有代码并使用**npm**运行应用程序。转到浏览器，我们将看到以下输出。

在控制台中，我们将看到从 products.json 文件中检索到的数据。

Angular 2 - 错误处理

Angular 2 应用程序可以选择错误处理。这是通过包含 ReactJS catch 库，然后使用 catch 函数来完成的。

让我们看看错误处理所需的代码。此代码可以添加到使用 http 进行 CRUD 操作的章节顶部。

在 product.service.ts 文件中，输入以下代码 -

import { Injectable } from '@angular/core'; 
import { Http , Response } from '@angular/http'; 
import { Observable } from 'rxjs/Observable'; 

import 'rxjs/add/operator/map'; 
import 'rxjs/add/operator/do'; 
import 'rxjs/add/operator/catch'; 
import { IProduct } from './product';  

@Injectable() 
export class ProductService { 
   private _producturl = 'app/products.json'; 
   constructor(private _http: Http){}  

   getproducts(): Observable<IProduct[]> { 
      return this._http.get(this._producturl) 
      .map((response: Response) => <IProduct[]> response.json()) 
      .do(data => console.log(JSON.stringify(data))) 
      .catch(this.handleError); 
   }  
   
   private handleError(error: Response) { 
      console.error(error); 
      return Observable.throw(error.json().error()); 
   } 
}

catch 函数包含到 Error Handler 函数的链接。
在错误处理程序函数中，我们将错误发送到控制台。我们还将错误抛回到主程序，以便执行可以继续。

现在，每当您遇到错误时，它将被重定向到浏览器的错误控制台。

Angular 2 - 路由

路由有助于根据用户在主页上选择的选项将用户引导到不同的页面。因此，根据他们选择的选项，将向用户呈现所需的 Angular 组件。

让我们看看在 Angular 2 应用程序中如何实现路由的必要步骤。

**步骤 1** - 在 index.html 文件中添加基本引用标签。

<!DOCTYPE html>
<html>
   <head>
      <base href = "/">
      <title>Angular QuickStart</title>
      <meta charset = "UTF-8">
      <meta name = "viewport" content = "width = device-width, initial-scale = 1">
      
      <base href = "/">
      <link rel = "stylesheet" href = "styles.css">

      <!-- 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/systemjs/dist/system.src.js"></script>
      <script src = "systemjs.config.js"></script>

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

   <body>
      <my-app></my-app>
   </body>
</html>

**步骤 2** - 为应用程序创建两个路由。为此，创建 2 个名为**Inventory.component.ts**和**product.component.ts**的文件

**步骤 3** - 将以下代码放在 product.component.ts 文件中。

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

@Component ({
   selector: 'my-app',
   template: 'Products',
})
export   class   Appproduct  {
}

**步骤 4** - 将以下代码放在 Inventory.component.ts 文件中。

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

@Component ({
   selector: 'my-app',
   template: 'Inventory',
})
export class AppInventory  {
}

这两个组件都没有做任何花哨的事情，它们只是根据组件呈现关键字。因此，对于 Inventory 组件，它将向用户显示 Inventory 关键字。对于产品组件，它将向用户显示产品关键字。

**步骤 5** - 在 app.module.ts 文件中，添加以下代码 -

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent }  from './app.component';
import { Appproduct } from './product.component';
import { AppInventory } from './Inventory.component';
import { RouterModule, Routes } from '@angular/router';

const appRoutes: Routes = [
   { path: 'Product', component: Appproduct },
   { path: 'Inventory', component: AppInventory },
];

@NgModule ({
   imports: [ BrowserModule,
   RouterModule.forRoot(appRoutes)],
   declarations: [ AppComponent,Appproduct,AppInventory],
   bootstrap: [ AppComponent ]
})
export class AppModule { }

关于上述程序，需要说明以下几点 -

appRoutes 包含 2 个路由，一个是 Appproduct 组件，另一个是 AppInventory 组件。
确保声明这两个组件。
RouterModule.forRoot 确保将路由添加到应用程序中。

**步骤 6** - 在 app.component.ts 文件中，添加以下代码。

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

@Component ({
   selector: 'my-app',
   template: `
   <ul>
      <li><a [routerLink] = "['/Product']">Product</a></li>
      <li><a [routerLink] = "['/Inventory']">Inventory</a></li>
   </ul>
   <router-outlet></router-outlet>`
})
export class AppComponent  { }

关于上述程序，需要说明以下几点 -

<router-outlet></router-outlet> 是根据用户选择的选项呈现组件的占位符。

现在，保存所有代码并使用 npm 运行应用程序。转到浏览器，您将看到以下输出。

现在，如果您单击 Inventory 链接，您将获得以下输出。

添加错误路由

在路由中，还可以添加错误路由。如果用户转到应用程序中不存在的页面，则可能会发生这种情况。

让我们看看如何实现这一点。

**步骤 1** - 将 PageNotFound 组件添加为 NotFound.component.ts，如下所示 -

**步骤 2** - 将以下代码添加到新文件中。

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

@Component ({  
   selector: 'my-app',  
   template: 'Not Found', 
})  
export class PageNotFoundComponent {  
}

**步骤 3** - 将以下代码添加到 app.module.ts 文件中。

import { NgModule } from '@angular/core'; 
import { BrowserModule } from '@angular/platform-browser'; 
import { AppComponent } from './app.component'; 
import { Appproduct } from './product.component' 
import { AppInventory } from  './Inventory.component' 
import { PageNotFoundComponent } from  './NotFound.component' 
import { RouterModule, Routes } from '@angular/router';  

const appRoutes: Routes = [ 
   { path: 'Product', component: Appproduct }, 
   { path: 'Inventory', component: AppInventory }, 
   { path: '**', component: PageNotFoundComponent } 
];  

@NgModule ({ 
   imports: [ BrowserModule, 
   RouterModule.forRoot(appRoutes)], 
   declarations: [ AppComponent,Appproduct,AppInventory,PageNotFoundComponent], 
   bootstrap: [ AppComponent ] 
}) 

export class AppModule {
}

关于上述程序，需要说明以下几点 -

现在我们增加了一条额外的路由路径，名为 path: '**'，component: PageNotFoundComponent。因此，** 用于匹配任何不符合默认路由的路径。这些路径将被重定向到 PageNotFoundComponent 组件。

现在，保存所有代码并使用 npm 运行应用程序。访问浏览器，您将看到以下输出。现在，当您访问任何错误的链接时，您将获得以下输出。

Angular 2 - 导航

在 Angular 2 中，也可以执行手动导航。以下是步骤。

步骤 1 - 将以下代码添加到 Inventory.component.ts 文件中。

import { Component } from '@angular/core'; 
import { Router }  from '@angular/router';  

@Component ({  
   selector: 'my-app',  
   template: 'Inventory 
   <a class = "button" (click) = "onBack()">Back to Products</a>' 
})  

export class AppInventory {  
   constructor(private _router: Router){} 

   onBack(): void { 
      this._router.navigate(['/Product']); 
   } 
}

关于上述程序，需要说明以下几点 -

声明一个 html 标签，该标签具有与点击事件关联的 onBack 函数。因此，当用户点击此标签时，他们将被重定向回 Products 页面。
在 onBack 函数中，使用 router.navigate 导航到所需的页面。

步骤 2 - 现在，保存所有代码并使用 npm 运行应用程序。访问浏览器，您将看到以下输出。

步骤 3 - 点击 Inventory 链接。

步骤 4 - 点击“返回产品”链接，您将获得以下输出，该输出将带您返回 Products 页面。

Angular 2 - 表单

Angular 2 还可以设计表单，这些表单可以使用ngModel指令进行双向绑定。让我们看看如何实现这一点。

步骤 1 - 创建一个模型，即产品模型。创建一个名为products.ts的文件。

步骤 2 - 将以下代码放入文件中。

export class Product { 
   constructor ( 
      public productid: number, 
      public productname: string 
   ) {  } 
}

这是一个简单的类，它有两个属性，productid 和 productname。

步骤 3 - 创建一个名为 product-form.component.ts 的产品表单组件，并添加以下代码 -

import { Component } from '@angular/core';
import { Product } from './products';

@Component ({
   selector: 'product-form',
   templateUrl: './product-form.component.html'
})

export class ProductFormComponent {
   model = new Product(1,'ProductA');
}

关于上述程序，需要注意以下几点。

创建一个 Product 类的对象，并向 productid 和 productname 添加值。
使用 templateUrl 指定 product-form.component.html 的位置，该文件将呈现组件。

步骤 4 - 创建实际的表单。创建一个名为 product-form.component.html 的文件，并放置以下代码。

<div class = "container">
   <h1>Product Form</h1>
   <form>
      <div class = "form-group">
         <label for = "productid">ID</label>
         <input type = "text" class = "form-control" id = "productid" required
            [(ngModel)] = "model.productid" name = "id">
      </div>
      
      <div class = "form-group">
         <label for = "name">Name</label>
         <input type = "text" class = "form-control" id = "name"
            [(ngModel)] = "model.productname" name = "name">
      </div>
   </form>
</div>

关于上述程序，需要注意以下几点。

ngModel指令用于将产品的对象绑定到表单上的各个元素。

步骤 5 - 将以下代码放入 app.component.ts 文件中。

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

@Component ({
   selector: 'my-app',
   template: '<product-form></product-form>'
})
export class AppComponent { }

步骤 6 - 将以下代码放入 app.module.ts 文件中

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { FormsModule } from '@angular/forms';
import { ProductFormComponent } from './product-form.component';

@NgModule ({
   imports: [ BrowserModule,FormsModule],
   declarations: [ AppComponent,ProductFormComponent],
   bootstrap: [ AppComponent ]
})
export class AppModule { }

步骤 7 - 保存所有代码并使用 npm 运行应用程序。访问浏览器，您将看到以下输出。

Angular 2 - CLI

命令行界面 (CLI) 可用于创建 Angular JS 应用程序。它还有助于为应用程序创建单元测试和端到端测试。

Angular CLI 的官方网站是 https://cli.angular.io/

如果您点击“开始使用”选项，您将被重定向到 CLI 的 github 存储库 https://github.com/angular/angular-cli

现在让我们看看我们可以使用 Angular CLI 做的一些事情。

安装 CLI

注意 - 请确保系统上已安装 Python。Python 可以从以下网站下载 https://www.pythonlang.cn/

第一步是安装 CLI。我们可以使用以下命令执行此操作 -

npm install �g angular-cli

现在，在任何目录中创建一个名为 angularCLI 的新文件夹，并发出上述命令。

完成后，CLI 将被安装。

创建项目

可以使用以下命令创建 Angular JS 项目。

语法

ng new Project_name

参数

Project_name - 这是需要创建的项目的名称。

输出

无。

示例

让我们执行以下命令来创建一个新项目。

ng new demo2

它将自动创建文件并开始下载必要的 npm 包。

现在在 Visual Studio 代码中，我们可以打开新创建的项目。

运行项目

要运行项目，您需要发出以下命令 -

ng server

正在运行的应用程序的默认端口号为 4200。您可以浏览到该端口并查看正在运行的应用程序。

Angular 2 - 依赖注入

依赖注入是在运行时添加组件功能的能力。让我们来看一个示例以及实现依赖注入的步骤。

步骤 1 - 创建一个单独的类，该类具有可注入装饰器。可注入装饰器允许将此类的功能注入并用于任何 Angular JS 模块。

@Injectable() 
   export class classname {  
}

步骤 2 - 接下来，在您的 appComponent 模块或您要使用服务的模块中，您需要在 @Component 装饰器中将其定义为提供程序。

@Component ({  
   providers : [classname] 
})

让我们来看一个如何实现此功能的示例。

步骤 1 - 为服务创建一个名为 app.service.ts 的 ts 文件。

步骤 2 - 将以下代码放入上面创建的文件中。

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

@Injectable() 
export class appService {  
   getApp(): string { 
      return "Hello world"; 
   } 
}

关于上述程序，需要注意以下几点。

Injectable 装饰器从 angular/core 模块导入。
我们正在创建一个名为 appService 的类，该类用 Injectable 装饰器装饰。
我们正在创建一个名为 getApp 的简单函数，该函数返回一个名为“Hello world”的简单字符串。

步骤 3 - 在 app.component.ts 文件中放置以下代码。

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

import { 
   appService 
} from './app.service';  

@Component({ 
   selector: 'my-app', 
   template: '<div>{{value}}</div>', 
   providers: [appService]  
}) 

export class AppComponent { 
   value: string = ""; 
   constructor(private _appService: appService) { } 
   ngOnInit(): void { 
      this.value = this._appService.getApp(); 
   }   
}

关于上述程序，需要注意以下几点。

首先，我们在 appComponent 模块中导入 appService 模块。
然后，我们将服务注册为此模块中的提供程序。
在构造函数中，我们定义了一个名为 _appService 的变量，类型为 appService，以便可以在 appComponent 模块的任何位置调用它。
例如，在 ngOnInit 生命周期钩子中，我们调用了服务的 getApp 函数并将输出分配给 AppComponent 类的 value 属性。

保存所有代码更改并刷新浏览器，您将获得以下输出。

Angular 2 - 高级配置

在本章中，我们将了解 Angular 2 项目的其他配置文件。

tsconfig.json

此文件用于提供有关 Angular JS 项目使用的 TypeScript 的选项。

{ 
   "compilerOptions": {
      "target": "es5",
      "module": "commonjs",
      "moduleResolution": "node",
      "sourceMap": true,
      "emitDecoratorMetadata": true,
      "experimentalDecorators": true,
      "lib": [ "es2015", "dom" ],
      "noImplicitAny": true,
      "suppressImplicitAnyIndexErrors": true
   }
}

以下是关于以上代码的一些关键要点。

编译的目标是 es5，这是因为大多数浏览器只能理解 ES5 typescript。
sourceMap 选项用于生成映射文件，这些文件在调试时很有用。因此，在开发过程中，最好将此选项保留为 true。
Angular JS 装饰器需要“emitDecoratorMetadata”: true 和“experimentalDecorators”: true。如果不存在，Angular JS 应用程序将无法编译。

package.json

此文件包含有关 Angular 2 项目的信息。以下是文件中常见的设置。

{
   "name": "angular-quickstart",
   "version": "1.0.0",
   "description": "QuickStart package.json from the documentation,
      supplemented with testing support",
   
   "scripts": {
      "build": "tsc -p src/",
      "build:watch": "tsc -p src/ -w",
      "build:e2e": "tsc -p e2e/",
      "serve": "lite-server -c=bs-config.json",
      "serve:e2e": "lite-server -c=bs-config.e2e.json",
      "prestart": "npm run build",
      "start": "concurrently \"npm run build:watch\" \"npm run serve\"",
      "pree2e": "npm run build:e2e",
      "e2e": "concurrently \"npm run serve:e2e\" \"npm run protractor\" 
         --killothers --success first",
      "preprotractor": "webdriver-manager update",
      "protractor": "protractor protractor.config.js",
      "pretest": "npm run build",
      "test": "concurrently \"npm run build:watch\" \"karma start karma.conf.js\"",
      "pretest:once": "npm run build",
      "test:once": "karma start karma.conf.js --single-run",
      "lint": "tslint ./src/**/*.ts -t verbose"
   },

   "keywords": [],
   "author": "",
   "license": "MIT",
   "dependencies": {
      "@angular/common": "~2.4.0",
      "@angular/compiler": "~2.4.0",
      "@angular/core": "~2.4.0",
      "@angular/forms": "~2.4.0",
      "@angular/http": "~2.4.0",
      "@angular/platform-browser": "~2.4.0",
      "@angular/platform-browser-dynamic": "~2.4.0",
      "@angular/router": "~3.4.0",
      "angular-in-memory-web-api": "~0.2.4",
      "systemjs": "0.19.40",
      "core-js": "^2.4.1",
      "rxjs": "5.0.1",
      "zone.js": "^0.7.4"
   },

   "devDependencies": {
      "concurrently": "^3.2.0",
      "lite-server": "^2.2.2",
      "typescript": "~2.0.10",
      "canonical-path": "0.0.2",
      "tslint": "^3.15.1",
      "lodash": "^4.16.4",
      "jasmine-core": "~2.4.1",
      "karma": "^1.3.0",
      "karma-chrome-launcher": "^2.0.0",
      "karma-cli": "^1.0.1",
      "karma-jasmine": "^1.0.2",
      "karma-jasmine-html-reporter": "^0.2.2",
      "protractor": "~4.0.14",
      "rimraf": "^2.5.4",
      "@types/node": "^6.0.46",
      "@types/jasmine": "2.5.36"
   },
   "repository": {}
}

关于以上代码的一些关键要点 -

依赖项有两种类型，第一种是依赖项，然后是开发依赖项。开发依赖项在开发过程中需要，而其他依赖项则需要运行应用程序。
“build:watch”: “tsc -p src/ -w”命令用于通过查找 typescript 文件中的更改在后台编译 typescript。

systemjs.config.json

此文件包含 Angular JS 应用程序所需的系统文件。这将加载所有必要的脚本文件，而无需向 html 页面添加脚本标签。典型文件将包含以下代码。

/** 
 * System configuration for Angular samples 
 * Adjust as necessary for your application needs. 
*/ 
(function (global) { 
   System.config ({ 
      paths: { 
         // paths serve as alias 
         'npm:': 'node_modules/' 
      }, 
      
      // map tells the System loader where to look for things 
      map: { 
         // our app is within the app folder 
         app: 'app',  
         
         // angular bundles 
         '@angular/core': 'npm:@angular/core/bundles/core.umd.js', 
         '@angular/common': 'npm:@angular/common/bundles/common.umd.js', 
         '@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js', 
         '@angular/platform-browser': 'npm:@angular/platformbrowser/bundles/platform-browser.umd.js', 
         '@angular/platform-browser-dynamic': 
            'npm:@angular/platform-browserdynamic/bundles/platform-browser-dynamic.umd.js', 
         '@angular/http': 'npm:@angular/http/bundles/http.umd.js', 
         '@angular/router': 'npm:@angular/router/bundles/router.umd.js', 
         '@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js',  
         
         // other libraries 
         'rxjs':  'npm:rxjs', 
         'angular-in-memory-web-api': 
            'npm:angular-in-memory-web-api/bundles/inmemory-web-api.umd.js' 
      }, 
     
      // packages tells the System loader how to load when no filename 
         and/or no extension 
      packages: { 
         app: { 
            defaultExtension: 'js' 
         }, 
         
         rxjs: { 
            defaultExtension: 'js' 
         } 
      } 
   
   }); 
})(this);

关于以上代码的一些关键要点 -

“npm:”：'node_modules/' 指示项目中所有 npm 模块所在的路径。
app 的映射：“app”指示加载所有应用程序文件所在的文件夹。

Angular 2 - 第三方控件

Angular 2 允许您使用任何第三方控件。一旦您决定要实现的控件，您需要执行以下步骤 -

步骤 1 - 使用 npm 命令安装组件。

例如，我们将通过以下命令安装 ng2-pagination 第三方控件。

npm install ng2-pagination --save

完成后，您将看到该组件已成功安装。

步骤 2 - 将组件包含在 app.module.ts 文件中。

import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent }  from './app.component';
import {Ng2PaginationModule} from 'ng2-pagination';

@NgModule ({
   imports:      [ BrowserModule,Ng2PaginationModule],
   declarations: [ AppComponent],
   bootstrap:    [ AppComponent ]
})
export class AppModule { }

步骤 3 - 最后，在您的 app.component.ts 文件中实现该组件。

import { Component } from '@angular/core';
import {PaginatePipe, PaginationService} from 'ng2-pagination';

@Component ({
   selector: 'my-app',
   template: '
      <ul>
         <li *ngFor = "let item of collection | paginate: {
            itemsPerPage: 5, currentPage: p }"> ... </li>
      </ul>
      <pagination-controls (pageChange) = "p = $event"></pagination-controls>
   '
})
export class AppComponent { }

步骤 4 - 保存所有代码更改并刷新浏览器，您将获得以下输出。

在上图中，您可以看到图像已作为 One.jpg 和 two.jpg 存储在 Images 文件夹中。

步骤 5 - 将 app.component.ts 文件的代码更改为以下内容。

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

@Component ({
   selector: 'my-app',
   templateUrl: 'app/app.component.html'
})

export class AppComponent {
   appTitle: string = 'Welcome';
   
   appList: any[] = [{
      "ID": "1",
      "Name": "One",
      "url": 'app/Images/One.jpg'
   },
   {
      "ID": "2",
      "Name": "Two",
      "url": 'app/Images/two.jpg'
   } ];
}

关于以上代码，需要注意以下几点。

我们正在定义一个名为 appList 的数组，其类型为 any。这样它就可以存储任何类型的元素。
我们正在定义 2 个元素。每个元素都有 3 个属性，ID、Name 和 url。
每个元素的 URL 是指向 2 张图像的相对路径。

步骤 6 - 对 app/app.component.html 文件（即您的模板文件）进行以下更改。

<div *ngFor = 'let lst of appList'> 
   <ul> 
      <li>{{lst.ID}}</li> 
      <li>{{lst.Name}}</li> 
      <img [src] = 'lst.url'> 
   </ul> 
</div>

关于上述程序，需要注意以下几点 -

ngFor 指令用于遍历 appList 属性的所有元素。
对于每个属性，它使用列表元素显示图像。
然后，img 标签的 src 属性绑定到我们类中 appList 的 url 属性。

步骤 7 - 保存所有代码更改并刷新浏览器，您将获得以下输出。从输出中，您可以清楚地看到图像已被提取并在输出中显示。

Angular 2 - 数据显示

在 Angular JS 中，在 HTML 表单中显示类属性的值非常容易。

让我们举一个例子，并更多地了解数据显示。在我们的示例中，我们将查看如何在 HTML 页面中显示我们类中各个属性的值。

步骤 1 - 将 app.component.ts 文件的代码更改为以下内容。

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

@Component ({
   selector: 'my-app',
   templateUrl: 'app/app.component.html'
})

export class AppComponent {
   TutorialName: string = 'Angular JS2';
   appList: string[] = ["Binding", "Display", "Services"];
}

关于以上代码，需要注意以下几点。

我们正在定义一个名为 appList 的数组，其类型为字符串。
我们正在将 3 个字符串元素定义为数组的一部分，它们是 Binding、Display 和 Services。
我们还定义了一个名为 TutorialName 的属性，其值为 Angular 2。

步骤 2 - 对 app/app.component.html 文件（即您的模板文件）进行以下更改。

<div>
   The name of this Tutorial is {{TutorialName}}<br>
   The first Topic is {{appList[0]}}<br>
   The second Topic is {{appList[1]}}<br>
   The third Topic is {{appList[2]}}<br>
</div>

关于以上代码，需要注意以下几点。

我们引用 TutorialName 属性来告诉“我们 HTML 页面中的教程名称是什么”。
我们使用数组的索引值在 HTML 页面中显示数组中的 3 个主题。

步骤 3 - 保存所有代码更改并刷新浏览器，您将获得以下输出。从输出中，您可以清楚地看到数据根据类中属性的值显示。

另一个简单的示例，即动态绑定，是使用 input html 标签。它只是在 html 标签中键入数据时显示数据。

对 app/app.component.html 文件（即模板文件）进行以下更改。

<div>
   <input [value] = "name" (input) = "name = $event.target.value">
   {{name}}
</div>

关于以上代码，需要注意以下几点。

[value] = 'username' − 用于将表达式 username 绑定到输入元素的 value 属性。
(input) = 'expression' − 这是将表达式绑定到输入元素的 input 事件的声明方式。
username = $event.target.value − 当 input 事件触发时执行的表达式。
$event − Angular 在事件绑定中公开的表达式，其值为事件的有效负载。

保存所有代码更改并刷新浏览器后，您将获得以下输出。

现在，在输入框中输入一些内容，例如“Tutorialspoint”。输出将相应更改。

Angular 2 - 处理事件

在 Angular 2 中，也可以非常轻松地处理按钮点击或任何其他类型的事件。事件从 html 页面触发，并发送到 Angular JS 类以进行进一步处理。

让我们来看一个如何实现事件处理的例子。在我们的示例中，我们将查看显示一个点击按钮和一个状态属性。最初，状态属性将为 true。当点击按钮时，状态属性将变为 false。

步骤 1 - 将 app.component.ts 文件的代码更改为以下内容。

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

@Component ({ 
   selector: 'my-app', 
   templateUrl: 'app/app.component.html' 
}) 

export class AppComponent { 
   Status: boolean = true; 
   clicked(event) { 
      this.Status = false; 
   } 
}

关于以上代码，需要注意以下几点。

我们正在定义一个名为 status 的布尔类型变量，其初始值为 true。
接下来，我们定义了 clicked 函数，该函数将在我们的 html 页面上点击按钮时调用。在函数中，我们将 Status 属性的值从 true 更改为 false。

步骤 2 − 对 app/app.component.html 文件（即模板文件）进行以下更改。

<div> 
   {{Status}} 
   <button (click) = "clicked()">Click</button> 
</div>

关于以上代码，需要注意以下几点。

我们首先只是显示类 Status 属性的值。
然后定义按钮 html 标签，其值为 Click。然后，我们确保按钮的 click 事件触发到我们类中的 clicked 事件。

步骤 3 − 保存所有代码更改并刷新浏览器，您将获得以下输出。

步骤 4 − 点击“Click”按钮，您将获得以下输出。

Angular 2 - 数据转换

Angular 2 拥有许多可用于转换数据的过滤器和管道。

lowercase

用于将输入转换为全小写。

语法

Propertyvalue | lowercase

参数

无

结果

属性值将转换为小写。

示例

首先确保 app.component.ts 文件中存在以下代码。

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

@Component ({ 
   selector: 'my-app', 
   templateUrl: 'app/app.component.html' 
}) 

export class AppComponent { 
   TutorialName: string = 'Angular JS2'; 
   appList: string[] = ["Binding", "Display", "Services"]; 
}

接下来，确保 app/app.component.html 文件中存在以下代码。

<div> 
   The name of this Tutorial is {{TutorialName}}<br>  
   The first Topic is {{appList[0] | lowercase}}<br> 
   The second Topic is {{appList[1] | lowercase}}<br> 
   The third Topic is {{appList[2]| lowercase}}<br> 
</div>

输出

保存所有代码更改并刷新浏览器后，您将获得以下输出。

uppercase

用于将输入转换为全大写。

语法

Propertyvalue | uppercase

参数

无。

结果

属性值将转换为大写。

示例

首先确保 app.component.ts 文件中存在以下代码。

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

@Component ({ 
   selector: 'my-app', 
   templateUrl: 'app/app.component.html' 
}) 

export class AppComponent { 
   TutorialName: string = 'Angular JS2'; 
   appList: string[] = ["Binding", "Display", "Services"]; 
}

接下来，确保 app/app.component.html 文件中存在以下代码。

<div> 
   The name of this Tutorial is {{TutorialName}}<br>  
   The first Topic is {{appList[0] | uppercase }}<br> 
   The second Topic is {{appList[1] | uppercase }}<br> 
   The third Topic is {{appList[2]| uppercase }}<br> 
</div>

输出

保存所有代码更改并刷新浏览器后，您将获得以下输出。

slice

用于从输入字符串中切取一部分数据。

语法

Propertyvalue | slice:start:end

参数

start − 切取开始的起始位置。
end − 切取结束的起始位置。

结果

属性值将根据起始和结束位置进行切取。

示例

首先确保 app.component.ts 文件中存在以下代码

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

@Component ({
   selector: 'my-app',
   templateUrl: 'app/app.component.html'
})

export class AppComponent {
   TutorialName: string = 'Angular JS2';
   appList: string[] = ["Binding", "Display", "Services"];
}

接下来，确保 app/app.component.html 文件中存在以下代码。

<div> 
   The name of this Tutorial is {{TutorialName}}<br>  
   The first Topic is {{appList[0] | slice:1:2}}<br> 
   The second Topic is {{appList[1] | slice:1:3}}<br> 
   The third Topic is {{appList[2]| slice:2:3}}<br> 
</div>

输出

保存所有代码更改并刷新浏览器后，您将获得以下输出。

date

用于将输入字符串转换为日期格式。

语法

Propertyvalue | date:�dateformat�

参数

dateformat − 输入字符串应转换成的日期格式。

结果

属性值将转换为日期格式。

示例

首先确保 app.component.ts 文件中存在以下代码。

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

@Component ({ 
   selector: 'my-app', 
   templateUrl: 'app/app.component.html' 
}) 

export class AppComponent { 
   newdate = new Date(2016, 3, 15);
}

接下来，确保 app/app.component.html 文件中存在以下代码。

<div> 
   The date of this Tutorial is {{newdate | date:"MM/dd/yy"}}<br>  
</div>

输出

保存所有代码更改并刷新浏览器后，您将获得以下输出。

currency

用于将输入字符串转换为货币格式。

语法

Propertyvalue | currency

参数

无。

结果

属性值将转换为货币格式。

示例

首先确保 app.component.ts 文件中存在以下代码。

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

@Component ({ 
   selector: 'my-app', 
   templateUrl: 'app/app.component.html' 
}) 

export class AppComponent { 
   newValue: number = 123; 
}

接下来，确保 app/app.component.html 文件中存在以下代码。

<div> 
   The currency of this Tutorial is {{newValue | currency}}<br>      
</div>

输出

保存所有代码更改并刷新浏览器后，您将获得以下输出。

percentage

用于将输入字符串转换为百分比格式。

语法

Propertyvalue | percent

参数

无

结果

属性值将转换为百分比格式。

示例

首先确保 app.component.ts 文件中存在以下代码。

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

@Component ({ 
   selector: 'my-app', 
   templateUrl: 'app/app.component.html' 
}) 

export class AppComponent { 
   newValue: number = 30; 
}

接下来，确保 app/app.component.html 文件中存在以下代码。

<div>
   The percentage is {{newValue | percent}}<br> 
</div>

输出

保存所有代码更改并刷新浏览器后，您将获得以下输出。

百分比管道的另一种变体如下所示。

语法

Propertyvalue | percent: �{minIntegerDigits}.{minFractionDigits}{maxFractionDigits}�

参数

minIntegerDigits − 最小整数位数。
minFractionDigits − 最小小数位数。
maxFractionDigits − 最大小数位数。

结果

属性值将转换为百分比格式

示例

首先确保 app.component.ts 文件中存在以下代码。

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

@Component ({ 
   selector: 'my-app', 
   templateUrl: 'app/app.component.html' 
}) 

export class AppComponent { 
   newValue: number = 0.3; 
}

接下来，确保 app/app.component.html 文件中存在以下代码。

<div> 
   The percentage is {{newValue | percent:'2.2-5'}}<br>  
</div>

输出

保存所有代码更改并刷新浏览器后，您将获得以下输出。

Angular 2 - 自定义管道

Angular 2 还具有创建自定义管道的功能。定义自定义管道的一般方法如下。

import { Pipe, PipeTransform } from '@angular/core';  
@Pipe({name: 'Pipename'}) 

export class Pipeclass implements PipeTransform { 
   transform(parameters): returntype { } 
}

其中，

'Pipename' − 管道的名称。
Pipeclass − 分配给自定义管道的类的名称。
Transform − 用于处理管道的函数。
Parameters − 传递给管道的参数。
Returntype − 管道的返回类型。

让我们创建一个将两个数字相乘的自定义管道。然后，我们将在组件类中使用该管道。

步骤 1 − 首先，创建一个名为 multiplier.pipe.ts 的文件。

步骤 2 − 将以下代码放在上面创建的文件中。

import { 
   Pipe, 
   PipeTransform 
} from '@angular/core';  

@Pipe ({ 
   name: 'Multiplier' 
}) 

export class MultiplierPipe implements PipeTransform { 
   transform(value: number, multiply: string): number { 
      let mul = parseFloat(multiply); 
      return mul * value 
   } 
}

关于以上代码，需要注意以下几点。

我们首先导入 Pipe 和 PipeTransform 模块。
然后，我们创建一个名为“Multiplier”的管道。
创建一个名为 MultiplierPipe 的类，该类实现 PipeTransform 模块。
然后，transform 函数将接收 value 和 multiple 参数，并输出两个数字的乘积。

步骤 3 − 在 app.component.ts 文件中，放置以下代码。

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

@Component ({ 
   selector: 'my-app', 
   template: '<p>Multiplier: {{2 | Multiplier: 10}}</p>' 
}) 
export class AppComponent {  }

注意 − 在我们的模板中，我们使用了新的自定义管道。

步骤 4 − 确保在 app.module.ts 文件中放置以下代码。

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

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

import {
   AppComponent
} from './app.component';

import {
   MultiplierPipe
} from './multiplier.pipe'

@NgModule ({
   imports: [BrowserModule],
   declarations: [AppComponent, MultiplierPipe],
   bootstrap: [AppComponent]
})

export class AppModule {}

关于以上代码，需要注意以下几点。

我们需要确保包含 MultiplierPipe 模块。
我们还需要确保它包含在 declarations 部分。

保存所有代码更改并刷新浏览器后，您将获得以下输出。

Angular 2 - 用户输入

在 Angular 2 中，您可以使用 HTML 的 DOM 元素结构在运行时更改元素的值。让我们详细了解一些。

输入标签

在 app.component.ts 文件中放置以下代码。

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

@Component ({ 
   selector: 'my-app', 
   template: ' 
      <div> 
         <input [value] = "name" (input) = "name = $event.target.value"> 
         {{name}} 
      </div> 
   ' 
}) 
export class AppComponent { }

关于以上代码，需要注意以下几点。

[value] = 'username' − 用于将表达式 username 绑定到输入元素的 value 属性。
(input) = 'expression' − 这是将表达式绑定到输入元素的 input 事件的声明方式。
username = $event.target.value − 当 input 事件触发时执行的表达式。
$event − Angular 在事件绑定中公开的表达式，其值为事件的有效负载。

保存所有代码更改并刷新浏览器后，您将获得以下输出。

您现在可以输入任何内容，相同的输入将反映在 Input 控件旁边的文本中。

点击输入

在 app.component.ts 文件中放置以下代码。

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

@Component ({
   selector: 'my-app',
   template: '<button (click) = "onClickMe()"> Click Me </button> {{clickMessage}}'
})

export class AppComponent {
   clickMessage = 'Hello';
   onClickMe() {
      this.clickMessage = 'This tutorial!';
   }
}

保存所有代码更改并刷新浏览器后，您将获得以下输出。

当您点击“Click Me”按钮时，您将获得以下输出。

Angular 2 - 生命周期钩子

Angular 2 应用程序会经历一整套流程或生命周期，从启动到应用程序结束。

下图显示了 Angular 2 应用程序生命周期中的整个流程。

以下是每个生命周期钩子的描述。

ngOnChanges − 当数据绑定属性的值发生变化时，将调用此方法。
ngOnInit − 在 Angular 首次显示数据绑定属性后，只要指令/组件初始化就会调用此方法。
ngDoCheck − 用于检测和处理 Angular 无法或不会自行检测的变化。
ngAfterContentInit − 在 Angular 将外部内容投影到组件视图后，将调用此方法作为响应。
ngAfterContentChecked − 在 Angular 检查投影到组件的内容后，将调用此方法作为响应。
ngAfterViewInit − 在 Angular 初始化组件的视图和子视图后，将调用此方法作为响应。
ngAfterViewChecked − 在 Angular 检查组件的视图和子视图后，将调用此方法作为响应。
ngOnDestroy − 这是在 Angular 销毁指令/组件之前的清理阶段。

以下是如何实现一个生命周期钩子的示例。在app.component.ts文件中，放置以下代码。

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

@Component ({ 
   selector: 'my-app', 
   template: '<div> {{values}} </div> ' 
}) 

export class AppComponent { 
   values = ''; 
   ngOnInit() { 
      this.values = "Hello"; 
   } 
}

在上面的程序中，我们调用ngOnInit生命周期钩子，专门说明this.values参数的值应设置为“Hello”。

保存所有代码更改并刷新浏览器后，您将获得以下输出。

Angular 2 - 嵌套容器

在 Angular JS 中，可以将容器嵌套在彼此内部。外部容器称为父容器，内部容器称为子容器。让我们来看一个如何实现此目标的示例。以下是步骤。

步骤 1 − 为子容器创建一个名为child.component.ts的ts文件。

步骤 2 − 在上述步骤中创建的文件中，放置以下代码。

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

@Component ({ 
   selector: 'child-app', 
   template: '<div> {{values}} </div> ' 
}) 

export class ChildComponent { 
   values = ''; 
   ngOnInit() { 
      this.values = "Hello"; 
   } 
}

以上代码将参数 this.values 的值设置为“Hello”。

步骤 3 − 在 app.component.ts 文件中，放置以下代码。

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

import { 
   ChildComponent 
} from './child.component'; 

@Component ({ 
   selector: 'my-app', 
   template: '<child-app></child-app> ' 
}) 

export class AppComponent { }

在上面的代码中，请注意我们现在正在调用 import 语句来导入child.component模块。此外，我们还将child.component中的<child-app>选择器调用到我们的主组件。

步骤 4 − 接下来，我们需要确保子组件也包含在 app.module.ts 文件中。

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

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

import { 
   AppComponent 
} from './app.component';  

import { 
   MultiplierPipe 
} from './multiplier.pipe' 

import { 
   ChildComponent 
} from './child.component';  

@NgModule ({ 
   imports: [BrowserModule], 
   declarations: [AppComponent, MultiplierPipe, ChildComponent], 
   bootstrap: [AppComponent] 
}) 

export class AppModule {}

保存所有代码更改并刷新浏览器后，您将获得以下输出。

Angular 2 - 服务

当需要向多个模块提供通用功能时，可以使用服务。例如，我们可以拥有一个可以在多个模块之间重用的数据库功能。因此，您可以创建一个包含数据库功能的服务。

创建服务时，需要执行以下关键步骤。

步骤 1 - 创建一个单独的类，该类具有可注入装饰器。可注入装饰器允许将此类的功能注入并用于任何 Angular JS 模块。

@Injectable() 
   export class classname {  
}

步骤 2 - 接下来，在您的 appComponent 模块或您要使用服务的模块中，您需要在 @Component 装饰器中将其定义为提供程序。

@Component ({  
   providers : [classname] 
})

让我们来看一个如何实现此目标的示例。以下是涉及的步骤。

步骤 1 - 为服务创建一个名为 app.service.ts 的 ts 文件。

步骤 2 - 将以下代码放入上面创建的文件中。

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

@Injectable()
export class appService {  
   getApp(): string { 
      return "Hello world"; 
   } 
}

关于上述程序，需要说明以下几点。

Injectable 装饰器从 angular/core 模块导入。
我们正在创建一个名为 appService 的类，该类用 Injectable 装饰器装饰。
我们正在创建一个名为 getApp 的简单函数，它返回一个名为“Hello world”的简单字符串。

步骤 3 − 在 app.component.ts 文件中，放置以下代码。

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

import { 
   appService 
} from './app.service';  

@Component ({ 
   selector: 'demo-app', 
   template: '<div>{{value}}</div>', 
   providers: [appService] 
}) 

export class AppComponent { 
   value: string = ""; 
   constructor(private _appService: appService) { }  

   ngOnInit(): void { 
      this.value = this._appService.getApp(); 
   } 
}

关于上述程序，需要说明以下几点。

首先，我们在 appComponent 模块中导入 appService 模块。
然后，我们将服务注册为该模块中的提供程序。
在构造函数中，我们定义了一个名为 _appService 的变量，类型为 appService，以便可以在 appComponent 模块的任何位置调用它。
例如，在 ngOnInit 生命周期钩子中，我们调用了服务的 getApp 函数并将输出分配给 AppComponent 类的 value 属性。

保存所有代码更改并刷新浏览器后，您将获得以下输出。

打印页面