简介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 相关文章推荐
获取Javscript执行函数名称的方法
Dec 22 Javascript
javascript oop开发滑动(slide)菜单控件
Aug 25 Javascript
Javascript实现的类似Google的Div拖动效果代码
Aug 09 Javascript
js动态添加事件并可传参数示例代码
Oct 21 Javascript
用js将内容复制到剪贴板兼容浏览器
Mar 18 Javascript
基于javascript、ajax、memcache和PHP实现的简易在线聊天室
Feb 03 Javascript
jQuery实现字符串按指定长度加入特定内容的方法
Mar 11 Javascript
javascript表单控件实例讲解
Sep 13 Javascript
解析JavaScript实现DDoS攻击原理与保护措施
Dec 26 Javascript
pageGroup.js实现分页功能
Jul 27 Javascript
使用js实现一个简单的滚动条过程解析
Sep 10 Javascript
React Hooks 实现和由来以及解决的问题详解
Jan 17 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
更改localhost为其他名字的方法
2014/02/10 PHP
php批量添加数据与批量更新数据的实现方法
2014/12/16 PHP
Symfony2之session与cookie用法小结
2016/03/18 PHP
Yii2-GridView 中让关联字段带搜索和排序功能示例
2017/01/21 PHP
php实现基于pdo的事务处理方法示例
2017/07/21 PHP
使用PHPStorm+XDebug搭建单步调试环境
2017/11/19 PHP
基于jQuery的日期选择控件
2009/10/27 Javascript
Jquery Select操作方法集合脚本之家特别版
2010/05/17 Javascript
jQuery学习笔记之jQuery的事件
2010/12/22 Javascript
五段实用的js高级技巧
2011/12/20 Javascript
利用javascript打开模态对话框(示例代码)
2014/01/11 Javascript
Node.js+Express配置入门教程详解
2016/05/19 Javascript
深入理解jQuery事件绑定
2016/06/02 Javascript
详解Node.js中的事件机制
2016/09/22 Javascript
Vue自定义指令介绍(2)
2016/12/08 Javascript
使用nodejs爬取前程无忧前端技能排行
2017/05/06 NodeJs
鼠标拖动改变DIV等网页元素的大小的实现方法
2017/07/06 Javascript
vue中使用cropperjs的方法
2018/03/01 Javascript
js中自定义react数据验证组件实例详解
2018/10/19 Javascript
微信小程序实现登录遮罩效果
2018/11/01 Javascript
JS通用方法触发点击事件代码实例
2020/02/17 Javascript
jQuery实现推拉门效果
2020/10/19 jQuery
Python cookbook(数据结构与算法)字典相关计算问题示例
2018/02/18 Python
将Dataframe数据转化为ndarry数据的方法
2018/06/28 Python
使用python实现男神女神颜值打分系统(推荐)
2019/10/31 Python
Python3常用内置方法代码实例
2019/11/18 Python
Python descriptor(描述符)的实现
2020/11/15 Python
python3实现简单飞机大战
2020/11/29 Python
网络研修随笔感言
2014/02/17 职场文书
仓管员岗位责任制
2014/02/19 职场文书
计算机求职自荐信范文
2014/04/19 职场文书
小学生十佳少年事迹材料
2014/08/20 职场文书
学习党代会心得体会
2014/09/05 职场文书
个人优缺点总结
2015/02/28 职场文书
毕业生自荐信范文
2015/03/05 职场文书
七年级作文之下雨天
2019/12/23 职场文书