angularjs广播需要注入吗

Posted 2023-05-12

参考技术A AngularJS 源代码
一、关于依赖注入
依赖注入式AngularJS的重要特性之一，有关概念和定义参考维基百科。依赖注入简化了Angular解析模块/组件之间依赖的过程。通常一个组件要获得它的依赖，有三种方式：

直接创建出依赖，如使用new操作符
能够查找到依赖，如引用全局变量
在需要的地方传入依赖
第三种的优势在于组件省去了定义/定位依赖的过程，也使得依赖的耦合度降低，可扩展性更强。依赖注入主要有两种形式（看这里）：setter注入和constructor注入。前者的代表是Spring框架的setter方式，AngularJS则使用的是constructor注入。这里简单说一下二者的区别，setter注入顾名思义，首先使用一个无参的默认构造器构造对象，然后使用setter方法将依赖注入到新对象中。这种方式的一个缺陷是在编译时并不知道对象之间的依赖关系，依赖解析由某种框架在运行时完成。如果在配置依赖时有遗漏，则在运行时会报空引用错误。对于constructor注入，在构造对象时，将依赖的组件以参数形式传入构造器，传入组件所依赖的组件以相同的方式构造，依此类推，确保依赖链条最顶端的组件首先构造，一直到当前需要注入的对象构造完毕。该方式避免了依赖的遗漏。
二、AngularJS中的依赖注入
Angular的injector子系统负责创建组件，解析依赖，并将其按需提供给其他组件。每个Angular应用都有一个injector。Angular在应用的启动阶段（bootstrap，参见前面的文章）会创建一个injector：

AngularJS DI(依赖注入)实现推测

AngularJS DI(依赖注入)

http://www.cnblogs.com/whitewolf/archive/2012/09/11/2680659.html

  回到angularjs：在框架中为我们提供了angular.injector(modules)DI注入注射器。但是在我们使用注入的时候常常是不需要关心具体的如何注入。我们只需要按照其规则书写我们的angularjs代码就会很容易的得到angularjs的DI特性

1：推断式注入：在angularjs中我们可以在我们需要注入的地方按照名称注入，这里要求参数名称必须和注入服务实例名称相同，一种名称约定。angularjs会提取参数名称查找相应DI实例注入。

例如：

var myModule = angular.module(\'myModule\', []);

myModule.factory(\'$alert\', function($window) {

    return {
        alert: function(text) {
            $window.alert(text);
        }
    };
});

var myController = function($scope, $alert) {
    $scope.message = function(msg) {
        console.log(msg);
        $alert.alert(msg);
    };
};
myModule.controller("myController", myController);​

 

分析

控制器 myController 是一个函数， 其具有 $scope, $alert 两个参数， 

这两个参数 第一个是APP应用域， 第二个是依赖的服务， 其实现为 myModule.factory 定义的 $alert 服务。

myController 控制器，在html 声明时候，被初始化， 即使被调用。如下HTML

<div ng-app="myModule"  ng-controller="myController" ng-init="msg=\'test for alert\'" >
    <input ng-model="msg">
<button ng-click="message(msg);">click me</button>
   <br/> {{msg}}
</div>

 

未见任何调用 myController 地方，如何控制入参传入？ 且 $alert参数能对应到 myModule.factory 定义的 $alert 服务？？

猜测是框架实现的调用流程，并将 服务注入到 myController 控制器， 当控制器被初始化时。

 

具体牵扯到JS函数定义具有自省性质， 使用toString方法，并将参数名解析出来， 然后到 服务列表中找到 参数名对应的服务， 然后调用 myController 方法。

JS的自省测试如下：

 

function test($scope, $alert) {console.log("aaa")}

 

test.toString().match(/\\([^\\(\\)]*\\)/)
["($scope, $alert)", index: 13, input: "function test($scope, $alert) {console.log("aaa")}", groups: undefined]0: "($scope, $alert)"groups: undefinedindex: 13input: "function test($scope, $alert) {console.log("aaa")}"length: 1__proto__: Array(0)

test.toString().match(/\\([^\\(\\)]*\\)/)[0]
"($scope, $alert)"

 

参考：

https://segmentfault.com/q/1010000002581288