简介AngularJS中使用factory和service的方法


Posted in Javascript onJune 17, 2015

 AngularJS支持使用服务的体系结构“关注点分离”的概念。服务是JavaScript函数,并负责只做一个特定的任务。这也使得他们即维护和测试的单独实体。控制器,过滤器可以调用它们作为需求的基础。服务使用AngularJS的依赖注入机制注入正常。

AngularJS提供例如许多内在的服务,如:$http, $route, $window, $location等。每个服务负责例如一个特定的任务,$http是用来创建AJAX调用,以获得服务器的数据。 $route用来定义路由信息等。内置的服务总是前缀$符号。

有两种方法来创建服务。

  1.     工厂
  2.     服务

使用工厂方法

使用工厂方法,我们先定义一个工厂,然后分配方法给它。

var mainApp = angular.module("mainApp", []);
   mainApp.factory('MathService', function() {   
     var factory = {}; 
     factory.multiply = function(a, b) {
      return a * b 
     }
     return factory;
   });

使用服务方法

使用服务的方法,我们定义了一个服务,然后分配方法。还注入已经可用的服务。

mainApp.service('CalcService', function(MathService){
  this.square = function(a) { 
 return MathService.multiply(a,a); 
 }
});

例子

下面的例子将展示上述所有指令。
testAngularJS.html

<html>
<head>
  <title>Angular JS Forms</title>
</head>
<body>
  <h2>AngularJS Sample Application</h2>
  <div ng-app="mainApp" ng-controller="CalcController">
   <p>Enter a number: <input type="number" ng-model="number" />
   <button ng-click="square()">X<sup>2</sup></button>
   <p>Result: {{result}}</p>
  </div>
  <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script>
  <script>
   var mainApp = angular.module("mainApp", []);
   mainApp.factory('MathService', function() {   
     var factory = {}; 
     factory.multiply = function(a, b) {
      return a * b 
     }
     return factory;
   }); 

   mainApp.service('CalcService', function(MathService){
      this.square = function(a) { 
      return MathService.multiply(a,a); 
     }
   });

   mainApp.controller('CalcController', function($scope, CalcService) {
      $scope.square = function() {
      $scope.result = CalcService.square($scope.number);
     }
   });
  </script>
</body>
</html>

结果

在Web浏览器打开textAngularJS.html。看到结果如下。

简介AngularJS中使用factory和service的方法

Javascript 相关文章推荐
Prototype源码浅析 String部分(一)之有关indexOf优化
Jan 15 Javascript
jquery控制显示服务器生成的图片流
Aug 04 Javascript
JavaScript采用递归算法计算阶乘实例
Aug 04 Javascript
javascript针对不确定函数的执行方法
Dec 16 Javascript
JQuery validate插件验证用户注册信息
May 11 Javascript
深入解析JavaScript中的立即执行函数
May 21 Javascript
js仿腾讯QQ的web登陆界面
Aug 19 Javascript
javascript过滤数组重复元素的实现方法
May 03 Javascript
jQuery为某个div加入行样式
Jun 09 jQuery
使用mixins实现elementUI表单全局验证的解决方法
Apr 02 Javascript
layui实现下拉框三级联动
Jul 26 Javascript
layui实现数据表格点击搜索功能
Mar 26 Javascript
简介AngularJS的视图功能应用
Jun 17 #Javascript
在AngularJS中使用AJAX的方法
Jun 17 #Javascript
使用AngularJS来实现HTML页面嵌套的方法
Jun 17 #Javascript
AngularJS的表单使用详解
Jun 17 #Javascript
举例讲解AngularJS中的模块
Jun 17 #Javascript
简介AngularJS的HTML DOM支持情况
Jun 17 #Javascript
在Ubuntu系统上安装Ghost博客平台的教程
Jun 17 #Javascript
You might like
php文件上传表单摘自drupal的代码
2011/02/15 PHP
php邮件发送,php发送邮件的类
2011/03/24 PHP
PHP根据session与cookie用户登录状态操作类的代码
2016/05/13 PHP
PHP请求远程地址设置超时时间的解决方法
2016/10/29 PHP
解决laravel查询构造器中的别名问题
2019/10/17 PHP
网页中实现浏览器的最大,最小化和关闭按钮
2007/03/12 Javascript
Input 特殊事件onpopertychange和oninput
2009/06/17 Javascript
js判断选择的时间是否大于今天的代码
2013/08/20 Javascript
在NodeJS中启用ECMAScript 6小结(windos以及Linux)
2014/07/15 NodeJs
JS实现两表格里数据来回转移的方法
2015/05/28 Javascript
Javascript实现快速排序(Quicksort)的算法详解
2015/09/06 Javascript
jQuery EasyUI Dialog拖不下来如何解决
2015/09/28 Javascript
AngularJS 实现JavaScript 动画效果详解
2016/09/08 Javascript
微信小程序 摇一摇抽奖简单实例实现代码
2017/01/09 Javascript
通过vue提供的keep-alive减少对服务器的请求次数
2018/04/01 Javascript
Vue.js最佳实践(五招助你成为vuejs大师)
2018/05/04 Javascript
微信小程序实现刷脸登录
2018/05/25 Javascript
微信小程序实现收藏与取消收藏切换图片功能
2018/08/03 Javascript
9102了,你还不会移动端真机调试吗
2019/03/25 Javascript
[03:01]DOTA2英雄基础教程 露娜
2014/01/07 DOTA
[38:27]完美世界DOTA2联赛PWL S2 Forest vs FTD.C 第二场 11.26
2020/11/30 DOTA
python调用shell的方法
2013/11/20 Python
Python递归函数定义与用法示例
2017/06/02 Python
Python中的上下文管理器和with语句的使用
2018/04/17 Python
Python针对给定字符串求解所有子序列是否为回文序列的方法
2018/04/21 Python
python3 tcp的粘包现象和解决办法解析
2019/12/09 Python
Python3读取和写入excel表格数据的示例代码
2020/06/09 Python
阿玛尼美妆加拿大官方商城:Giorgio Armani Beauty加拿大
2017/10/24 全球购物
斯图尔特·韦茨曼鞋加拿大官网:Stuart Weitzman加拿大
2019/10/13 全球购物
本科生详细的自我评价
2013/09/19 职场文书
毕业生个人求职的自我评价
2013/10/28 职场文书
爱心捐款倡议书
2014/04/14 职场文书
2014基建处领导班子“四风”对照检查材料思想汇报
2014/10/04 职场文书
2014年幼儿园安全工作总结
2014/11/10 职场文书
乡镇安全生产月活动总结
2015/05/08 职场文书
Python Django模型详解
2021/10/05 Python