AngularJS(十):依赖注入
本文也同步发表在我的公众号“我的天空”
依赖注入
依赖注入不是AngularJS独有的概念,而是现代软件开发与架构的范畴,但是在AngularJS中“依赖注入”是其核心思想之一,所以我们专门来学习一下。
观察除“AngularJS路由”这节之前的控制器代码,发现我们把所有的业务逻辑都写在控制器代码部分,当代码规模小还好处理,随着代码规模扩大,这样的做法很快就会使代码变的难以维护,控制器将变成一个代码垃圾场,我们要做的所有东西都会倒在里面,它们会变的非常难以理解且难以修改。这种情况下,我们自然会想到代码分离,将功能类似的代码抽取出来单独写成一个模块,就像我们会将JS抽取出来写成一个个JS外部文件一样,使用的时候将其引入即可。
再来观察“AngularJS路由”这节的代码,我们引用模块的方式与之前有了显著的不同:
var app=angular.module("myApp",['ngRoute']);
对于angular.mmodule()方法的第二个参数,之前我们一直都是一个空数组,而在路由功能实现中,由于我们要依赖angular-route.min.js中的ngRoute模块来实现路由功能,因此将第二个参数设置为['ngRoute'],该数组参数就是放置我们所要依赖的其他模块名,如果我们要依赖多个模块,则继续将模块名添加到该数组中就可以了,类似['module1','module2'...]。
当我们引用了依赖的ngRoute后,就可以使用$routeProvider了,利用其config()函数来实现路由功能。期间我们并不需要调用任何函数去创建$routeProvider,我们也不用关心这个对象是如何生成的、其内部工作机制如何,只要拿来使用就够了,就像把$routeProvider注入到我们的代码里似的。再联想到我们一直使用的$scope、实现http服务的$http等对象都是贯彻了这一宗旨。因此通俗来说“依赖注入”就是在需要的时候把我们所依赖的模块功能注入到程序中。
接下来我们自己编写一个模块,并注入到程序中:
var app=angular.module("MathService",[])
app.factory('myMath',function(){
var my={};
my.add=function(a,b){
return a+b;
}
return my;
});
Math.js
<head>
<script src="Angular.js"></script>
<script src="Math.js"></script>
</head>
<body ng-app="myApp" ng-controller="ctr">
{{result}}
</body>
<script>
var app=angular.module("myApp",['MathService']);
app.controller("ctr",function($scope,myMath){
$scope.result=myMath.add(1,21);
})
</script>
示例代码AngularJS_26.html
在Math.js中,我们首先定义了模块的名称为“MathService”,接下来使用factory()来定义“myMath”服务,事实上在AngularJS中的服务均为一个单例对象(即只会创建一个实例的对象),在该服务中实现了一个add()方法,返回两个数的和。
接下来看在示例26中如何使用这个模块。首先我们引入了Math.js。在模块声明中,我们将第二个参数的值设置为“['MathService']”,这个就是我们实现功能所要依赖的模块,接下来在控制器代码中,我们注入了myMath服务,并且使用myMath.add()方法,实现两数求和。
在AngularJS中,创建服务的方法除了factory()外,还有value()、provider()、service()和constant()等方法,其适用的范围及功能均有所不同,请自行查阅相关文档。
整个AngularJS系列就到此结束了,实际上该系列只是介绍了AngularJS的入门,把自己的学习过程写出来的而已。对于更深入的知识我和大家一样都需要继续再学习。
该系列的示例代码
https://github.com/panyongwow/angularJS
AngularJS(十):依赖注入的更多相关文章
- AngularJS DI(依赖注入)实现推测
AngularJS DI(依赖注入) http://www.cnblogs.com/whitewolf/archive/2012/09/11/2680659.html 回到angularjs:在框架中 ...
- 模拟AngularJS之依赖注入
一.概述 AngularJS有一经典之处就是依赖注入,对于什么是依赖注入,熟悉spring的同学应该都非常了解了,但,对于前端而言,还是比较新颖的. 依赖注入,简而言之,就是解除硬编码,达到解偶的目的 ...
- AngularJS(15)-依赖注入
AngularJS 依赖注入 什么是依赖注入 wiki 上的解释是:依赖注入(Dependency Injection,简称DI)是一种软件设计模式,在这种模式下,一个或更多的依赖(或服务)被注入(或 ...
- AngularJS的依赖注入方式
在定义controller,module,service,and directive时有两种方式, 方式一: var myModule = angular.module('myApp', []); m ...
- Angularjs之依赖注入
一个对象通常有三种方式可以获得对其依赖的控制权: 在内部创建依赖: 通过全局变量进行引用: 在需要的地方通过参数进行传递 依赖注入是通过第三种方式实现的.比如: function SomeClass( ...
- AngularJS:依赖注入
ylbtech-AngularJS:依赖注入 1.返回顶部 1. AngularJS 依赖注入 什么是依赖注入 wiki 上的解释是:依赖注入(Dependency Injection,简称DI)是一 ...
- 我的angularjs源码学习之旅2——依赖注入
依赖注入起源于实现控制反转的典型框架Spring框架,用来削减计算机程序的耦合问题.简单来说,在定义方法的时候,方法所依赖的对象就被隐性的注入到该方法中,在方法中可以直接使用,而不需要在执行该函数的时 ...
- 细数Javascript技术栈中的四种依赖注入
作为面向对象编程中实现控制反转(Inversion of Control,下文称IoC)最常见的技术手段之一,依赖注入(Dependency Injection,下文称DI)可谓在OOP编程中大行其道 ...
- JavaScript中依赖注入详细解析
计算机编程的世界其实就是一个将简单的部分不断抽象,并将这些抽象组织起来的过程.JavaScript也不例外,在我们使用JavaScript编写应用时,我们是不是都会使用到别人编写的代码,例如一些著名的 ...
随机推荐
- C++经典问题:狐狸找兔子
问题描述: 围绕着山顶有10个洞,一只狐狸和一只兔子住在各自的洞里.狐狸想吃掉兔子.一天,兔子对狐狸说:"你想吃我有一个条件,先把洞从1-10编上号,你从10号洞出发,先到1号洞找我:第二次 ...
- redis 有用 Sorted-Set 应用场景
1.1.1Set数据类型的 使用场景 1.可以使用Redis的Set数据类型跟踪一些唯一性数据,比如访问某一博客的唯一IP地址信息.对于此场景,我们仅需在每次访问该博客时将访问者的IP存入Redis中 ...
- Linux kernel分析前的准备
分析工具 “欲善其事,先利其器”.Linux内核的代码量非常大,如果没有一个好的察看分析工具,那将是一件非常繁琐的事情. Vim+cscope cscope,如果你知道ctags,那么它是一个比cta ...
- 阶段3-团队合作\项目-网络安全传输系统\sprint0-产品规划与设计\第2课-产品功能模型设计
- HTML5 & CSS3编程入门经典 ((美)Rob Larsen) pdf扫描版
HTML和CSS是构建网页所需要了解的两种核心编程语言,拉尔森编著的这本<HTML5&CSS3编程入门经典>详细介绍了这两种语言. <HTML5&CSS3编程入门经典 ...
- 【java数据类型和mysqk数据类型对照表】
java mysql 数据类型对照 类型名称 显示长度 数据库类型 JAVA类型 JDBC类型索引(int) 描述 VARCHAR L+N VARCHAR java.lan ...
- Note: PANOPLY: Low-TCB Linux Applications with SGX Enclaves
PANOPLY provides middleware for SGX and Linux operating systems. What PANOPLY provides middleware fo ...
- sed命令使用
创建模板文件 # cat >> example.txt <<"EOF" TeSt Test test EOF 测试过程中均不使用-i参数避免模板文件内容被修 ...
- Java8 使用 stream().map()提取List对象的某一列值及排重
List对象类(StudentInfo) public class StudentInfo implements Comparable<StudentInfo> { //名称 privat ...
- 洛谷P3396 哈希冲突(分块)
传送门 题解在此,讲的蛮清楚的->这里 我就贴个代码 //minamoto #include<iostream> #include<cstdio> #include< ...