Angular自学笔记（?）依赖注入

最新推荐文章于 2025-02-18 06:00:00 发布
最新推荐文章于 2025-02-18 06:00:00 发布
阅读量193 收藏
点赞数
CC 4.0 BY-SA版权
分类专栏： Angular自学笔记
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/yusirxiaer/article/details/113839065
这篇博客详细介绍了Angular的依赖注入机制，包括依赖注入的概念、参数修饰符、服务的创建与使用、提供服务的不同方式如类提供者、别名提供者、值提供者、工厂提供者，以及InjectionToken、服务查找规则、解析修饰符、单例与多例的差异和@Host()的作用。内容深入浅出，适合Angular开发者学习理解。

什么是依赖注入

依赖注入（DI）是一种设计模式, 也有相应的框架，比如InversifyJS


Angular 有自己的 DI 框架, DI 框架会在实例化该类时向其提供这个类所声明的依赖项

带修饰符的参数

在ts中，一个类的参数如果带上修饰符，那个参数就变成了类的实例属性

class Mobile {
   
   
  constructor(readonly name: string = '小米') {
了解本专栏 订阅专栏 解锁全文
Angular自学笔记（?）DI提供者
YUSIR 完美CODING世界
02-17 252
类提供者 类提供者的创建和使用 假设有logger类： import { Injectable } from '@angular/core'; @Injectable() export class LoggerService { logs: string[] = []; constructor() { } log(message: string) { this.logs.push(message); console.log(message); } } 类提供者，使用us
Angular CLI ng 指令指南
YUSIR 完美CODING世界
01-25 2166
Angular CLI 使用教程指南参考 Angular CLI 现在虽然可以正常使用但仍然处于测试阶段. Angular CLI 依赖 Node 4 和 NPM 3 或更高版本. 安装 要安装Angular CLI你需要先安装node和npm，然后运行以下命令来安装最新的Angular CLI： 注意：Angular CLI 需要Node 4.X 和 NPM 3.X 以上
[VueJS + Typescript] Decouple Dependencies Using IoC Containers in Vue with TypeScript and Inversify...
weixin_33856370的博客
08-28 354
Using Object Oriented Programming, OOP, style allows us to apply Inversion of Control, IoC, and more patterns. An IoC container helps decoupling dependencies by using a class constructor or properties...
angular自学笔记
MonsterK666的博客
08-31 1258
Angular 一、初步上手 1.1、介绍 Angualr是谷歌开发的一款开源的web前端框架，诞生于2009年，由Misko Hevery 等人创建，后为Google所收购。是一款优秀的前端JS框架，已经被用于Google 的多款产品当中。 根据项目数统计angular (1.x 、2.x 、 4.x、5.x、6.x、7.x 、8.x、9.x）是现在网上使用量最大的框架。 Angular基于TypeScript，和react、vue相比 Angular更适合中大型企业级项目。 目前2019年12月25日a
angular 自学笔记
zezeadede555的博客
05-30 243
angular 自学笔记 1、安装node.js node –version查看版本 2、查看node已安装列表 npm list –depth=0 –global找到npm安装的位置加入环境变量 3、安装angular Cli npm install –g @angular/cli cnpm i –g angular-cli 安装成功后可进行查看 n...
【自学笔记】Web前端的重点知识点-持续更新
2301_78806917的博客
02-01 1243
提示：这里对文章进行总结：例如：以上就是今天要讲的内容，自学记录Web前端知识点的重点知识点。
工作学习angular5笔记
M612a34的博客
03-12 3175
大三上学期，在学校实验室自学的angular1，如今马上毕业了，公司里已经用上了angular5。学起来！！！组件、服务、路由、指令     1、环境搭建和快速建立项目当然，angular5是建立在node6.9版本和npm3.3版本以这两个上的。先全局安装这两个软件吧。1.1、设置开发环境全局安装angular5脚手架。Angular CLI ：npm install -g @angular/c...
angular2自学笔记---官网项目（一）
weixin_30621919的博客
01-08 109
1.单向数据绑定的‘插值表达式’ angular中最典型的数据显示方式：把HTML模板（template）的控件绑定到angular组件的属性（component相当于一个构造函数，下面例子中的这个构造函数有name、title、和hero三个属性）简单来说就是把组件的属性名放到显示曾{{属性名}}中，angular负责喷到页面中；angular从组件中提取属性插入浏览器，然后angu...
【自学笔记】前端开发框架基础知识点总览-持续更新
最新发布
2301_78806917的博客
02-18 530
前端开发框架是为了提高开发效率、代码可维护性和团队协作而设计的一系列工具、库和约定。它们通常提供了结构化的开发方式、组件化的UI构建以及数据绑定等特性。提示：这里对文章进行总结：例如：以上就是今天要讲的内容，自学记录前端开发框架基础知识点总览。
Angular—路由学习
2401_84048225的博客
04-23 954
Angular 是一个开发平台。它能帮你更轻松的构建 Web 应用。Angular 集声明式模板、依赖注入、端到端工具和一些最佳实践于一身，为你解决开发方面的各种挑战。Angular 为开发者提升构建 Web、手机或桌面应用的能力。什么是路由？在Angular中，路由的作用是建立URL路径和组件之间的对应关系，根据不同的URL路径匹配出相应的组件并渲染。
前端自学的一些笔记
07-11
Angular的依赖注入、路由等。 六、Ajax与Fetch API 这两个技术用于异步加载数据，改进用户体验。Ajax（异步JavaScript和XML）是经典方法，而Fetch API是现代的替代方案，两者都让前端可以与服务器进行数据交换，...
Angular训练学习笔记：我初次提交的实践经验
这样的训练可能包括学习Angular的核心概念，如组件、服务、依赖注入、模板、数据绑定、指令、路由和表单等。除此之外，Angular的生态系统还包括了其他工具和服务，例如Angular CLI（命令行接口）用于项目的创建、...
useEffect中使用异步函数
YUSIR 完美CODING世界
06-18 1592
useEffect是不能直接用 async await 语法糖的
Angular自学笔记（?）TemplateRef和ViewContainerRef
YUSIR 完美CODING世界
02-16 607
ElementRef 由于ng是跨平台的为了减少视图层和渲染层的耦合也为了让ng更适应多平台，ng帮我们封装了ElementRef，我们可以通过ElementRef拿到native元素(在浏览器中也就是我们常说的DOM元素) 下面我们看一段代码 import { Component, ElementRef, AfterViewInit } from '@angular/core'; @Component ({ selector:'my-app', t
Angular rxjs operators 笔记
YUSIR 完美CODING世界
02-16 520
toArray /* toArray把结果都塞到数组里去 */ const source = interval(1000); const example = source.pipe( take(10), toArray() ); example.subscribe(val => console.log(val)); // output: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9] toArray /* pairwise把相邻的两个流组成数组 */
Angular自学笔记（一）ngModule 元数据
YUSIR 完美CODING世界
02-16 379
工作硬上开发angular项目，好难啊，上网搜资料教程真的贼少，吐槽真的没什么人用angular，自己学习到处搜集整理的笔记，分享出来，方便查看理解总结。应该适用于angular11系列（更新真快，反正我也不知道之前低版本不同 手动狗头） 什么是angular module(ngModule)? angular module就是一个普通的类，但是这个类，一旦被@NgModule所装饰，那这个类就可以被称为angular module @NgModule元数据 @NgModule 获取一个元数据对象，它会告
Angular自学笔记（?）ContentChild和ContentChildren
YUSIR 完美CODING世界
02-16 372
ContentChild 用法类似ViewChild, 获取投影中到组件或指令还有元素dom等 获取投影中但组件 import {AfterViewInit, Component, ElementRef, OnInit, ViewChild} from '@angular/core'; @Component({ selector: 'app-content-child-panel', templateUrl: './content-child-panel.component.html' }) ex
Angular 内容投影 II
YUSIR 完美CODING世界
12-06 319
内容投影是一种模式，你可以在其中插入或投影要在另一个组件中使用的内容。 简单来说，angular的内容投影就相当于vue的内容插槽slot。所有一下就能懂了。 1、单插槽内容投影 单插槽内容投影是指创建一个组件，你可以在其中投影一个组件。如果只有一个ng-content，不需要select属性。 2、多插槽内容投影 一个组件可以具有多个插槽。每个插槽可以指定一个 CSS 选择器，该选择器会决定将哪些内容放入该插槽。将select属性添加到<ng-content>元素。 Ang...
Angular rxjs Subject笔记
YUSIR 完美CODING世界
02-16 278
BehaviorSubject /* ehaviorSubject接受一个默认参数，相当于new Subject后自动next('aa') 之后到行为和Subject一致 */ const behave = new BehaviorSubject('aa'); behave.subscribe(res => { console.log(res); // aa bb }); behave.next('bb'); // 获取最新到值 behave.getValue(); // 'bb' be
Angular6懒加载与依赖注入实践示例
### Angular6依赖注入Demo知识点详解 #### Angular6依赖注入（Dependency Injection）概念 依赖注入（DI）是Angular框架的核心特性之一，它是一种设计模式，用于实现控制反转（IoC），它允许程序的组件通过构造...
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

yusirxiaer

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值