阅读须知
本系列教程的开发环境及开发语言:
基础知识
Provider 的作用
在 Angular 中我们通过 Provider
来描述与 Token
相关联的依赖对象的创建方式。在 Angular 中依赖对象的创建方式分为以下四种:
- useClass
- useValue
- useExisting
- useFactory
(图一:注入器、Provider与依赖对象关系)
Provider 的分类
在 Angular 中 Provider
主要分为:
- TypeProvider
- ClassProvider
- ValueProvider
- ExistingProvider
- FactoryProvider
ClassProvider
ClassProvider 接口定义
------ --------- ------------- - -- ------------------------------------------------ -- ------------------ -------- ---- --------- ---------- -- -------------- ------------------------------------- -- ---- ------- -------- -
看完上面的接口定义,相信一些读者会觉得陌生。在本系列教程第二小节中,我们用到了 TypeProvider
。不信你往下看:
----------- --- ---------- -------------- -- --- ---------- -------------- -- ------ ----- --------- - - -- -------------- ------ --------- ------------ ------- --------- --
那跟 ClassProvider
有什么关系?先不急,请你继续往下看:
----------- --- ---------- -- -------- ------------ --------- ----------- -- --- --- ---------- -------------- -- ------ ----- --------- - -
是不是终于看到了 useClass
。其实上面两种方式是等价的,方式一更加简洁,方式二是采用标准的语法哈。那么问题来了,什么时候要使用 useClass
语法?回答这个问题前,我们先看个需求。
假设由于业务需要,先前我们定义的 HeroService
的数据,需要从服务器获取,而不是使用静态数据。项目采用前后端分离的开发方式进行开发,此外在项目开发前已经协商好数据格式,也给出了对应的模拟数据(测试数据)。
那么除了修改原有的 HeroService
服务外,有没有其它方式可以方便地验证一下模拟数据,同时保持较小的改动量哈。其实我们可以创建一个新的数据服务,如 MockHeroService
,具体实现如下:
创建 MockHeroService 服务
------ ----- --------------- - ------ ------- ------ ---------- -------- --------- ----- - - - --- --- ----- ----------- -- - --- --- ----- -------- -- - --- --- ----- --- --- -- - --- --- ----- ------- -- - --- --- ----- --------- - -- ---------- - ------ ----------- - -
</{>
使用 MockHeroService 服务
----------- --- ---------- -- -------- ------------ --------- --------------- --- ---------- -------------- -- ------ ----- --------- - -
更新完相关的代码,正常情况下,在 http://localhost:4200/
页面,你将看到以下的内容:
--- -- - ----- --------- --- -- - ----- ------ --- -- - ----- -- -- --- -- - ----- ----- --- -- - ----- -------
其实服务命名为 MockHeroService
的目的,也是为了说明依赖注入的好处,即易于进行本地单元测试。此外假设没有利用 Angular 依赖注入的特性,我们需要修改应用中每个应用到 HeroService
的地方。
我有话说
ClassProvider 接口中的 Type 类型是什么?
------ --------- ------- ------- -------- - --- --------- ------- -- - ------ -------- --------- ----- - -- --------- - ------ --- - --- ----------- -