angularjs速成学习个人理解_4依赖注入

浅浅的花香味﹌ 2022-06-07 00:16 182阅读 0赞

首先说一下什么是依赖注入，依赖注入的理解就是 依赖关系+注入函数。简单的理解就是通过参数方式注入到函数的的参数。

可以注入value、service、function、provide、const等。

`我们可以定义一个不存在的模块对象，然后再模块上定义value，通过定义controller时通过传入一个数组进行依赖注入。`

`数组中最后一项为一个匿名函数。`

// 定义一个不存在的模块对象
        var myMod = angular.module("myMod", []);
        // 定义value
        myMod.value("modMsg", "Hello from Module");
        // 第二个参数是个数组 。定义function参数，及function匿名函数注入到ModController
        myMod.controller("ModController", ["$scope", "modMsg", function($scope, msg) {
            $scope.message = msg;
        }]);

同样的可以定义service，再通过数组的方式注入的控制器中的匿名函数。

// 通过依赖注入到function的参数中
        // "$scope"即function用到的第一个参数
        //  "appMsg" 定义的value为第二个参数
        // "definedservice" 为definedservice对应函数的实例
        myApp.controller("AppController", ["$scope", "appMsg","definedservice", function($scope, msg, definedservice) {
            $scope.message = msg;
            $scope.ename = definedservice.ename;
        }]);
    
        // 定义service
        myApp.service("definedservice", function(){
            this.ename = "Tom";
        });

完整代码如下：

<!DOCTYPE html>
    
    <html ng-app="myApp">
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
        <title>Dependency Injector - AngularJS Test</title>
    </head>
    <body>
    <div ng-controller="AppController">
        <h3>控制器中的信息数据: </h3>
        {
       {message}}
        <h4>获取服务中的数据</h4>
        {
       {ename}}
    </div>
    
    <div ng-controller="ModController">
        <h3>另一个模块中的信息数据: </h3>
        {
       {message}}
    
    </div>
    
    <script type="text/javascript" src="static/js/angular-1.5.8.js"></script>
    <script type="text/javascript">
    
        // 定义一个不存在的模块对象
        var myMod = angular.module("myMod", []);
        // 定义value
        myMod.value("modMsg", "Hello from Module");
        // 第二个参数是个数组 。定义function参数，及function匿名函数注入到ModController
        myMod.controller("ModController", ["$scope", "modMsg", function($scope, msg) {
            $scope.message = msg;
        }]);
    
        // 获取模块myApp模块对象，并载入myMod模块，从而达到可以访问myMod中的控制器
        var myApp = angular.module("myApp", ["myMod"]);
        // 定义value值
        myApp.value("appMsg", "Hello from Application");
        // 通过依赖注入到function的参数中
        // "$scope"即function用到的第一个参数
        //  "appMsg" 定义的value为第二个参数
        // "definedservice" 为definedservice对应函数的实例
        myApp.controller("AppController", ["$scope", "appMsg","definedservice", function($scope, msg, definedservice) {
            $scope.message = msg;
            $scope.ename = definedservice.ename;
        }]);
    
        // 定义service
        myApp.service("definedservice", function(){
            this.ename = "Tom";
        });
    </script>
    </body>
    </html>