AngularJS 的依靠注入

2024年3月29日 98次阅读 来源: 无名小子

AngularJS 依靠注入的要领

1. 经由过程函数的参数举行揣摸式注入声明

假如没有明白的什么, AngularJS 会假定参数称号就是依靠的称号。因而, 它会在内部挪用函数对象的 toString() 要领, 剖析并提掏出函数的参数列表, 然后经由过程 $injector 将这些参数注入进对象实例。

HTML代码:

<!DOCTYPE html>
<html lang="en">

<head>
    <title>demo</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
</head>

<body>
    <div ng-app="myApp">
        <div ng-controller="myController">
            <p mg-cloak>{{clock.time | date: "yyyy-MM-dd hh:mm:ss"}}</p>
        </div>
    </div>
    <script src="js/angular.js"></script>
    <script src="js/inject.js">
    </script>
</body>

</html>

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 代码:

<!DOCTYPE html>
<html lang="en">

<head>
    <title>demo</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
</head>

<body>
    <div ng-app="myApp">
        <div ng-controller="myController">
            <p mg-cloak>{{clock.time | date: "yyyy-MM-dd hh:mm:ss"}}</p>
        </div>
    </div>
    <script src="js/angular.js"></script>
    <script src="js/inject.js">
    </script>
</body>

</html>

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 代码:

<!DOCTYPE html>
<html lang="en">

<head>
    <title>demo</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
</head>

<body>
    <div ng-app="myApp">
        <div ng-controller="myController">
            <p mg-cloak>{{clock.time | date: "yyyy-MM-dd hh:mm:ss"}}</p>
        </div>
    </div>
    <script src="js/angular.js"></script>
    <script src="js/inject.js">
    </script>
</body>

</html>

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()
    }])

注重的处所:

  • 行内声明的体式格局许可我们直接传入一个参数数组, 而不是一个函数。数组的元素是字符串, 它们代表的是能够被注入到对象中的依靠名字, 末了一个参数就是依靠注入的目的函数对象自身。

    原文作者：无名小子
    原文地址: https://segmentfault.com/a/1190000008630928
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