首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

在angular 2.0中使用Heroes示例中的实时API需要做哪些更改

在Angular 2.0中使用Heroes示例中的实时API,需要进行以下更改:

  1. 导入HttpClient模块:在使用实时API之前,需要在Angular项目中导入HttpClient模块。可以通过在app.module.ts文件中的imports数组中添加HttpClientModule来实现。
代码语言:typescript
复制
import { HttpClientModule } from '@angular/common/http';

@NgModule({
  imports: [
    HttpClientModule
  ],
  ...
})
export class AppModule { }
  1. 创建一个服务:为了使用实时API,可以创建一个Angular服务来处理与API的交互。可以使用Angular的命令行工具(Angular CLI)生成一个服务。
代码语言:bash
复制
ng generate service api

这将在src/app目录下生成一个名为api.service.ts的文件。

  1. 在服务中定义API请求:在api.service.ts文件中,可以定义与实时API的交互逻辑。可以使用HttpClient模块提供的get、post、put等方法发送HTTP请求。
代码语言:typescript
复制
import { HttpClient } from '@angular/common/http';

@Injectable({
  providedIn: 'root'
})
export class ApiService {
  private apiUrl = 'https://api.example.com'; // 实时API的URL

  constructor(private http: HttpClient) { }

  getHeroes(): Observable<Hero[]> {
    return this.http.get<Hero[]>(`${this.apiUrl}/heroes`);
  }

  // 其他API请求方法...
}

在上面的示例中,getHeroes()方法发送一个GET请求到实时API的/heroes端点,并返回一个Observable对象,该对象会发出一个Hero数组。

  1. 在组件中使用服务:在需要使用实时API的组件中,可以注入并使用刚刚创建的服务。
代码语言:typescript
复制
import { Component, OnInit } from '@angular/core';
import { ApiService } from './api.service';

@Component({
  selector: 'app-heroes',
  templateUrl: './heroes.component.html',
  styleUrls: ['./heroes.component.css']
})
export class HeroesComponent implements OnInit {
  heroes: Hero[];

  constructor(private apiService: ApiService) { }

  ngOnInit() {
    this.getHeroes();
  }

  getHeroes(): void {
    this.apiService.getHeroes()
      .subscribe(heroes => this.heroes = heroes);
  }
}

在上面的示例中,HeroesComponent组件通过调用apiService的getHeroes()方法来获取英雄数据,并将其赋值给heroes属性。

这些是在Angular 2.0中使用Heroes示例中的实时API所需的基本更改。根据实际情况,可能还需要进行其他更改,如处理错误、添加身份验证等。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

AngularDart 4.0 高级-管道 顶

API参考管道主题中了解更多关于这些和许多其他内置管道信息; 过滤包含单词“管道”条目。 由于本页附录解释了Angular没有FilterPipe或OrderByPipe原因。...当您使用管道时,Angular会选择更简单,更快速变更检测算法。  不使用管道 在下一个示例,组件使用默认积极变化检测策略来监控并更新其hero列表每个英雄显示。...纯净管道 仅当Angular检测到对输入值纯粹更改时才执行纯管道。 AngularDart,纯粹改变仅仅来自对象引用改变(假设所有东西都是Dart对象)。...当你不能时,你可以使用不纯管道。 或者你可能根本不使用管道。 用组件属性来追求管道目的可能会更好,这点在本页稍后会讨论。 不纯管道 Angular每个组件更改检测周期执行不纯管道。...下一步 管道是封装和共享常见显示值转换好方法。 像样式一样使用它们,将它们放入模板表达式,以丰富视图吸引力和可用性。 API参考中探索Angular内置管道库。

6.4K20

AngularDart 4.0 高级-路由概述 顶

