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 相关文章推荐
js简单实现根据身份证号码识别性别年龄生日
Nov 29 Javascript
原生js实现淘宝首页点击按钮缓慢回到顶部效果
Apr 06 Javascript
javascript实现图片轮播效果
Jan 20 Javascript
JavaScript实现多种排序算法
Feb 24 Javascript
jQuery简单实现tab选项卡切换效果
Jun 20 Javascript
ES6新特性之模块Module用法详解
Apr 01 Javascript
webpack4+Vue搭建自己的Vue-cli项目过程分享
Aug 29 Javascript
Vue源码中要const _toStr = Object.prototype.toString的原因分析
Dec 09 Javascript
vue数据操作之点击事件实现num加减功能示例
Jan 19 Javascript
vue配置nprogress实现页面顶部进度条
Sep 21 Javascript
vue实现简单学生信息管理
May 30 Javascript
vue实现防抖的实例代码
Jan 11 Vue.js
深入理解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
PHP实现获取并生成数据库字典的方法
2016/05/04 PHP
CakePHP框架Session设置方法分析
2017/02/23 PHP
收集的10个免费的jQuery相册
2011/02/26 Javascript
jquery数据验证插件(自制,简单,练手)实例代码
2013/10/24 Javascript
jquery实现的导航固定效果
2014/04/28 Javascript
javascript与css3动画结合使用小结
2015/03/11 Javascript
JavaScript简单表格编辑功能实现方法
2015/04/16 Javascript
ECMAScript中函数function类型
2015/06/03 Javascript
超漂亮的Bootstrap 富文本编辑器summernote
2016/04/05 Javascript
Jquery实现上下移动和排序代码
2016/10/17 Javascript
浅谈jQuery中Ajax事件beforesend及各参数含义
2016/12/03 Javascript
基于Bootstrap框架实现图片切换
2017/03/10 Javascript
JS字符串按逗号和回车分隔的方法
2017/04/25 Javascript
jQuery制作全屏宽度固定高度轮播图(实例讲解)
2017/07/08 jQuery
限时抢购-倒计时的完整实例(分享)
2017/09/17 Javascript
Element PageHeader页头的使用方法
2020/07/26 Javascript
vue 判断两个时间插件结束时间必选大于开始时间的代码
2020/11/04 Javascript
[04:13]2014DOTA2国际邀请赛 专访DC目前形势不容乐观
2014/07/12 DOTA
python自动化工具日志查询分析脚本代码实现
2013/11/26 Python
python遍历数组的方法小结
2015/04/30 Python
Python实现图片批量加入水印代码实例
2019/11/30 Python
使用python绘制cdf的多种实现方法
2020/02/25 Python
PyQt5 控件字体样式等设置的实现
2020/05/13 Python
利用python+ffmpeg合并B站视频及格式转换的实例代码
2020/11/24 Python
经典c++面试题五
2014/12/17 面试题
城市轨道专业个人求职信范文
2013/09/23 职场文书
应用化学专业职业生涯规划书
2013/12/31 职场文书
大学同学十年聚会感言
2014/02/21 职场文书
法制宣传实施方案
2014/03/13 职场文书
二年级学生评语大全
2014/04/23 职场文书
2015年世界环境日活动总结
2015/02/11 职场文书
认真学习保证书
2015/02/26 职场文书
计划生育个人总结
2015/03/02 职场文书
4S店收银员岗位职责
2015/04/07 职场文书
检讨书格式
2019/04/25 职场文书
浅析Python中的套接字编程
2021/06/22 Python