AngularJS 服务详细讲解及示例代码


Posted in Javascript onAugust 17, 2016

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

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

有两种方法来创建服务。

工厂

服务

使用工厂方法

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

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 服务详细讲解及示例代码

以上就是对AngularJS 服务的基础资料整理,后续继续整理相关资料,谢谢大家对本站的支持!

Javascript 相关文章推荐
多个iframe自动调整大小的问题
Sep 18 Javascript
表单项的name命名为submit、reset引起的问题
Dec 22 Javascript
支持ie与FireFox的剪切板操作代码
Sep 28 Javascript
JavaScript中的alert()函数使用技巧详解
Dec 29 Javascript
使用js复制链接中的部分文字的方法
Jul 30 Javascript
原生js实现电商侧边导航效果
Jan 19 Javascript
js获取浏览器的各种属性
Apr 27 Javascript
详解ES6之async+await 同步/异步方案
Sep 19 Javascript
微信小程序 swiper 组件遇到的问题及解决方法
May 26 Javascript
JS判断数组是否包含某元素实现方法汇总
Jun 24 Javascript
vue实现抽屉弹窗效果
Nov 15 Javascript
echarts柱状图背景重叠组合而非并列的实现代码
Dec 10 Javascript
深入理解jQuery layui分页控件的使用
Aug 17 #Javascript
AngularJS 作用域详解及示例代码
Aug 17 #Javascript
jQuery Easyui使用(一)之可折叠面板的布局手风琴菜单
Aug 17 #Javascript
jQuery Easyui使用(二)之可折叠面板动态加载无效果的解决方法
Aug 17 #Javascript
js实现添加可信站点、修改activex安全设置,禁用弹出窗口阻止程序
Aug 17 #Javascript
Node.js中使用jQuery的做法
Aug 17 #Javascript
学习Angular中作用域需要注意的坑
Aug 17 #Javascript
You might like
五款常用mysql slow log分析工具的比较分析
2011/05/22 PHP
探讨PHP JSON中文乱码的解决方法详解
2013/06/06 PHP
九个你必须知道而且又很好用的php函数和特点
2013/08/08 PHP
php判断电脑访问、手机访问的例子
2014/05/10 PHP
PHP小教程之实现链表
2014/06/09 PHP
PHP错误处理函数
2016/04/03 PHP
PHP实现从上往下打印二叉树的方法
2018/01/18 PHP
PHP操作Postgresql封装类与应用完整实例
2018/04/24 PHP
Laravel推荐使用的十个辅助函数
2019/05/10 PHP
如何在centos8自定义目录安装php7.3
2019/11/28 PHP
参考:关于Javascript中实现暂停的几篇文章
2007/03/04 Javascript
jquery模拟按下回车实现代码
2011/09/20 Javascript
用js来定义浏览器中一个左右浮动元素相对于页面主体宽度的位置的函数
2012/01/21 Javascript
jquery图片不完全按比例自动缩小的简单代码
2013/07/29 Javascript
基于OL2实现百度地图ABCD marker的效果
2015/10/01 Javascript
js事件冒泡、事件捕获和阻止默认事件详解
2016/08/04 Javascript
Query常用DIV操作获取和设置长度宽度的实现方法
2016/09/19 Javascript
浅谈Node.js:Buffer模块
2016/12/05 Javascript
JavaScript使用正则表达式获取全部分组内容的方法示例
2017/01/17 Javascript
原生javascript实现文件异步上传的实例讲解
2017/10/26 Javascript
vue使用screenfull插件实现全屏功能
2020/09/17 Javascript
[02:34]DOTA2英雄基础教程 幽鬼
2014/01/02 DOTA
Python使用tkinter库实现文本显示用户输入功能示例
2018/05/30 Python
Python命名空间的本质和加载顺序
2018/12/17 Python
Python 实现OpenCV格式和PIL.Image格式互转
2020/01/09 Python
7 For All Mankind官网:美国加州洛杉矶的高级牛仔服装品牌
2018/12/20 全球购物
世界汽车零件:World Car Parts
2019/09/04 全球购物
应聘医学检验人员自荐信
2013/09/27 职场文书
中西医结合临床医学专业大学生自荐信
2013/09/28 职场文书
献爱心捐款倡议书
2014/05/14 职场文书
大学生标准自荐书
2014/06/15 职场文书
2014年重阳节敬老活动方案
2014/09/16 职场文书
检讨书1000字
2014/10/11 职场文书
小学体育课教学反思
2016/02/16 职场文书
求职信如何撰写?
2019/05/22 职场文书
导游词之太湖
2019/10/08 职场文书