AngularJS 的依赖注入

mindwind 发布于2019-08-21 11:34 / 2107人阅读

摘要：代码代码需要注意的地方这个方法只适合未经过压缩和混淆的代码因为需要原始未经压缩的参数列表来进行解析。代码代码注意的地方行内声明的方式允许我们直接传入一个参数数组而不是一个函数。

AngularJS 依赖注入的方法 1. 通过函数的参数进行推断式注入声明

如果没有明确的什么, AngularJS 会假定参数名称就是依赖的名称。因此, 它会在内部调用函数对象的 toString() 方法, 分析并提取出函数的参数列表, 然后通过 $injector 将这些参数注入进对象实例。

HTML代码:





    demo
    
    



    
        
            {{clock.time | date: "yyyy-MM-dd hh:mm:ss"}}

JS 代码:

angular.module("myApp", [])
    .controller("myController", myController)

function myController($scope, $timeout) {
    var updateTime = function() {
        $scope.clock = {
            time: new Date()
        }

        $timeout(function() {
            $scope.clock.time = new Date()
            updateTime()
        }, 1000)
    }
    updateTime()
}

需要注意的地方:

这个方法只适合未经过压缩和混淆的代码, 因为 AngularJS 需要原始未经压缩的参数列表来进行解析。

2. 显式的注入声明

AngularJS 提供了显式的方法来明确定义一个函数在被调用时需要用到的依赖关系。通过这种方法声明依赖, 即使在源代码被压缩, 参数名称发生改变的情况下依然可以正常工作。

HTML 代码:





    demo
    
    



    
        
            {{clock.time | date: "yyyy-MM-dd hh:mm:ss"}}

JS 代码:

angular.module("myApp", [])
    .controller("myController", myController)

function myController(s, t) {
    var updateTime = function() {
        s.clock = {
            time: new Date()
        }
        t(function() {
            s.clock.time = new Date()
            updateTime()
        }, 1000)
    }
    updateTime()
}

myController["$inject"] = ["$scope", "$timeout"]

3. 行内注入声明

AngularJS 提供的行内注入方法实际上是一种语法糖, 它与前面提到的通过 $inject 属性进行声明的原理是一样的, 但是允许我们在函数定义的时候从行内将参数传入, 这种方法方便，简单，而且避免了在定义的过程中使用临时变量。

HTML 代码:





    demo
    
    



    
        
            {{clock.time | date: "yyyy-MM-dd hh:mm:ss"}}

JS 代码:

angular.module("myApp", [])
    .controller("myController", ["$scope", "$timeout", function(s, t) {
        var updateTime = function() {
            s.clock = {
                time: new Date()
            }
            t(function() {
                s.clock.time = new Date()
                updateTime()
            }, 1000)
        }
        updateTime()
    }])

注意的地方:

行内声明的方式允许我们直接传入一个参数数组, 而不是一个函数。数组的元素是字符串, 它们代表的是可以被注入到对象中的依赖名字, 最后一个参数就是依赖注入的目标函数对象本身。

GPU云服务器云服务器依赖注入依赖注入方式 js依赖注入构造函数依赖注入

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/86857.html

[ AngularJS ] 自己实现一个简单的依赖注入

摘要：我们开始使用的时候，它的双向数据绑定是最让我们印象深刻的，那第二个就应该算是它的那神奇的依赖注入的功能了。来实现依赖注入现在大部分的框架都提供依赖注入机制的模块，可能会叫做。我们开始使用AngularJS的时候，它的双向数据绑定是最让我们印象深刻的，那第二个就应该算是它的那神奇的依赖注入的功能了。举个栗子 function myController = ($scope,...

seasonley 2019-08-21 10:36 评论0 收藏0
【译】《精通使用AngularJS开发Web App》（五）

摘要：上一篇译精通使用开发四下一篇译精通使用开发六书名合作对象正如所见，提供了一种将对象组织为模块的方式。模块不仅可以注册可以直接被框架所调用的对象控制器，过滤器等，还可以使用任何应用开发者所定义的对象。上一篇：【译】《精通使用AngularJS开发Web App》（四）下一篇：【译】《精通使用AngularJS开发Web App》（六）书名：Mastering Web Applic...

PiscesYE 2019-08-19 14:29 评论0 收藏0
AngularJs 入门（一）--前言

摘要：入门一前言目前来说相对于现在流行的高版本以及来说实属是老套的前端框架了，当然这都不重要，没有完美的框架，只有不断优化的代码。通过使用我们称为指令的结构，让浏览器能够识别新的语法。使用作为输入，而不是字符串，是区别于其它的框架的最大原因。 AngularJs 入门（一）前言 AngularJs目前来说相对于现在流行的高版本ng2、ng4,以及Vue2.0、React来说实属是老套的前...

wenyiweb 2019-08-22 13:50 评论0 收藏0