首页 > 代码库 > ng 依赖注入

ng 依赖注入

将依赖的对象注入到当前对象,直接去使用依赖的对象即可。

降低耦合度、提高开发速度。。

 

文件压缩:
yui-compressor
有两种方案:
①CLI(command line interface)
java -jar **.jar **.js > **.min.js
②webStorm
file->settings->tools-->fileWatchers->点击+ -》选中yui compressor js-->设置program(点击按钮在弹窗中选中C盘根目录下的js文件)

文件压缩的作用:
①删除了注释 ②没用空白字符清除
③简化了变量的名称(混淆)

文件压缩出现了问题:
$scope变成了a。。,ng框架是无法找到被修改名字后的服务,程序就出现了问题。


依赖注入:
①推断式(猜测)
app.controller(‘‘,function($scope){})
注入器,是直接根据服务的名称,在服务的注册列表中去查找该名称所对应的服务,找到并实例化提供给我们使用
特点:注入服务的顺序是无所谓的,在压缩混淆时,会出现无法查找服务的16:34 2017/6/7问题

 

html代码,直接运行会出错,即出现无法查找服务的问题:

<!DOCTYPE html>
<html ng-app="myApp">
<head lang="en">
  <meta charset="UTF-8">
  <script src="js/angular.js"></script>
  <script src="js/demo09.min.js"></script>
  <title></title>
</head>
<body>

<div ng-controller="myCtrl">
  <span>{{count}}</span>
</div>

</body>
</html>

js/demo09.min.js 代码:这里进行了混淆压缩,替换了原有的$scope

var app=angular.module("myApp",["ng"]);app.controller("myCtrl",function(a){a.count=100});

 

未压缩以前:

var app = angular.module(‘myApp‘, [‘ng‘]);
app.controller(‘myCtrl‘, function ($scope) {
  $scope.count = 100;
})

 

 

 



 

 

②标记式
可以解决文件压缩后找不到服务的问题
解决方案:给处理函数指定了$inject属性:由依赖的服务名称构成数组
ctrFunc.$inject = [‘$scope‘,‘$show‘]

注意事项:在数组中写服务的顺序要与在创建ng对象时对应的方法中服务的顺序是要保持一致

html代码:

<!DOCTYPE html>
<html ng-app="myApp">
<head lang="en">
  <meta charset="UTF-8">
  <script src="js/angular.js"></script>
  <script src="js/demo10.min.js"></script>
  <title></title>
</head>
<body>
<div ng-controller="myCtrl">
  <button ng-click="handleClick()">
    clickMe
  </button>
</div>

</body>
</html>
js/demo10.min.js 代码:
var app=angular.module("myApp",["ng"]);app.service("$show",function(){this.showAlert=function(){alert("Hello myService")}});var ctrFunc=function(a,b){a.handleClick=function(){b.showAlert()}};ctrFunc.$inject=["$scope","$show"];app.controller("myCtrl",ctrFunc);

 

③行内式(内联)
允许在创建ng对象指定一个数组作为参数,在数组中写上依赖的服务的名称,数组中最后一个参数必须是该ng对象对应的处理函数

注意事项:顺序

 

html代码:

<!DOCTYPE html>
<html ng-app="myApp">
<head lang="en">
  <meta charset="UTF-8">
  <script src="js/angular.js"></script>
  <script src="js/demo11.min.js"></script>
  <title></title>
</head>
<body>
<div ng-controller="myCtrl">

</div>

</body>
</html>

 

js/demo11.min.js 代码:
var app=angular.module("myApp",["ng"]);app.factory("$Debug",function(){return{debugSwitch:true,log:function(a){if(this.debugSwitch){console.log(a)}}}});app.controller("myCtrl",["$scope","$Debug",function(a,b){b.log("Hello Dependency Injection")}]);

 


四、注入器
注入器是帮助查找和定位服务

得到注入器:
①直接注入$injector
②通过方法
angular.injector();

注入器常用API:
has(‘服务名称‘)
get(‘服务名称‘)

 

<!DOCTYPE html>
<html ng-app="myApp">
<head lang="en">
  <meta charset="UTF-8">
  <script src="js/angular.js"></script>
  <title></title>
</head>
<body>
<div ng-controller="myCtrl">

</div>
<script>
  var app = angular.module(myApp, [ng]);
  //通过service方法创建自定义服务
  app.service($test, function () {
    this.info = it is a test;
  })


  //得到注入器
  var injector = angular.injector([ng, myApp]);
  //手工判断该服务是否存在
  var result = injector.has($test)
  console.log(result);
  //如果存在,得到该服务对象,调用属性或者方法
  if (result) {
    var testObj = injector.get($test);
    console.log(testObj.info);
  }

  //采用行内式依赖注入
  app.controller(myCtrl,
    [$scope,$injector ,
      function ($scope,$injector ) {
        if($injector.has($test))
        {
          var result = $injector.get($test).info
          console.log("in myCtrl is "+ result)
        }
      }])
</script>
</body>
</html>

 

例子:

实现一个自定义计算器服务(加法运算的方法-》有两个参数,将参数求和返回)
采用行内式依赖注入注入上述服务。
在视图中两个input标签,一个求和按钮

结果:

技术分享

 

代码:

<!DOCTYPE html>
<html ng-app="myApp">
<head lang="en">
  <meta charset="UTF-8">
  <script src="js/angular.js"></script>
  <title></title>
</head>
<body>
<div ng-controller="myCtrl">
  <input type="number" ng-model="num1"/>
  <input type="number" ng-model="num2"/>
  <br/>
  <button ng-click="addResult()">求和</button>
  <p>{{‘求和结果:‘+result}}</p>
</div>
<script>
  var app = angular.module(myApp, [ng]);
  
  //创建服务
  app.service($calculator, function () {
    this.add = function (num1,num2) {
      return (num1+num2);
    }
  })

  //行内式依赖注入
  app.controller(myCtrl,
    [$scope,$calculator,
      function ($scope,$calculator) {
          $scope.addResult = function () {
            $scope.result = $calculator.add(
              $scope.num1,$scope.num2);

          }
      }
    ])
</script>
</body>
</html>

 

ng 依赖注入