手把手带你了解Angular中的依赖注入

本篇文章带大家了解一下依赖注入，介绍一下依赖注入解决的问题和它原生的写法是什么，并聊聊Angular的依赖注入框架，希望对大家有所帮助！

前端（vue）入门到精通课程，老师在线辅导：联系老师
Apipost = Postman + Swagger + Mock + Jmeter 超好用的API调试工具：点击使用

最近在Angular项目中经常能碰到依赖注入这个关键词，但是始终不理解它是怎么实现的，在Angular的官网上也只有关于它的使用，详细点的原理并没有说明，所以就下来我们就从原生的写法来讲解一下，依赖注入是用来解决什么问题的，他用js应该怎么去表现。【相关教程推荐：《angular教程》】

依赖注入是什么

依赖注入简称DI，是面向对象编程中的一种设计原则，用来减少代码之间的耦合度。

我们先来看一段代码

class Video{     constructor(url){} }  class Note{     video: Video     constructor(){         this.video = new Video("https://aaaaa.mp4")     }          getScreenshot(){         this.video.getScreenshot()     } }  const note = new Note() note.getScreenshot()

假设我们用一个视频类，它其中有一个方法 getScreenshot 获取截图，在实例化视频类的时候，需要传入一个视频 url 这样的参数。现在有一个笔记类，它需要去调用视频类下的截图方法，那么我们就可以说，笔记类是依赖于视频类的。所以在笔记类的内部，我们就需要去实例化视频类，这样才能在笔记类中获取视频类的实例对象，并且调用它里面的截图方法。

上面代码的耦合度过高，并不推荐使用，比方说如果Video的视频地址换了一个，那么在Note中就需要去改变传入的视频url，这样假设要是有