AngularJS 服务详细讲解及示例代码
更新时间：2016年08月17日 15:17:40 作者：wowowofei
本文主要介绍AngularJS 服务，这里整理了AngularJS 服务的基本知识资料，并附示例代码和实现效果图，有兴趣的小伙伴可以参考下
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 服务的基础资料整理，后续继续整理相关资料，谢谢大家对本站的支持！
您可能感兴趣的文章:
相关文章
这篇文章主要介绍了浅谈Angular 观察者模式理解，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-11-11
AngularJS实现的select二级联动下拉菜单功能示例
这篇文章主要介绍了AngularJS实现的select二级联动下拉菜单功能,结合完整实例形式分析了AngularJS实现二级联动菜单的具体操作步骤与相关实现技巧,需要的朋友可以参考下2017-10-10
本文主要介绍AngularJS 路由,这里整理了相关资料进行详细介绍,并附实例代码和实现效果图,有需要的小伙伴可以参考下2016-07-07
AngularJS 通过新的属性和表达式扩展了 HTML。本文主要给大家介绍Angularjs 滚动加载更多数据的相关知识，需要的朋友参考下吧2016-03-03
今天小编就为大家分享一篇Angularjs实现数组随机排序的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-10-10
Angular.js中$resource高大上的数据交互详解
这篇文章主要给大家介绍了关于Angular.js中$resource高大上的数据交互的相关资料，文中通过示例代码介绍的非常详细，对大家学习或者使用angular.js具有一定的参考学习价值，需要的朋友们下面跟着小编来一起看看吧。2017-07-07
Angular2开发者预览版出来已有一段时间，这个以速度与移动性能为目的的框架到底如何，今天我们来结合官网的demo尝试一下。2016-03-03
ionic4+angular7+cordova上传图片功能的实例代码
ionic是一个垮平台开发框架，可通过web技术开发出多平台的应用。这篇文章主要介绍了ionic4+angular7+cordova上传图片功能，本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值 ,需要的朋友可以参考下2019-06-06
详解AngularJs HTTP响应拦截器实现登陆、权限校验
本篇文章主要介绍了AngularJs HTTP响应拦截器实现登陆、权限校验，具有一定的参考价值，感兴趣的小伙伴们可以参考一下。2017-04-04
这篇文章主要介绍了Angular2 多级注入器详解的相关资料,并附简单实例代码，需要的朋友可以参考下2016-10-10
最新评论