Angular 2 - 快速指南
Angular 2 - Overview
Angular JS是一个基于JavaScript构建的开源框架。 它由Google的开发人员构建。 该框架用于克服使用单页应用程序时遇到的障碍。 此外,在构建框架时,测试被认为是一个关键方面。 确保框架可以轻松测试。 框架的最初版本发布于2010年10月。
Angular 2的特点
以下是Angular 2的主要功能 -
Components - 早期版本的Angular有一个控制器的焦点,但现在已经将重点转移到控制器上的组件。 组件有助于将应用程序构建到许多模块中。 这有助于在一段时间内更好地维护应用程序。
TypeScript - 较新版本的Angular基于TypeScript。 这是JavaScript的超集,由Microsoft维护。
Services - 服务是一组可由应用程序的不同组件共享的代码。 因此,例如,如果您有一个从数据库中选择数据的数据组件,您可以将其作为可以跨多个应用程序使用的共享服务。
此外,Angular 2具有更好的事件处理功能,强大的模板以及对移动设备的更好支持。
Angular 2的组成部分
Angular 2具有以下组件 -
Modules - 用于将应用程序分解为逻辑代码片段。 每段代码或模块都旨在执行单个任务。
Component - 可用于将模块组合在一起。
Templates - 用于定义Angular JS应用程序的视图。
Metadata - 这可用于向Angular JS类添加更多数据。
Service - 用于创建可在整个应用程序中共享的组件。
我们将在本教程的后续章节中详细讨论所有这些组件。
Angular的官方网站是https://angular.io/该网站提供有关Angular 2的所有信息和文档。
Angular 2 - Environment
要开始使用Angular 2,您需要安装以下关键组件。
Npm - 这称为节点包管理器,用于处理开源存储库。 Angular JS作为一个框架依赖于其他组件。 npm可用于下载这些依赖项并将它们附加到您的项目中。
Git - 这是源代码软件,可用于从github角度站点获取示例应用程序。
Editor - 有许多编辑器可用于Angular JS开发,例如Visual Studio代码和WebStorm。 在我们的教程中,我们将使用免费的Microsoft Visual Studio代码。
npm安装
现在让我们看一下安装npm的步骤。 npm的官方网站是https://www.npmjs.com/
Step 1 - 转到网站中以npm 开头的 get。
Step 2 - 在下一个屏幕中,根据操作系统选择要下载的安装程序。 出于本练习的目的,请下载Windows 64位版本。
Step 3 - 启动安装程序。 在初始屏幕中,单击“下一步”按钮。
Step 4 - 在下一个屏幕中,接受许可协议,然后单击下一步按钮。
Step 5 - 在下一个屏幕中,选择安装的目标文件夹,然后单击“下一步”按钮。
Step 6 - 在下一个屏幕中选择组件,然后单击“下一步”按钮。 您可以接受默认安装的所有组件。
Step 7 - 在下一个屏幕中,单击“安装”按钮。
Step 8 - 安装完成后,单击“完成”按钮。
Step 9 - 要确认安装,在命令提示符下可以发出命令npm version。 您将获得npm的版本号,如以下屏幕截图所示。
安装Visual Studio代码
以下是Visual Studio代码的功能 -
与Visual Studio的实际版本相比,Light编辑器。
可用于编码语言,如Clojure,Java,Objective-C和许多其他语言。
内置Git扩展。
内置智能感知功能。
更多的开发扩展。
Visual Studio代码的官方站点是https://code.visualstudio.com/
Step 1 - 下载完成后,请按照安装步骤进行操作。 在初始屏幕中,单击“下一步”按钮。
Step 2 - 在下一个屏幕中,接受许可协议,然后单击“下一步”按钮。
Step 3 - 在下一个屏幕中,选择安装的目标位置,然后单击下一步按钮。
Step 4 - 选择程序快捷方式的名称,然后单击“下一步”按钮。
Step 5 - 接受默认设置,然后单击“下一步”按钮。
Step 6 - 单击下一个屏幕中的“安装”按钮。
Step 7 - 在最终屏幕中,单击“完成”按钮以启动Visual Studio代码。
安装Git
Git的一些主要功能是 -
- 轻松分支和合并代码。
- 规定在Git中使用许多技术来实现代码流。
- 与其他SCM工具相比,Git非常快。
- 提供更好的数据保证。
- Free and open source.
Git的官方网站是https://git-scm.com/
Step 1 - 下载完成后,请按照安装步骤进行操作。 在初始屏幕中,单击“下一步”按钮。
Step 2 - 选择需要安装的组件。 您可以接受默认组件。
Step 3 - 在下一步中,选择程序快捷方式名称,然后单击“下一步”按钮。
Step 4 - 接受默认的SSH可执行文件,然后单击“下一步”按钮。
Step 5 - 接受 CheckoutWindows样式的默认设置,提交Unix样式结尾 并单击Next按钮。
Step 6 - 现在,接受终端仿真器的默认设置,然后单击“下一步”按钮。
Step 7 - 接受默认设置,然后单击“下一步”按钮。
Step 8 - 您可以跳过实验选项并单击“安装”按钮。
Step 9 - 在最终屏幕中,单击“完成”按钮以完成安装。
Angular 2 - Hello World
有许多方法可以开始使用您的第一个Angular JS应用程序。
一种方法是从头开始做所有事情,这是最困难而不是首选的方式。 由于存在许多依赖关系,因此很难进行此设置。
另一种方法是使用Angular Github的快速入门。 这包含了入门所需的代码。 这通常是所有开发人员选择的内容,这是我们将为Hello World应用程序显示的内容。
最后一种方法是使用Angular CLI。 我们将在另一章中详细讨论这个问题。
以下是通过github启动并运行示例应用程序的步骤。
Step 1 - 去github网址 - https://github.com/angular/quickstart
Step 2 - 转到命令提示符,创建项目目录。 这可以是一个空目录。 在我们的示例中,我们创建了一个名为Project的目录。
Step 3 - 接下来,在命令提示符下,转到此目录并发出以下命令以克隆本地系统上的github存储库。 您可以通过发出以下命令来执行此操作 -
git clone https://github.com/angular/quickstart Demo
这将在本地计算机上创建一个示例Angular JS应用程序。
Step 4 - 在Visual Studio代码中打开代码。
Step 5 - 再次转到命令提示符并在项目文件夹中发出以下命令 -
npm install
这将安装Angular JS应用程序工作所需的所有必需包。
完成后,您应该看到一个安装了所有依赖项的树结构。
Step 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应用程序进行更改。
我们将在后续章节中详细讨论这些文件。
Note - Visual Studio Code将自动编译所有文件并为所有Typescript文件创建JavaScript文件。
Step 7 - 现在转到命令提示符并发出命令npm start。 这将导致Node包管理器启动精简Web服务器并启动Angular应用程序。
Angular JS应用程序现在将在浏览器中启动,您将在浏览器中看到 HelloWorld ,如以下屏幕截图所示。
部署(Deployment)
本主题重点介绍上述Hello world应用程序的部署。 由于这是一个Angular JS应用程序,因此可以将其部署到任何平台上。 您的开发可以在任何平台上进行。
在这种情况下,它将使用Visual Studio代码在Windows上。 现在让我们看看两个部署选项。
在Windows上部署在NGNIX服务器上
请注意,您可以在任何平台上使用任何Web服务器来托管Angular JS应用程序。 在这种情况下,我们将以NGNIX为例,这是一个流行的Web服务器。
Step 1 - 从以下URL http://nginx.org/en/download.html下载NGNIX Web服务器
Step 2 - 解压缩下载的zip文件后,运行nginx exe组件,这将使Web服务器在后台运行。 然后,您将可以转到url http http://localhost的主页
Step 3 - 转到Windows资源管理器中的Angular JS项目文件夹。
Step 4 - 复制Project→Demo→node-modules文件夹。
Step 5 - 从Project→Demo→src文件夹中复制所有内容。
Step 6 - 将所有内容复制到nginx/html文件夹。
现在转到URL - http://localhost ,您将实际看到hello world应用程序,如以下屏幕截图所示。
在Ubuntu上设置
现在让我们看看如何将相同的hello world应用程序托管到Ubuntu服务器上。
Step 1 - 在Ubuntu服务器上发出以下命令以安装nginx。
apt-get update
以上命令将确保系统上的所有软件包都是最新的。
完成后,系统应该是最新的。
Step 2 - 现在,通过发出以下命令在Ubuntu服务器上安装GIT。
sudo apt-get install git
完成后,GIT将安装在系统上。
Step 3 - 要检查git版本,请发出以下命令。
sudo git version
Step 4 - 安装npm ,它是Ubuntu上的节点包管理器。 为此,请发出以下命令。
sudo apt-get install npm
完成后,将在系统上安装npm 。
Step 5 - 要检查npm版本,请发出以下命令。
sudo npm -version
Step 6 - 接下来,安装nodejs 。 这可以通过以下命令完成。
sudo npm install nodejs
Step 7 - 要查看Node.js的版本,只需发出以下命令。
sudo nodejs version
Step 8 - 使用以下git命令创建项目文件夹并下载github starter项目。
git clone https://github.com/angular/quickstart Demo
这将下载本地系统上的所有文件。
您可以浏览文件夹以查看已从github成功下载的文件。
Step 9 - 接下来为npm发出以下命令。
npm install
这将安装Angular JS应用程序工作所需的所有必需包。
完成后,您将看到系统上安装的所有依赖项。
Step 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应用程序进行更改。
我们将在后续章节中详细讨论这些文件。
Step 11 - 接下来,安装可用于运行Angular 2应用程序的lite服务器。 您可以通过发出以下命令来执行此操作 -
sudo npm install save-dev lite-server
完成后,您将看到完成状态。 你不必担心警告。
Step 12 - 通过以下命令创建指向节点文件夹的符号链接。 这有助于确保节点包管理器可以找到nodejs安装。
sudo ln -s /usr/bin/nodejs /usr/bin/node
Step 13 - 现在是时候通过npm start命令启动Angular 2 Application了。 这将首先构建文件,然后在前面步骤中安装的lite服务器中启动Angular应用程序。
发出以下命令 -
sudo npm start
完成后,您将看到URL。
如果您转到该URL,您现在将看到加载浏览器的Angular 2应用程序。
在Ubuntu上部署nginx
Note - 您可以使用任何平台上的任何Web服务器来托管Angular JS应用程序。 在这种情况下,我们将以NGNIX为例,这是一个流行的Web服务器。
Step 1 - 在Ubuntu服务器上发出以下命令,将nginx安装为Web服务器。
sudo apt-get update
此命令将确保系统上的所有程序包都是最新的。
完成后,系统应该是最新的。
Step 2 - 现在发出以下命令来安装nginx 。
apt-get install nginx
完成后,nginx将在后台运行。
Step 3 - 运行以下命令以确认nginx服务正在运行。
ps ef | grep nginx
现在默认情况下,nginx的文件存储在/ var/www/html文件夹中。 因此,请提供将Hello World文件复制到此位置所需的权限。
Step 4 - 发出以下命令。
sudo chmod 777 /var/www/html
Step 5 - 使用任何方法复制文件,将项目文件复制到/ var/www/html文件夹。
现在,如果您浏览到URL - http://192.168.1.200/index.html您将找到Hello world Angular JS应用程序。
Angular 2 - Modules
Angular JS中使用模块在您的应用程序中设置逻辑边界。 因此,您可以将所有内容构建到单独的模块中,以分离应用程序的功能,而不是将所有内容编码到一个应用程序中。 让我们检查一下添加到演示应用程序的代码。
在Visual Studio代码中,转到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装饰器稍后用于定义导入,声明和引导选项。
对于任何基于Web的角度应用程序,默认情况下都需要BrowserModule。
bootstrap选项告诉Angular在应用程序中引导哪个Component。
模块由以下部分组成 -
Bootstrap array - 用于告诉Angular JS需要加载哪些组件,以便可以在应用程序中访问其功能。 一旦将组件包含在引导程序数组中,就需要声明它们,以便它们可以在Angular JS应用程序中的其他组件中使用。
Export array - 用于导出组件,指令和管道,然后可以在其他模块中使用。
Import array - 与导出数组一样,导入数组可用于从其他Angular JS模块导入功能。
Angular 2 - Architecture
以下屏幕截图显示了Angular 2应用程序的解剖结构。 每个应用程序都包含组件。 每个组件都是应用程序功能的逻辑边界。 您需要具有分层服务,这些服务用于跨组件共享功能。
以下是组件的解剖结构。 一个组成部分包括 -
Class - 这类似于C ++或Java类,它由属性和方法组成。
Metadata - 用于装饰类并扩展类的功能。
Template - 用于定义应用程序中显示的HTML视图。
以下是组件的示例。
import { Component } from '@angular/core';
@Component ({
selector: 'my-app',
templateUrl: 'app/app.component.html'
})
export class AppComponent {
appTitle: string = 'Welcome';
}
每个应用程序都由模块组成。 每个Angular 2应用程序都需要一个Angular Root Module。 然后,每个Angular Root模块可以有多个组件来分隔功能。
以下是根模块的示例。
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 2 - Components
组件是Angular JS应用程序的逻辑代码。 组件包括以下内容 -
Template - 用于呈现应用程序的视图。 这包含需要在应用程序中呈现的HTML。 这部分还包括绑定和指令。
Class - 这类似于用C等任何语言定义的类。它包含属性和方法。 它具有用于支持视图的代码。 它在TypeScript中定义。
Metadata - 这具有为Angular类定义的额外数据。 它由装饰器定义。
现在让我们转到app.component.ts文件并创建我们的第一个Angular组件。
让我们将以下代码添加到文件中,并详细查看每个方面。
Class
类装饰器。 该类在TypeScript中定义。 该类通常在TypeScript中具有以下语法。
语法 (Syntax)
class classname {
Propertyname: PropertyType = Value
}
参数 (Parameters)
Classname - 这是给该类的名称。
Propertyname - 这是给予该物业的名称。
PropertyType - 由于TypeScript是强类型的,因此您需要为该属性指定一个类型。
Value - 这是给予物业的价值。
例子 (Example)
export class AppComponent {
appTitle: string = 'Welcome';
}
在该示例中,需要注意以下事项 -
我们正在定义一个名为AppComponent的类。
使用export关键字,以便可以在Angular JS应用程序的其他模块中使用该组件。
appTitle是该属性的名称。
该属性被赋予字符串的类型。
该物业的价值为 Welcome 。
Template
这是需要在应用程序中呈现的视图。
语法 (Syntax)
Template: '
<HTML code>
class properties
'
参数 (Parameters)
HTML Code - 这是需要在应用程序中呈现的HTML代码。
Class properties - 这些是可以在模板中引用的类的属性。
例子 (Example)
template: '
<div>
<h1>{{appTitle}}</h1>
<div>To IOWIKI</div>
</div>
'
在该示例中,需要注意以下事项 -
我们正在定义将在我们的应用程序中呈现的HTML代码
我们还引用了我们class的appTitle属性。
Metadata
这用于装饰Angular JS类以及其他信息。
让我们看看完成的代码与我们的类,模板和元数据。
例子 (Example)
import { Component } from '@angular/core';
@Component ({
selector: 'my-app',
template: ` <div>
<h1>{{appTitle}}</h1>
<div>To IOWIKI</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>
输出 (Output)
现在,如果我们转到浏览器并查看输出,我们将看到输出是在组件中呈现的。
Angular 2 - Templates
在“组件”一章中,我们已经看到了以下模板的示例。
template: '
<div>
<h1>{{appTitle}}</h1>
<div>To IOWIKI</div>
</div>
'
这称为inline template 。 还有其他方法可以定义模板,可以通过templateURL命令完成。 在组件中使用它的最简单方法如下。
语法 (Syntax)
templateURL:
viewname.component.html
参数 (Parameters)
viewname - 这是应用程序组件模块的名称。
在viewname之后,需要将组件添加到文件名中。
以下是定义内联模板的步骤。
Step 1 - 创建一个名为app.component.html的文件。 这将包含视图的html代码。
Step 2 - 在上面创建的文件中添加以下代码。
<div>{{appTitle}} IoWiki </div>
这定义了一个简单的div标签,并从app.component类引用appTitle属性。
Step 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.component.html文件的链接,该文件位于app文件夹中。
Step 4 - 在浏览器中运行代码,您将获得以下输出。
从输出中可以看出,相应地调用了模板文件(app.component.html)文件。
Angular 2 - Directives
directive是一个自定义HTML元素,用于扩展HTML的强大功能。 Angular 2具有以下指令,这些指令作为BrowserModule模块的一部分进行调用。
- ngif
- ngFor
如果您查看app.module.ts文件,您将看到以下代码和BrowserModule模块已定义。 通过定义此模块,您将可以访问2个指令。
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
如果计算结果为true,则ngif元素用于向HTML代码添加元素,否则不会将元素添加到HTML代码中。
语法 (Syntax)
*ngIf = 'expression'
如果表达式的计算结果为true,则会添加相应的内容,否则不会添加元素。
现在让我们看看如何使用* ngif指令的示例。
Step 1 - 首先将属性添加到名为appStatus的类中。 这将是布尔类型。 让这个值保持为真。
import { Component } from '@angular/core';
@Component ({
selector: 'my-app',
templateUrl: 'app/app.component.html'
})
export class AppComponent {
appTitle: string = 'Welcome';
appStatus: boolean = true;
}
Step 2 - 现在在app.component.html文件中,添加以下代码。
<div *ngIf = 'appStatus'>{{appTitle}} IoWiki </div>
在上面的代码中,我们现在有了* ngIf指令。 在指令中,我们正在评估appStatus属性的值。 由于属性的值应该评估为true,这意味着div标记应该显示在浏览器中。
添加上面的代码后,我们将在浏览器中获得以下输出。
输出 (Output)
ngFor
ngFor元素用于基于For循环条件的元素。
语法 (Syntax)
*ngFor = 'let variable of variablelist'
变量是一个临时变量,用于显示变量列表中的variablelist 。
现在让我们看一下如何使用* ngFor指令的示例。
Step 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。
Step 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参数。
添加上面的代码后,我们将在浏览器中获得以下输出。
输出 (Output)
Angular 2 - Metadata
元数据用于装饰类,以便它可以配置类的预期行为。 以下是元数据的不同部分。
Annotations - 这些是类级别的装饰器。 这是一个包含@Component和@Routes装饰器的数组和示例。
以下是示例代码,该代码存在于app.component.ts文件中。
@Component ({
selector: 'my-app',
templateUrl: 'app/app.component.html'
})
组件装饰器用于将app.component.ts文件中的类声明为组件。
Design:paramtypes - 这些仅用于构造函数并仅应用于Typescript。
propMetadata - 这是应用于类属性的元数据。
以下是示例代码。
export class AppComponent {
@Environment( test )
appTitle: string = 'Welcome';
}
这里,@ Environment是应用于属性appTitle的元数据,给出的值是 test 。
Parameters - 这是由构造函数级别的装饰器设置的。
以下是示例代码。
export class AppComponent {
constructor(@Environment( test private appTitle:string) { }
}
在上面的示例中,元数据应用于构造函数的参数。
Angular 2 - Data Binding
双向绑定是Angular JS中的一项功能,但已从Angular 2.x开始删除。 但是现在,自Angular 2中的类事件发生以来,我们可以绑定到AngularJS类中的属性。
假设您有一个具有类名的类,一个具有类型和值的属性。
export class className {
property: propertytype = value;
}
然后,您可以将html标记的属性绑定到类的属性。
<html tag htmlproperty = 'property'>
然后将属性的值分配给html的html属性。
让我们看一下如何实现数据绑定的示例。 在我们的示例中,我们将查看显示图像,其中图像源将来自我们class中的属性。 以下是实现此目标的步骤。
Step 1 - 下载任意2张图片。 在本例中,我们将下载如下所示的一些简单图像。
Step 2 - 将这些图像存储在app目录中名为Images的文件夹中。 如果图像文件夹不存在,请创建它。
Step 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'
} ];
}
Step 4 - 在app.component.html中添加以下内容,如下所示。
<div *ngFor = 'let lst of appList'>
<ul>
<li>{{lst.ID}}</li>
<img [src] = 'lst.url'>
</ul>
</div>
在上面的app.component.html文件中,我们正在访问类中属性的图像。
输出 (Output)
上述程序的输出应该是这样的 -
Angular 2 - CRUD Operations Using HTTP
我们将在本章中讨论的基本CRUD操作是使用Angular 2从Web服务读取数据。
例子 (Example)
在这个例子中,我们将定义一个数据源,它是一个简单的产品json文件。 接下来,我们将定义一个服务,用于从json文件中读取数据。 然后,我们将在我们的主app.component.ts文件中使用此服务。
Step 1 - 首先让我们在Visual Studio代码中定义我们的product.json文件。
在products.json文件中,输入以下文本。 这将是将从Angular JS应用程序中获取的数据。
[{
"ProductID": 1,
"ProductName": "ProductA"
},
{
"ProductID": 2,
"ProductName": "ProductB"
}]
Step 2 - 定义一个接口,该接口将作为类定义来存储products.json文件中的信息。 创建一个名为products.ts的文件。
Step 3 - 在文件中插入以下代码。
export interface IProduct {
ProductID: number;
ProductName: string;
}
上面的接口将ProductID和ProductName的定义作为接口的属性。
Step 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 { }
Step 5 - 在Visual Studio代码中定义products.service.ts文件
Step 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)));
}
}
关于上述计划,需要注意以下几点。
来自'@ angular/http'语句的import {Http,Response}用于确保http函数可用于从products.json文件中获取数据。
以下语句用于使用可用于创建Observable变量的Reactive框架。 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)命令将数据发送到浏览器中的控制台。
Step 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运行应用npm 。 转到浏览器,我们将看到以下输出。
在控制台中,我们将看到从products.json文件中检索的数据。
Angular 2 - Error Handling
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 - Routing
路由有助于根据用户在主页面上选择的选项将用户引导至不同的页面。 因此,根据他们选择的选项,将向用户呈现所需的角度组件。
让我们看看必要的步骤,看看我们如何在Angular 2应用程序中实现路由。
Step 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>
Step 2 - 为应用程序创建两个路由。 为此,创建名为Inventory.component.ts和product.component.ts 2个文件
Step 3 - 将以下代码放在product.component.ts文件中。
import { Component } from '@angular/core';
@Component ({
selector: 'my-app',
template: 'Products',
})
export class Appproduct {
}
Step 4 - 将以下代码放在Inventory.component.ts文件中。
import { Component } from '@angular/core';
@Component ({
selector: 'my-app',
template: 'Inventory',
})
export class AppInventory {
}
这两个组件都没有做任何花哨的事情,它们只是根据组件呈现关键字。 因此,对于Inventory组件,它将向用户显示Inventory关键字。 对于产品组件,它会向用户显示product关键字。
Step 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确保将路由添加到应用程序。
Step 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>是占位符,用于根据用户选择的选项呈现组件。
现在,保存所有代码并使用npm运行应用程序。 转到浏览器,您将看到以下输出。
现在,如果单击“库存”链接,您将获得以下输出。
添加错误路由
在路由中,还可以添加错误路由。 如果用户转到应用程序中不存在的页面,则会发生这种情况。
让我们看看我们如何实现这一目标。
Step 1 - 将PageNotFound组件添加为NotFound.component.ts,如下所示 -
Step 2 - 将以下代码添加到新文件中。
import { Component } from '@angular/core';
@Component ({
selector: 'my-app',
template: 'Not Found',
})
export class PageNotFoundComponent {
}
Step 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 - Navigation
在Angular 2中,也可以进行手动导航。 以下是步骤。
Step 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标记,其中有一个标记为click事件的onBack函数。 因此,当用户单击此按钮时,它们将被定向回“产品”页面。
在onBack功能中,使用router.navigate导航到所需的页面。
Step 2 - 现在,保存所有代码并使用npm运行应用程序。 转到浏览器,您将看到以下输出。
Step 3 - 单击“清单”链接。
Step 4 - 单击 返回产品 链接,您将看到以下输出,它将带您返回产品页面。
Angular 2 - Forms
Angular 2还可以设计可以使用ngModel指令进行双向绑定的ngModel 。 让我们看看我们如何实现这一目标。
Step 1 - 创建一个作为产品模型的模型。 创建一个名为products.ts文件的文件。
Step 2 - 将以下代码放在文件中。
export class Product {
constructor (
public productid: number,
public productname: string
) { }
}
这是一个简单的类,它有2个属性,productid和productname。
Step 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的位置。
Step 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指令用于将产品的对象绑定到表单上的单独元素。
Step 5 - 将以下代码放在app.component.ts文件中。
import { Component } from '@angular/core';
@Component ({
selector: 'my-app',
template: '<product-form></product-form>'
})
export class AppComponent { }
Step 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 { }
Step 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
Note - 请确保在系统上安装了Python。 Python可以从网站https://www.python.org/下载
第一步是安装CLI。 我们可以使用以下命令执行此操作 -
npm install g angular-cli
现在,在任何目录中创建一个名为angularCLI的新文件夹,然后发出上述命令。
完成后,将安装CLI。
创建项目
可以使用以下命令创建Angular JS项目。
语法 (Syntax)
ng new Project_name
参数 (Parameters)
Project_name - 这是需要创建的项目的名称。
输出 (Output)
没有。
例子 (Example)
让我们执行以下命令来创建一个新项目。
ng new demo2
它将自动创建文件并开始下载必要的npm包。
现在在Visual Studio代码中,我们可以打开新创建的项目。
运行项目
要运行该项目,您需要发出以下命令 -
ng server
正在运行的应用程序的默认端口号是4200.您可以浏览到该端口并查看正在运行的应用程序。
Angular 2 - Dependency Injection
依赖注入是在运行时添加组件功能的能力。 让我们看一个示例和用于实现依赖注入的步骤。
Step 1 - 创建一个具有可注入装饰器的单独类。 可注入装饰器允许在任何Angular JS模块中注入和使用此类的功能。
@Injectable()
export class classname {
}
Step 2 - 接下来在appComponent模块或您要使用该服务的模块中,您需要将其定义为@Component装饰器中的提供程序。
@Component ({
providers : [classname]
})
让我们来看一个如何实现这个目标的例子。
Step 1 - 为名为app.service.ts的服务创建ts文件。
Step 2 - 将以下代码放在上面创建的文件中。
import {
Injectable
} from '@angular/core';
@Injectable()
export class appService {
getApp(): string {
return "Hello world";
}
}
关于上述计划,需要注意以下几点。
Injectable装饰器从angular/core模块导入。
我们正在创建一个名为appService的类,该类使用Injectable装饰器进行修饰。
我们正在创建一个名为getApp的简单函数,它返回一个名为 Helloorld 的简单字符串。
Step 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 lifecyclehook中,我们调用了服务的getApp函数,并将输出分配给AppComponent类的value属性。
保存所有代码更改并刷新浏览器,您将获得以下输出。
Angular 2 - Advanced Configuration
在本章中,我们将查看作为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,这是因为大多数浏览器只能理解ES5Typescript。
sourceMap选项用于生成Map文件,这在调试时很有用。 因此,在开发过程中保持此选项为真。
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": {}
}
关于上述代码的一些要点 -
有两种类型的依赖项,首先是依赖项,然后是dev依赖项。 开发过程中需要开发者,运行应用程序需要其他人。
“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 - Third Party Controls
Angular 2允许您使用任何第三方控件。 确定要实施的控件后,需要执行以下步骤 -
Step 1 - 使用npm命令安装组件。
例如,我们将通过以下命令安装ng2-pagination第三方控件。
npm install ng2-pagination --save
完成后,您将看到组件已成功安装。
Step 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 { }
Step 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 { }
Step 4 - 保存所有代码更改并刷新浏览器,您将获得以下输出。
在上图中,您可以看到图像已存储为图像文件夹中的One.jpg和two.jpg。
Step 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个图像的相对路径。
Step 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属性的所有元素。
对于每个属性,它使用list元素显示图像。
然后,img标记的src属性被绑定到我们类中appList的url属性。
Step 7 - 保存所有代码更改并刷新浏览器,您将获得以下输出。 从输出中,您可以清楚地看到图像已被拾取并显示在输出中。
Angular 2 - Data Display
在Angular JS中,很容易在HTML表单中显示类属性的值。
让我们举个例子,了解有关数据显示的更多信息。 在我们的示例中,我们将在HTML页面中查看在类中显示各种属性的值。
Step 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的数组,其类型为string。
我们将3个字符串元素定义为数组的一部分,即Binding,Display和Services。
我们还定义了一个名为TutorialName的属性,其值为Angular 2。
Step 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页面中教程的名称是什么 。
我们使用数组的索引值来显示数组中的3个主题。
Step 3 - 保存所有代码更改并刷新浏览器,您将获得以下输出。 从输出中,您可以清楚地看到数据是根据类中属性的值显示的。
另一个动态绑定的简单示例是使用输入html标记。 它只是在html标记中输入数据时显示数据。
对app/app.component.html文件进行以下更改,该文件是您的模板文件。
<div>
<input [value] = "name" (input) = "name = $event.target.value">
{{name}}
</div>
关于上述代码需要注意以下几点。
[value] = username - 用于将表达式用户名绑定到inputelement svalue属性。
(input) = expression - 这是一种将表达式绑定到输入元素输入事件的声明方式。
username = $event.target.value - 触发输入事件时执行的表达式。
$event - Angular在事件绑定中公开的表达式,它具有event s有效负载的值。
保存所有代码更改并刷新浏览器后,您将获得以下输出。
现在,在输入框中键入一些内容,例如 IoWiki 。 输出将相应改变。
Angular 2 - Handling Events
在Angular 2中,诸如按钮点击或任何其他类型的事件之类的事件也可以非常容易地处理。 事件从html页面触发,并发送到Angular JS类进行进一步处理。
让我们看一下如何实现事件处理的示例。 在我们的示例中,我们将查看显示单击按钮和状态属性。 最初,status属性为true。 单击该按钮后,status属性将变为false。
Step 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;
}
}
关于上述代码需要注意以下几点。
我们定义了一个名为Boolean的类型的变量,该变量最初为true。
接下来,我们定义了单击的函数,只要在我们的html页面上单击按钮,就会调用该函数。 在函数中,我们将Status属性的值从true更改为false。
Step 2 - 对app/app.component.html文件(模板文件)进行以下更改。
<div>
{{Status}}
<button (click) = "clicked()">Click</button>
</div>
关于上述代码需要注意以下几点。
我们首先只显示我们类的Status属性的值。
然后定义具有Click值的按钮html标记。 然后,我们确保按钮的click事件被触发到我们class中的clicked事件。
Step 3 - 保存所有代码更改并刷新浏览器,您将获得以下输出。
Step 4 - 单击“单击”按钮,您将获得以下输出。
Angular 2 - Transforming Data
Angular 2有很多可用于转换数据的过滤器和管道。
lowercase
这用于将输入转换为全小写。
语法 (Syntax)
Propertyvalue | lowercase
参数 (Parameters)
没有
结果 (Result)
属性值将转换为小写。
例子 (Example)
首先确保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>
输出 (Output)
保存所有代码更改并刷新浏览器后,您将获得以下输出。
大写(uppercase)
这用于将输入转换为全部大写。
语法 (Syntax)
Propertyvalue | uppercase
参数 (Parameters)
没有。
结果 (Result)
属性值将转换为大写。
例子 (Example)
首先确保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>
输出 (Output)
保存所有代码更改并刷新浏览器后,您将获得以下输出。
slice
这用于从输入字符串中切片数据。
语法 (Syntax)
Propertyvalue | slice:start:end
参数 (Parameters)
start - 这是切片应该从哪里开始的起始位置。
end - 这是切片应该结束的起始位置。
结果 (Result)
将根据开始和结束位置对属性值进行切片。
例子 (Example)
首先确保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>
输出 (Output)
保存所有代码更改并刷新浏览器后,您将获得以下输出。
日期
这用于将输入字符串转换为日期格式。
语法 (Syntax)
Propertyvalue | date: dateformat
参数 (Parameters)
dateformat - 这是输入字符串应转换为的日期格式。
结果 (Result)
属性值将转换为日期格式。
例子 (Example)
首先确保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>
输出 (Output)
保存所有代码更改并刷新浏览器后,您将获得以下输出。
currency
这用于将输入字符串转换为货币格式。
语法 (Syntax)
Propertyvalue | currency
参数 (Parameters)
没有。
结果 (Result)
属性值将转换为货币格式。
例子 (Example)
首先确保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>
输出 (Output)
保存所有代码更改并刷新浏览器后,您将获得以下输出。
百分比(percentage)
这用于将输入字符串转换为百分比格式。
语法 (Syntax)
Propertyvalue | percent
参数 (Parameters)
没有
结果 (Result)
属性值将转换为百分比格式。
例子 (Example)
首先确保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>
输出 (Output)
保存所有代码更改并刷新浏览器后,您将获得以下输出。
管道百分比的另一种变化如下。
语法 (Syntax)
Propertyvalue | percent: {minIntegerDigits}.{minFractionDigits}{maxFractionDigits}
参数 (Parameters)
minIntegerDigits - 这是整数的最小数字。
minFractionDigits - 这是小数位数的最小数量。
maxFractionDigits - 这是小数位数的最大数量。
结果 (Result)
属性值将转换为百分比格式
例子 (Example)
首先确保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>
输出 (Output)
保存所有代码更改并刷新浏览器后,您将获得以下输出。
Angular 2 - Custom Pipes
Angular 2还具有创建自定义管道的功能。 定义自定义管道的一般方法如下。
import { Pipe, PipeTransform } from '@angular/core';
@Pipe({name: 'Pipename'})
export class Pipeclass implements PipeTransform {
transform(parameters): returntype { }
}
Where,
'Pipename' - 这是管道的名称。
Pipeclass - 这是分配给自定义管道的类的名称。
Transform - 这是使用管道的功能。
Parameters - 这是传递给管道的参数。
Returntype - 这是管道的返回类型。
让我们创建一个自定义管道,将2个数字相乘。 然后我们将在组件类中使用该管道。
Step 1 - 首先,创建一个名为multiplier.pipe.ts的文件。
Step 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”的Pipe。
创建一个名为MultiplierPipe的类,用于实现PipeTransform模块。
然后,变换函数将接收值和多个参数,并输出两个数字的乘法。
Step 3 - 在app.component.ts文件中,放置以下代码。
import {
Component
} from '@angular/core';
@Component ({
selector: 'my-app',
template: '<p>Multiplier: {{2 | Multiplier: 10}}</p>'
})
export class AppComponent { }
Note - 在我们的模板中,我们使用新的自定义管道。
Step 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模块。
我们还需要确保它包含在声明部分中。
保存所有代码更改并刷新浏览器后,您将获得以下输出。
Angular 2 - User Input
在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 - 用于将表达式用户名绑定到inputelement svalue属性。
(input) = expression - 这是一种将表达式绑定到输入元素输入事件的声明方式。
username = $event.target.value - 触发输入事件时执行的表达式。
$event - 是Angular在事件绑定中公开的表达式,它具有event s有效负载的值。
保存所有代码更改并刷新浏览器后,您将获得以下输出。
您现在可以键入任何内容,相同的输入将反映在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 - Lifecycle Hooks
Angular 2应用程序遍历整个流程集,或者从应用程序的启动到结束都有一个生命周期。
下图显示了Angular 2应用程序生命周期中的整个过程。
以下是每个生命周期钩子的描述。
ngOnChanges - 当数据绑定属性的值更改时,将调用此方法。
ngOnInit - 只要在Angular首次显示数据绑定属性后初始化指令/组件,就会调用此方法。
ngDoCheck - 用于检测并对Angular自身无法检测或不会检测到的更改进行操作。
ngAfterContentInit - 在Angular将外部内容ngAfterContentInit到组件视图中之后调用此方法。
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 - Nested Containers
在Angular JS中,可以将容器嵌套在彼此内部。 外部容器称为父容器,内部容器称为子容器。 让我们来看一个如何实现这个目标的例子。 以下是步骤。
Step 1 - 为名为child.component.ts的子容器创建一个ts文件。
Step 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 。
Step 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-app”选择器到我们的主要组件。
Step 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 - Services
当需要向各种模块提供通用功能时,使用服务。 例如,我们可以拥有可以在各种模块之间重用的数据库功能。 因此,您可以创建可以具有数据库功能的服务。
创建服务时需要执行以下关键步骤。
Step 1 - 创建一个具有可注入装饰器的单独类。 可注入装饰器允许在任何Angular JS模块中注入和使用此类的功能。
@Injectable()
export class classname {
}
Step 2 - 接下来在appComponent模块或您要使用该服务的模块中,您需要将其定义为@Component装饰器中的提供程序。
@Component ({
providers : [classname]
})
让我们来看一个如何实现这个目标的例子。 以下是涉及的步骤。
Step 1 - 为名为app.service.ts的服务创建ts文件。
Step 2 - 将以下代码放在上面创建的文件中。
import {
Injectable
} from '@angular/core';
@Injectable()
export class appService {
getApp(): string {
return "Hello world";
}
}
关于上述计划,需要注意以下几点。
Injectable装饰器从angular/core模块导入。
我们正在创建一个名为appService的类,该类使用Injectable装饰器进行修饰。
我们正在创建一个名为getApp的简单函数,它返回一个名为 Helloorld 的简单字符串。
Step 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 lifecyclehook中,我们调用了服务的getApp函数,并将输出分配给AppComponent类的value属性。
保存所有代码更改并刷新浏览器后,您将获得以下输出。