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

来源：互联网发布：单簧管笛头知乎编辑：程序博客网时间：2024/06/10 10:42

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

可以注入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>

阅读全文

0 0