使用 Angular 2 构建 Giphy 搜索应用程序
介绍
本指南的重点是构建一个 Angular 2 应用程序，以便使用其 API搜索Giphy 的 gif。有关从 Angular 1 过渡到 Angular 2 以及设置 Angular 应用程序的更多信息，请阅读我之前的指南：Angular 2 应用程序入门。
添加内容
我们想在应用程序中添加一些内容，但从哪里开始呢？当我开始一个项目时，我做的第一件事就是查看生成的输出。然后，我尝试在源代码中找到与该输出相对应的字符串。为此，我使用 Sublime 的搜索命令。如果您使用的是其他编辑器，它可能具有类似的功能，用于在源代码中查找合适的字符串。
如果我们搜索字符串app works!，你会看到该字符串位于app.component.ts文件中（在app文件夹中）。该文件包含以下内容：
import { Component } from "@angular/core";
@Component({
moduleId: module.id,
selector: "app-root",
templateUrl: "app.component.html",
styleUrls: ["app.component.css"]
})
export class AppComponent {
title = "app works!";
}
我们可以看到我们可以在哪里更改应用程序的运行情况！文本。因此，让我们将其更改为Welcome to GiphySearch。
导入
让我们来分析一下这些新代码的含义：
从'@angular/core'导入{Component}；
import命令定义了我们将在代码中导入和使用哪些部分。在我们的例子中，我们从@angular/core模块导入组件。
成分
如果 Web 开发有自己的报纸或杂志，您可能会看到这样的标题：
指令已过时，组件为未来带来希望
全部安装好组件
组件：为什么它们很棒、为什么要使用它们以及为什么它们会改变世界
简而言之，组件是新的指令，是角度应用程序的构建块。
这是一个示例组件：
import { Component } from "@angular/core";
@Component({
selector: "awesome",
template: `
<div>
Awesome content right here!
</div>
`
})
class Awesome {}
组件装饰器（@Component）向其后跟的类（Awesome）添加附加数据，例如：
- 选择器- 告诉 Angular 要匹配哪个元素
- 模板-定义视图
组件控制器由Awesome类定义。
我们将能够在 HTML 中使用这个新标签（ awesome ），如下所示： <awesome></awesome>，并且一旦在浏览器中呈现给用户，它将在此处显示为 Awesome 内容！。
在此示例中，我们使用反引号 (`) 定义了模板。模板中的反引号允许我们定义多行字符串。
尽管有些人在@Component中定义模板，但我倾向于避免这样做，并将模板的 HTML 定义在单独的文件中。这也是 angular-cli 所喜欢的方式，所以 QED
添加输入和按钮
我们的基本应用程序应该有一个输入字段和一个按钮。
为此，请将以下代码添加到app.component.html文件中：
<input name="search">
<button>Search</button>
操作
一个简单的搜索输入字段和一个按钮并没有多大帮助。我们希望能够点击按钮，并希望向控制台输出一些内容，以验证它是否正常工作。
这就是我们在 Angular 2 中定义处理按钮点击的函数的方式：
<button (click)="performSearch()">搜索</button>
但是现在，如果你点击这个按钮，你会得到一个错误。那是因为我们还没有在任何地方定义performSearch函数。在app.component.ts文件中，在AppComponent类中添加以下函数定义：
performSearch(): void {
console.log('button click is working');
}
这样，我们就定义了performSearch函数，它不接受任何参数，也不返回任何内容（void）。相反，它只是将按钮单击正在工作打印到控制台。要访问它，请打开您的开发人员工具来访问它。
接受输入
如果我们希望将某人在输入字段中输入的字符串打印到控制台，该怎么办？首先，我们需要向输入字段添加一个新属性：
<输入名称=“标题”#searchTerm>
#searchTerm (又名resolve ) 告诉 Angular 将输入绑定到新的searchTerm变量。然后，我们需要在performSearch函数中传递此变量，如下所示：
<button (click)="performSearch(searchTerm)">搜索</button>
最后，在app.components.ts文件中，将performSearch函数更改如下：
performSearch(searchTerm: HTMLInputElement): void {
console.log(`User entered: ${searchTerm.value}`);
}
我们为该函数添加了一个新参数 ( searchTerm )，该参数属于HTMLInputElement类型。并且我们使用反引号在console.log中输出字符串。请注意，我们如何使用${}在反引号内输出变量。因为searchTerm是一个对象，所以我们必须通过引用其value属性 ( ${searchTerm.value} ) 来获取其值。
Giphy 搜索 API
接下来，我们将从我们的应用程序内部检索这些数据。
Angular HTTP 请求
在 Angular 2 中，我们总是从@angular/http模块导入 HTTP 服务。以下命令将执行此操作：
从'@angular/http'导入{HTTP_PROVIDERS}；
现在我们可以将Http注入到我们的组件中。
让我们将其转化为我们的代码。在app.components.ts文件中，在第一次导入后添加以下代码：
从'@angular/http'导入{Http，Response}；
然后，定义两个变量：
link = "http://api.giphy.com/v1/gifs/search?api_key=dc6zaTOxFJmzC&q=";
http: Http;
然后，添加如下构造函数：
constructor(http: Http) {
this.http = http;
}
最后，将其添加到performSearch函数中：
var apiLink = this.link + searchTerm.value;
this.http.request(apiLink).subscribe((res: Response) => {
console.log(res.json());
});
免责声明：本内容来源于第三方作者授权、网友推荐或互联网整理，旨在为广大用户提供学习与参考之用。所有文本和图片版权归原创网站或作者本人所有，其观点并不代表本站立场。如有任何版权侵犯或转载不当之情况，请与我们取得联系，我们将尽快进行相关处理与修改。感谢您的理解与支持！
请先 登录后发表评论 ~