Angular08 依赖注入
1 angular应用中依赖注入的工作原理
技巧01:在模块级别进行注册时所有在应用级别的组件都可以使用,因为主模块会导入其他模块,所以在模块中注入就相当于在主模块进行注入操作;懒加载的模块除外
技巧02:在模块的根组件注入时只有在该模块的根组件及其子组件才可以使用
技巧03:如果有两个模块都进行了相同的注册,那么只有一个会生效,因为这两个模块都会在根模块中进行导入操作,所以只有一个注册会生效,另外一个会被覆盖;懒加载的模块除外
技巧04:注册的都是单例的
技巧05:通过工厂方法进行注册时,可以根据条件创建不同的实例
形象比喻:注入器(provider)相当于茄子、豆角、土豆,注入器(injector)相当于厨师,依赖注入对象(object)相当于地三鲜;provider提供了创建实例的原材料,injector会根据provider提供的原材料创建实例,在目标组件的构造器中注入依赖注入对象
angular会到组件的控制类中的构造器中去查看需要进行依赖注入的对象类型,然后根据这个类型到提供器中去寻找和这个类型同名的token,然后根据token后面的注册方式来创建需要的实例,最后再把这个实例赋值给构造器中对应类型的形参

2 注入器
就是组件控制类中的构造函数
3 提供器
3.1 模块配置文件中的 providers 属性

3.2 组件@Component中的 providers 属性
3.3 注意:这两种方法的用法一致,只是作用域有区别;在模块中声明是整个模块所有组件可用,在组件中声明是该组件及其子组件可用
4 依赖注入服务
4.1 创建服务
ng g service 服务名称

注意:利用angular-cli创建的服务时没有添加到提供器中的,如果要使用新创建的服务器就必须先将其在提供器中进行声明

4.2 在组件中依赖注入服务
利用组件控制类的构造器作为注入器来实现依赖注入

4.3 启动服务后报错
报错原因:我们创建的服务还没有在提供器进行声明,所以angular应用找不到相关的服务

解决办法
在模块的提供器或者组件的提供器中对需要用到的服务进行声明
import {BrowserModule} from '@angular/platform-browser';
import {NgModule} from '@angular/core';
import {AppComponent} from './app.component';
import {FormsModule} from '@angular/forms';
import {HttpModule} from '@angular/http';
import { Stock01Component } from './stock/stock01/stock01.component';
import {StockService} from './shared/stock.service';
@NgModule({
declarations: [ // 声明在该模块中有哪些东西(组件、指令、管道)
AppComponent, Stock01Component
],
imports: [ // 声明该模块需要正常运转时需要用到哪些模块(即:该模块依赖哪些其它模块)
BrowserModule,
FormsModule,
HttpModule
],
providers: [
StockService
], // 声明模块中的服务
bootstrap: [AppComponent] // 声明该模块的主组件
})
export class AppModule {
}
4.4 再次启动服务后angular应用运行成功
5 一个服务实现另外一个服务
B服务实现A服务时,B服务必须实现A服务中的多有方法

