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

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

 

文件压缩：

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代码，直接运行会出错，即出现无法查找服务的问题：

  
           
     
  
      {
   {count}}
     

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代码：

  
           
     
  
          clickMe  
     

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代码：

 

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('服务名称')

 

 

例子：

实现一个自定义计算器服务（加法运算的方法-》有两个参数，将参数求和返回）

采用行内式依赖注入注入上述服务。

在视图中两个input标签，一个求和按钮

结果：

 

代码：

  
         
     
  
        
        
      
  
      求和  
      
{
   {'求和结果：'+result}}