Angular中的依赖注入(DI)

依赖注入(Dependancy Injection)听起来是一个望而生怯的词,所有大的词都有一个简单易懂的切入点,那先来用一个例子解释下DI。

有一下JS代码

Angular中的依赖注入(DI)_第1张图片

在logCar这个函数中,car是声明后再进行使用的,这样无法对logCar函数进行重用,不是好的设计。因此,依赖注入的概念就在以下优化代码中体现了。


Angular中的依赖注入(DI)_第2张图片

再来对比下以上的代码,DI可以解释传入对象的Reference。

第二点要讨论的,既然知道了DI是什么,那它在Angular中到底起了什么样的核心作用呢?在解答前先来看app.ts中的一段代码。


Angular中的依赖注入(DI)_第3张图片

在浏览器的控制台会看到$scope函数是有值的,也就是说$scope这个函数是由Angular创建好并传入function中,换句话说Angular检测到function需要一个$scope的参数,于是Framework就将$scope准备好并将其reference注入到function中。

一般在实际开发中,为了减少JavaScript的文件大小缩短下载时间,会对script文件进行精简,于是function($scope)会被替换为function($a),这样会导致DI出现问题,因此才会有将$scope放到array里,避免被替换成其他简单的变量表达,最终写法如下。


Angular中的依赖注入(DI)_第4张图片

你可能感兴趣的:(Angular中的依赖注入(DI))