Angular记录(7)

文档资料

  • 箭头函数--MDN:https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Functions/Arrow_functions
  • 箭头函数--ES6文档:http://es6.ruanyifeng.com/#docs/function#箭头函数

  • Promise 对象--JS教程:https://wangdoc.com/javascript/async/promise.html
  • Promise--ES6文档:http://es6.ruanyifeng.com/#docs/promise
  • Promise--MDN:https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Promise
  • Promise.prototype.then()--MDN:https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Promise/then

  • 教程:英雄指南:https://www.angular.cn/tutorial#tutorial-tour-of-heroes
  • 工作区与项目文件的结构:https://www.angular.cn/guide/file-structure
  • 组件简介:https://www.angular.cn/guide/architecture-components
  • CLI 命令参考手册:https://www.angular.cn/cli

服务

服务:https://www.angular.cn/tutorial/toh-pt4#services

英雄指南的 HeroesComponent 目前获取和显示的都是模拟数据。

本节课的重构完成之后,HeroesComponent 变得更精简,并且聚焦于为它的视图提供支持。这也让它更容易使用模拟服务进行单元测试。

为什么需要服务

Angular记录(7)

创建 HeroService

Angular记录(7)

@Injectable() 服务

Angular记录(7)

获取英雄数据

Angular记录(7)

Angular记录(7)

提供(provide) HeroService

Angular记录(7)

修改 HeroesComponent

Angular记录(7)

注入 HeroService

Angular记录(7)

添加 getHeroes()

Angular记录(7)

Angular记录(7)

在 ngOnInit 中调用它

Angular记录(7)

Angular记录(7)

Angular记录(7)

可观察(Observable)的数据

Angular记录(7)

可观察对象版本的 HeroService

Angular记录(7)

在 HeroesComponent 中订阅

Angular记录(7)

显示消息

Angular记录(7)

创建 MessagesComponent

Angular记录(7)

创建 MessageService

Angular记录(7)

把它注入到 HeroService 中

Angular记录(7)

从 HeroService 中发送一条消息

Angular记录(7)

Angular记录(7)

从 HeroService 中显示消息

Angular记录(7)

绑定到 MessageService

Angular记录(7)

Angular记录(7)

查看最终代码

Angular记录(7)

Angular记录(7)

Angular记录(7)

上一篇:Angular记录(9)


下一篇:Angular记录(11)