本指南涵盖路由器主要功能,通过演示可以实时运行小应用程序(查看源代码)演示它们。 概观 浏览器是一种熟悉应用程序导航模型: 地址栏输入一个URL,然后浏览器导航到相应页面。...在任何使用路由器功能Dart文件,导入路由器库: import 'package:angular_router/angular_router.dart'; 注册提供者和列表指令 如果您已经熟悉Angular...路由器插座 当此应用浏览器URL成为/#/heroes时,路由器将该URL与名为HeroesRouteDefinition匹配,并在放置宿主视图HTMLRouterOutlet后显示HeroesComponent...Routing component 一个带有RouterOutletAngular组件,可根据路由导航显示视图。 示例应用程序 本指南介绍了多页面路由示例应用程序开发。...危机详情显示列表下方同一页面上子视图中。 改变危机名称。 请注意危机列表相应名称不会更改。 ?

6.1K20
  • AngularDart4.0 英雄之旅-教程-08HTTP 顶

    进行更改时,请通过重新加载浏览器窗口来保持运行。 提供HTTP服务 您将使用Dart http软件包客户端类与服务器进行通信。...请注意服务器返回数据形状。 这个特定内存web API示例返回一个具有data属性对象。 你API可能会返回其他东西。 调整代码以匹配您Web API。...示例,基础字符串流(_searchTerms.stream)表示由用户输入英雄名称搜索模式。 每次调用search()都会通过调用控制器上add()将新字符串放入流。...仪表板搜索框输入一些文字。 如果你输入字符匹配任何现有的英雄名字,你会看到这样东西。 ? 应用程序结构和代码 查看此页面的实例(查看源代码)示例源代码。 确认您具有以下结构: ?...您配置了内存Web API。 您了解了如何使用Streams。

    11K30

    AngularDart4.0 英雄之旅-教程-07路由 顶

    将选择器my-app重命名为my-heroes。 将模板URL更改heroes_component.html,并将样式文件更改heroes_component.css。...更新pubspec 使用Angular路由(angular_router)启用导航。 由于路由器自己,首先将该包添加到应用pubspec: ?...警告模板中使用Angular管道之前,需要将其列组件@Component注解pipes参数。 您可以单独添加管道,或者为了方便起见,可以使用COMMON_PIPES组。...你所要做就是定义它风格。 应用程序全局样式 将样式添加到组件时,可以将组件需要所有内容(HTML,CSS和代码)一起放在一个方便位置。 把它打包起来很容易,在其他地方重新使用组件。...仪表板,英雄和导航链接样式。 ? 应用程序结构和代码 查看此页面的实例(查看源代码)示例源代码。 确认您具有以下结构: ?

    17.6K30

    AngularDart4.0 指南-体系结构概述 顶

    您可以通过使用Angular标记组合HTML 模板,编写组件类来管理这些模板,服务添加应用程序逻辑以及模块中装入组件和服务来编写Angular应用程序。 然后,通过引导根模块启动应用程序。...该类通过属性和方法API与视图交互。  例如,这个HeroListComponent有一个heroes属性,返回从服务获取英雄列表。...用户更改也会返回到组件,将属性重置为最新值,就像事件绑定一样。 Angular每个JavaScript事件循环中处理所有数据绑定,从应用程序组件树根到所有子组件。 ?...示例模板使用两个内置结构指令: lib / src / hero_list_component.html(structural) </...Angular使用依赖注入来为新组件提供他们需要服务。 Angular可以通过查看构造函数参数类型来判断组件需要哪些服务。

    7.9K30

    AngularDart4.0 指南- 依赖注入 顶

    在这个示例应用程序,HeroComponent是应用程序启动时创建,并且永远不会销毁,因此为HeroComponent创建HeroService也依赖于应用程序生命周期而存在。...由于HeroService是Heroes功能集内使用,而在其他地方无法使用HeroService,因此注册它理想位置是HeroesComponent。...像EvenBetterLogger一样,HeroService需要一个关于用户真实信息。 它需要知道用户是否有权查看秘密英雄。 单个应用程序会话期间,该授权可能会更改,例如您登录不同用户。...在这个示例,只需要在HeroesComponent,它将替换元数据提供程序数组以前HeroService注册。...在这个例子Angular将组件注入器注入到组件构造函数。 该组件然后ngOnInit()向注入注入器询问它想要服务。 请注意,服务本身不会被注入到组件

    5.7K20

    AngularDart4.0 指南- 显示数据 顶

    您可以通过将HTML模板控件绑定到Angular组件属性来显示数据。 在这个页面,您将创建一个包含英雄列表组件。 您将显示英雄名单列表,并有条件地列表下方显示一条消息。... 当您使用AppComponent类(web / main.dart)引导时,Angular将在index.html查找,查找它,实例化AppComponent...heroes.first; } 现在使用模板Angular ngFor指令来显示英雄列表每个项目。...模板中使用任何Angular指令之前,您需要将它们列组件@Component注解指令参数。...用NgIf进行条件显示 有时候,只有特定情况下,应用程序才需要显示视图或视图一部分。 如果有三个以上英雄,让我们更改示例以显示一条消息。

    5.3K10

    AngularDart 4.0 高级-结构指令 顶

    三种常见内置结构指令 - NgIf,NgFor和NgSwitch ... - 模板语法指南中进行了描述,并在整个Angular文档示例中进行了介绍。...以下是模板示例: <div *ngIf="hero !...它一直<em>在</em>倾听事件。 <em>Angular</em>不断检查可能会影响数据绑定<em>的</em><em>更改</em>。 无论组件在做什么,它都会继续这样做。 虽然看不见,但组件及其所有后代组件都会占用资源。...您可以<em>在</em>分配给ngFor<em>的</em>字符串<em>中</em>启用这些功能,这是您在<em>Angular</em><em>的</em>microsyntax<em>中</em>编写<em>的</em>。...满足<em>Angular</em>模板<em>中</em><em>的</em>类似需求。 编写一个结构指令 <em>在</em>本节<em>中</em>,您将编写一个与NgIf相反<em>的</em>UnlessDirective结构指令。 NgIf<em>在</em>条件为true时显示模板内容。

    16.1K20

    AngularDart4.0 指南- 模板语法二 顶

    以下示例,目标是按钮单击事件。...Angular你不需要这些指令。 通常,您可以使用功能更强大,表现力更强Angular绑定系统获得相同结果。 当你可以写一个简单绑定时为什么要创建一个指令来处理点击呢?...字符串“let hero of heroes”是指: 取英雄列表每个英雄,将其存储本地英雄循环变量,并使其可用于每次迭代模板HTML。...Angular把这条指令翻译成一个围绕宿主元素,然后重复使用这个模板为列表每个英雄创建一组新元素和绑定。 “结构指令”指南中了解微语法。...下一个示例捕获名为i变量索引,并使用像这样英雄名称来显示它。

    30K20

    Angular2 之 结构型指令几个概念

    隐藏元素利弊 当我们隐藏元素时,组件行为还在继续。 它仍然附加子啊它所属于DOM元素上,它仍然监听事件。angular会继续检查哪些能影响数据绑定变更。...组件原本要做哪些事情仍然进行!它还是占用着那么多资源。 另外一方面,重新显示这个组件会很快。 组件以前状态被保留着,并随时可以显示。...总结 基于上面的利弊分析,无论是我们使用内置指令还是使用自定指令时候,我们应该自己分析提添加、移除元素以及创建和销毁组件后果。...标签 结构型指令,比如ngIf,使用HTML 5template标签 完成它们“魔法”。 控制Template标签内DOM添加与显示,模板级别使用。...Angular应用之外,标签默认CSS属性display是none 。 它内容存在于一个隐藏文档片段

    3K20

    AngularDart4.0 英雄之旅-教程-06服务 顶

    如果您更改HeroService构造函数,则必须查找并更新您创建服务每个位置。 多个地方修补代码是容易出错,并增加了测试负担。 每次使用新建时都会创建一个服务。...要用Angular调用getHeroes(),可以实现Angular ngOnInit生命周期钩子。 Angular为组件生命周期中关键时刻提供接口:创建,每次更改之后,最终销毁。...当组件实现该方法时,Angular会在适当时候调用它。 “Lifecycle Hooks”页面详细了解生命周期挂钩。...将OnInit添加到由AppComponent实现接口列表,并使用里面的初始化逻辑编写一个ngOnInit()方法。 Angular会在正确时间调用它。...有关异步函数更多信息,请参阅Dart语言浏览声明异步函数。 处理Future 由于对HeroService更改,应用程序组件英雄属性现在是Future,而不是英雄列表。

    2.9K10

    Angular 英雄编辑器

    应用程序现在有了基本标题。 接下来你要创建一个新组件来显示英雄信息并且把这个组件放到应用程序外壳里去。 创建英雄组件 使用 Angular CLI 创建一个名为 heroes 新组件。...CSS 元素选择器 app-heroes 用来父组件模板匹配 HTML 元素名称,以识别出该组件。...AppModule Angular 需要知道如何把应用程序各个部分组合到一起,以及该应用需要哪些其它文件和库。 这些信息被称为元数据(metadata)。...你可以编辑英雄名字,并且会看到这个改动立刻体现在这个输入框上方  。 声明 HeroesComponent 每个组件都必须声明(且只能声明)一个 NgModule 。.../heroes/heroes.component'; HeroesComponent 也已经声明了 @NgModule.declarations 数组

    2.6K70

    Angular 英雄编辑器

    应用程序现在有了基本标题。 接下来你要创建一个新组件来显示英雄信息并且把这个组件放到应用程序外壳里去。 创建英雄组件 使用 Angular CLI 创建一个名为 heroes 新组件。...CSS 元素选择器 app-heroes 用来父组件模板匹配 HTML 元素名称,以识别出该组件。...AppModule Angular 需要知道如何把应用程序各个部分组合到一起,以及该应用需要哪些其它文件和库。 这些信息被称为元数据(metadata)。...你可以编辑英雄名字,并且会看到这个改动立刻体现在这个输入框上方  。 声明 HeroesComponent 每个组件都必须声明(且只能声明)一个 NgModule 。.../heroes/heroes.component'; HeroesComponent 也已经声明了 @NgModule.declarations 数组

    2.5K50

    AngularDart4.0 指南 原

    指南 了解Angular基础知识,如本地开发 安装, 显示数据和接受用户输入,构建简单表单, 将应用程序服务注入到组件,以及使用Angular模板语法。...教程 一步一步,沉浸式学习Angular方法,应用程序上下文中介绍Angular主要功能与特点。 高级 Angular特征和开发实践深入分析。 API 每个Angular详细细节。...示例代码 每个页面都包含页面随附示例应用程序代码段。 您可以应用程序重用这些片段。 参考页 词汇表定义Angular开发人员应该知道术语。...Cheat Sheet列出了常见场景Angular语法 API手册是Angular公共库权威向导。...如果您想更改项目的名称,请使用适合您应用程序名称进行项目范围搜索和替换pubspec名称条目(angular_app)的当前值 - 通常它将与 您之前选择目录名称。

    2.7K20

    AngularDart4.0 英雄之旅-教程-03英雄编辑器

    [(ngModel)]="hero.name" ^^^^^^^^^^^^^^^^^^^^^^^ 虽然NgModel是angular_forms库定义有效Angular指令,但默认情况下不可用。...模板中使用任何Angular指令之前,需要在组件@Component注解指令参数列出它们。...您可以编辑英雄名字,并看到立即在文本框上方反映更改。...你走过路 保留你已构建代码 “Tour of Heroes”应用程序使用双重大括号插值(一种单向数据绑定)来显示Hero对象应用程序标题和属性。...您使用Dart模板字符串编写了多行模板,以使模板可读。 您使用内置ngModel指令向元素添加了双向数据绑定。 此绑定显示Hero名称,并允许用户更改它。

    3.2K10
    领券