Angular08 依赖注入的更多相关文章
- webapi - 使用依赖注入
本篇将要和大家分享的是webapi中如何使用依赖注入,依赖注入这个东西在接口中常用,实际工作中也用的比较频繁,因此这里分享两种在api中依赖注入的方式Ninject和Unity:由于快过年这段时间打算 ...
- ASP.NET Core 中文文档 第四章 MVC(3.8)视图中的依赖注入
原文:Dependency injection into views 作者:Steve Smith 翻译:姚阿勇(Dr.Yao) 校对:孟帅洋(书缘) ASP.NET Core 支持在视图中使用 依赖 ...
- 在WPF中使用依赖注入的方式创建视图
在WPF中使用依赖注入的方式创建视图 0x00 问题的产生 互联网时代桌面开发真是越来越少了,很多应用都转到了浏览器端和移动智能终端,相应的软件开发上的新技术应用到桌面开发的文章也很少.我之前主要做W ...
- MVVM模式解析和在WPF中的实现(六) 用依赖注入的方式配置ViewModel并注册消息
MVVM模式解析和在WPF中的实现(六) 用依赖注入的方式配置ViewModel并注册消息 系列目录: MVVM模式解析和在WPF中的实现(一)MVVM模式简介 MVVM模式解析和在WPF中的实现(二 ...
- .Net Core MVC 网站开发(Ninesky) 2.3、项目架构调整-控制反转和依赖注入的使用
再次调整项目架构是因为和群友dezhou的一次聊天,我原来的想法是项目尽量做简单点别搞太复杂了,仅使用了DbContext的注入,其他的也没有写接口耦合度很高.和dezhou聊过之后我仔细考虑了一下, ...
- ASP.NET Core中如影随形的”依赖注入”[下]: 历数依赖注入的N种玩法
在对ASP.NET Core管道中关于依赖注入的两个核心对象(ServiceCollection和ServiceProvider)有了足够的认识之后,我们将关注的目光转移到编程层面.在ASP.NET ...
- ASP.NET Core中如影随形的”依赖注入”[上]: 从两个不同的ServiceProvider说起
我们一致在说 ASP.NET Core广泛地使用到了依赖注入,通过前面两个系列的介绍,相信读者朋友已经体会到了这一点.由于前面两章已经涵盖了依赖注入在管道构建过程中以及管道在处理请求过程的应用,但是内 ...
- 模拟AngularJS之依赖注入
一.概述 AngularJS有一经典之处就是依赖注入,对于什么是依赖注入,熟悉spring的同学应该都非常了解了,但,对于前端而言,还是比较新颖的. 依赖注入,简而言之,就是解除硬编码,达到解偶的目的 ...
- angular2系列教程(八)In-memory web api、HTTP服务、依赖注入、Observable
大家好,今天我们要讲是angular2的http功能模块,这个功能模块的代码不在angular2里面,需要我们另外引入: index.html <script src="lib/htt ...
随机推荐
- Python stdout
(1)stdout 与 print 当我们在 Python 中打印对象调用 print obj 时候,事实上是调用了 sys.stdout.write(obj+'\n') print 将你需要的内容打 ...
- 每天一个Linux命令(13)less命令
less命令的作用与more十分相似,都可以用来浏览文字档案的内容,不同的是less命令允许用户向前或向后浏览文件,而more命令只能向前浏览. 用less命令显示文件时,用PageUp键向上翻页,用 ...
- ssh允许root用户登陆
新的系统无root用户密码,设置root用户密码,修改也是这么修改 sudo passwd root 连续输入两次新密码. 允许root用户登陆: /etc/ssh/sshd_config 找到 Pe ...
- 数据库 简单查询 Sql Server 学生表 课程表 选课表
创建教材中的三张表格,并输入相应的数据 Create table student( Sno char(9), Same char(20), Ssex char(2), Sage smallint, S ...
- Data Structure Graph: strong connectivity
如果为undirected graph就是dfs或者bfs,如果都能visit则为连通O(V+E). 如果为directed graph就先dfs或者bfs,再reverse direct,再dfs或 ...
- [原创]java WEB学习笔记28: 会话与状态管理Cookie 机制
本博客为原创:综合 尚硅谷(http://www.atguigu.com)的系统教程(深表感谢)和 网络上的现有资源(博客,文档,图书等),资源的出处我会标明 本博客的目的:①总结自己的学习过程,相当 ...
- TMS scripter使用心得
TMS scripter提供了在delphi应用程序中使用pascal 脚本的能力.TMS scripter同时提供了一个工具SSImport.exe,用来把打算在应用程序中使用的类自动生成wrape ...
- 算法(Algorithms)第4版 练习 1.5.1
id数组的变化情况: 0 1 2 3 4 5 6 7 8 9 10 components 9 0 0 1 2 3 4 5 6 7 8 0 9 components 3 4 0 1 2 4 5 6 7 ...
- node向html模板发送数据
node向html模板发送数据 给模板传递数据 router.get('/', function(req, res, next) { res.render('index', { title: '张三' ...
- 与STL文件相关的各类学习地址
几个网址: 1.STL :https://en.wikipedia.org/wiki/STL_(file_format)#ASCII_STL 2.一个博客的文章地址: 三维图形数据格式 STL的 读取 ...