这里有新鲜出炉的 AngularJS 开发指南,程序狗速度看过来!
AngularJS 诞生于 Google 是一款优秀的前端 JS 框架,已经被用于 Google 的多款产品当中。AngularJS 有着诸多特性,最为核心的是:MVC、模块化、自动化双向数据绑定、语义化标签、依赖注入,等等。
这篇文章主要介绍了 AngularJS $injector 依赖注入的相关资料, 需要的朋友可以参考下
推断式注入
这种注入方式,需要在保证参数名称与服务名称相同。如果代码要经过压缩等操作,就会导致注入失败。
- app.controller("myCtrl1", function($scope,hello1,hello2){
- $scope.hello = function(){
- hello1.hello();
- hello2.hello();
- }
- });
标记式注入
这种注入方式,需要设置一个依赖数组,数组内是依赖的服务名字,在函数参数中,可以随意设置参数名称,但是必须保证顺序的一致性。
- var myCtrl2 = function($scope,hello1,hello2){
- $scope.hello = function(){
- hello1.hello();
- hello2.hello();
- }
- }
- myCtrl2.$injector = ['hello1','hello2'];
- app.controller("myCtrl2", myCtrl2);
内联式注入
这种注入方式直接传入两个参数,一个是名字,另一个是一个数组。这个数组的最后一个参数是真正的方法体,其他的都是依赖的目标,但是要保证与方法体的参数顺序一致(与标记注入一样)。
- app.controller("myCtrl3",['$scope','hello1','hello2',function($scope,hello1,hello2){
- $scope.hello = function(){
- hello1.hello();
- hello2.hello();
- }
- }]);
$injector 常用的方法
在 angular 中,可以通过 angular.injector() 获得注入器。
var $injector = angular.injector();
通过 $injector.get('serviceName') 获得依赖的服务名字
$injector.get('$scope')
通过 $injector.annotate('xxx') 获得 xxx 的所有依赖项
$injector.annotate(xxx)
样例代码
- <html>
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
- <script src="http://apps.bdimg.com/libs/angular.js/1.2.16/angular.min.js">
- </script>
- </head>
- <body ng-app="myApp">
- <div ng-controller="myCtrl1">
- <input type="button" ng-click="hello()" value="ctrl1">
- </input>
- </div>
- <div ng-controller="myCtrl2">
- <input type="button" ng-click="hello()" value="ctrl2">
- </input>
- </div>
- <div ng-controller="myCtrl3">
- <input type="button" ng-click="hello()" value="ctrl3">
- </input>
- </div>
- <script type="text/javascript">
- var app = angular.module("myApp", []);
- app.factory("hello1",
- function() {
- return {
- hello: function() {
- console.log("hello1 service");
- }
- }
- });
- app.factory("hello2",
- function() {
- return {
- hello: function() {
- console.log("hello2 service");
- }
- }
- });
- var $injector = angular.injector();
- console.log(angular.equals($injector.get('$injector'), $injector)); //true
- console.log(angular.equals($injector.invoke(function($injector) {
- return $injector;
- }), $injector)); //true
- //inferred
- // $injector.invoke(function(serviceA){});
- app.controller("myCtrl1",
- function($scope, hello1, hello2) {
- $scope.hello = function() {
- hello1.hello();
- hello2.hello();
- }
- });
- //annotated
- // function explicit(serviceA) {};
- // explicit.$inject = ['serviceA'];
- // $injector.invoke(explicit);
- var myCtrl2 = function($scope, hello1, hello2) {
- $scope.hello = function() {
- hello1.hello();
- hello2.hello();
- }
- }
- myCtrl2.$injector = ['hello1', 'hello2'];
- app.controller("myCtrl2", myCtrl2);
- //inline
- app.controller("myCtrl3", ['$scope', 'hello1', 'hello2',
- function($scope, hello1, hello2) {
- // app.controller("myCtrl3",['$scope','hello1','hello2',function(a,b,c){
- // a.hello = function(){
- // b.hello();
- // c.hello();
- // }
- $scope.hello = function() {
- hello1.hello();
- hello2.hello();
- }
- }]);
- console.log($injector.annotate(myCtrl2)); //["$scope","hello1","hello2"]
- </script>
- </body>
- </html>
来源: http://www.phperz.com/article/17/0506/331870.html