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

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

文件压缩:
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 依赖注入的更多相关文章

  1. ng依赖注入

    依赖注入 1.注入器在组件的构造函数中写服务constructor(private httpreq:HttpService) { } 2.提供器 providers: [HttpService],

  2. angular路由 模块 依赖注入

    1.模块 var helloModule=angular.module('helloAngular',[]); helloModule.controller('helloNgCrtl',['$scop ...

  3. AngularJS学习笔记之依赖注入

    最近在看AngularJS权威指南,由于各种各样的原因(主要是因为我没有money,好讨厌的有木有......),于是我选择了网上下载电子版的(因为它不要钱,哈哈...),字体也蛮清晰的,总体效果还不 ...

  4. 4.了解AngularJS模块和依赖注入

    1.模块和依赖注入概述 1.了解模块 AngularJS模块是一种容器,把代码隔离并组织成简洁,整齐,可复用的块. 模块本身不提供直接的功能:包含其他提供功能的对象的实例:控制器,过滤器,服务,动画 ...

  5. AngularJS——依赖注入

    依赖注入    依赖注入(DI)是一个经典的设计模式, 主要是用来处理组件如何获得依赖的问题.关于DI,推荐阅读Martin Flower的文章(http://martinfowler.com/art ...

  6. AngularJS学习--- AngularJS中XHR(AJAX)和依赖注入(DI) step5

    前言:本文接前一篇文章,主要介绍什么是XHR,AJAX,DI,angularjs中如何使用XHR和DI. 1.切换工具目录 git checkout -f step- #切换分支 npm start ...

  7. angular2 学习笔记 ( DI 依赖注入 )

    refer : http://blog.thoughtram.io/angular/2016/09/15/angular-2-final-is-out.html ( search Dependency ...

  8. (五)Angularjs - 依赖注入

    如何找到API? AngularJS提供了一些功能的封装,但是当你试图通过全局对象angular去 访问这些功能时,却发现与以往遇到的库大不相同. 比如,AngularJS暴露了一个全局对象:angu ...

  9. AngularJs学习笔记6——四大特性之依赖注入

    压缩工具:YUI-compressor 为了优化网页功能,对一些脚本文件进行压缩,比如:删除所有的注释和空格等,简化形参.但是AngularJs模块中可以声明多种组件,如控制器.指令.过滤器.服务等. ...

随机推荐

  1. 9. Palindrome Number(判断整型数字是否是回文,直接暴力即可)

    Determine whether an integer is a palindrome. Do this without extra space. class Solution: def isPal ...

  2. iOS XCode工程 警告处理

    今天 老板说,群~你的警告⚠️蛮多的...我拍了胸脯,下周项目总结时候一定会完美解决!!! 于是我得把项目中全部警告解决了,加油

  3. python学习笔记:函数参数

    1. 位置参数:一般的参数 2. 默认参数: def power(x, n=2): s = 1 while n > 0: n = n - 1 s = s * x return s 参数里有默认赋 ...

  4. 002. MySQL复制操作

    #### 1.Setting the Replication Master Configuration On a replication master, you must enable binary  ...

  5. jetbrains goland 跳到上一个光标处

    查了下是 :Ctrl + Alt + 左右 mac下面是:Command+ Alt + 左右键 但是我用下来是切上面打开文档页 摸索了下是:Ctrl +Win+ Alt + 左右  我的键的映射是De ...

  6. centos 7 install virtualbox

    from:https://wiki.centos.org/HowTos/Virtualization/VirtualBox Installing VirtualBox cd /etc/yum.repo ...

  7. Docker_remote_api未授权访问漏洞

    docker remote  api主要的目的是取代命令行界面, docker client和docker daemon通过unix domain socket进行通信. 默认情况下,只有本机的roo ...

  8. QMap的使用

    1.定义 mapQMap<QString,QColor> map; 2.插入数据 map.insert("AA",RGB(255,0,0)); map.insert(& ...

  9. Linux系统下使用pwgen生成密码的使用教程

    pwgen生成的密码易于记忆且相当安全.从技术上来说,容易记忆的密码不会比随机生成的密码更加安全.但是,在大多数情况下,pwgen生成的密码已经足够安全,除了网银密码等需要高安全等级的情况外.使用易于 ...

  10. [国家集训队2011]happiness

    Description 高一一班的座位表是个n*m的矩阵,经过一个学期的相处,每个同学和前后左右相邻的同学互相成为了好朋友.这学期要分文理科了,每个同学对于选择文科与理科有着自己的喜悦值,而一对好朋友 ...