AngularJS之Service（四）
前言
前面我们讲了控制器、过滤器以及指令，这一节我们来讲讲重大内容之一服务和其中涉及到的工厂。
话题
AngularJS中服务可以说是和DI紧密联系在一起，在应用程序中我们可以通过使用服务来共享代码，服务可以被延迟实例化，为何这样说，在Angular内置的服务或者我们自定义的服务只有在注入才能被实例化，同时也就意味着当我们应用程序需要依赖于服务这一组件时才会被实例化，Angular中的服务是一个单例对象即服务中的某一个部分依赖于另外一个服务都会返回从服务工厂中获取到单个实例的引用。Angular中有许多内置默认有用的服务供我们使用，和过滤器一样，我们同样可以根据需求自定义服务。
服务到底做了什么？它的底层实现了什么？它提供了跨领域、请求和操作数据、和外部服务集成以及包括业务逻辑的功能，它简单的就如一个JSON对象。下图给出了Angular组件以及它们之间的作用。
服务到底什么时候应该被创建？为什么要被创建？当我们在应用程序利用Angular需要重用代码时，我们通过服务来封装功能，在Angular模块中有三种方法来定义服务：Factory、Service、Provider。下面我们就这三种方式来创建服务。
Factory method for creating service（推荐方式）
创建服务最简单的方式则是通过module.Factory的方式来创建服务，通过传递两个参数，一个是创建服务的名称，另外一个则是factory函数来返回服务对象。下面我们来创建一个日志记录服务看看。
FactoryService.js
创建factoryApp模块并自定义一个logService服务。
var factroyApp = angular.module('factoryApp', []);
factroyApp.factory('logService', function(){
var messageCount = 0;
return {
log : function(msg){
console.log("(日志提醒 + " + messageCount++ + ") " + msg);
}
};
})
app.js
加载factoryApp依赖模块，通过点击对应的按钮来记录该按钮的文本以及点击的次数。
var app = angular.module('myApp', ['factoryApp']);
app.controller('FactoryController', function ($scope, logService) {
$scope.data = {
device: ["Vivo Xplay5", "OPPO R9", "Huawei P9"],
totalClicks: 0
};
$scope.$watch('data.totalClicks', function (count) {
logService.log("点击次数: " + count);
});
});
app.directive("triButton", function (logService) {
return {
scope: { counter: "=counter" },
link: function (scope, element, attrs) {
element.on("click", function (event) {
logService.log("所点击按钮文本为: " + event.target.innerText);
scope.$apply(function () {
scope.counter++;
});
});
}
}
});
FactoryHtml
<html ng-app="myApp">
<head>
<meta charset="utf-8">
<title></title>
<link href="../Content/bootstrap.min.css" rel="stylesheet"/>
<script type="text/javascript" src="../Scripts/angular.min.js"></script>
<script type="text/javascript" src="../Service/FactoryService.js"></script>
<script type="text/javascript" src="../app.js"></script>
</head>
<body ng-controller="FactoryController">
<div class="well">
<div class="btn-group" tri-button counter="data.totalClicks" source="data.device">
<button class="btn btn-default" ng-repeat="item in data.device">
{{item}}
</button>
</div>
<h5>总点击次数: {{data.totalClicks}}</h5>
</div>
</body>
</html>
我们同样来看看结果：
其实对于上述app.js我们完全可以进行改造，通过DI来实现（虽然还未讲到DI）我们可以事先体验一下来得到同样的效果，同时将上述控制器代码进行拆分，这样代码才能一目了然。将app.js中控制器代码改造如下：
app.controller('FactoryController',FactoryController);
app.$inject = ['$scope','logService'];
function FactoryController($scope,logService){
$scope.data = {
device: ["Vivo Xplay5", "OPPO R9", "Huawei P9"],
totalClicks: 0
};
$scope.$watch('data.totalClicks', function (count) {
logService.log("点击次数: " + count);
});
}
Service method for creating service
我们同样可以用service方法来创建服务，但是与上述通过工厂方法来创建服务有点不同，当在AnuglarJS中某一组件需要通过工厂方法定义的服务这一依赖时，很简单只是通过工厂方法返回的对象来使用该对象即可，而在service方法中需要使用服务对象，那么需要将工厂方法作为一个构造函数并且需要使用js关键字来创建这个服务对象，此时这个关键字则不会再在程序中大量使用，则容易造成不必要的麻烦。说了这么多貌似只有用代码才能加深我们的理解，其实就是利用原型继承来创建，我们重新写一个日志服务方法。
上述我们只需要将创建服务的脚本进行改造如下即可：
var serviceApp = angular.module('factoryApp', []);
var baseLogger = function () {
var messageCount = 0;
this.log = function (msg) {
console.log("(日志提醒 + " + messageCount++ + ") " + msg);
}
};
var debugLogger = function () { };
debugLogger.prototype = new baseLogger
serviceApp.service("logService", debugLogger);
上述代码想必不用做过多解释，再加上第一种方式作为推荐方式，这两种方式作为了解，知道有这三种方式即可。
Provider method for creating service
对于通过这种方式来创建服务我们需要更多的去用代码进行改造，和第一种方式类比，我们通过工厂函数来返回，而对于此方法我们最终需要通过调用$get方法来获取服务对象。代码如下：
var providerApp = angular.module('factoryApp', []);
providerApp.provider("logService", function () {
var messageCount = 0;
return {
$get: function () {
return {
log: function (msg) {
console.log("(日志提醒 + " + messageCount++ + ") " + msg);
}
};
}
}
});
总结
这一节我们稍微比较详细的介绍了在AngularJS中如何创建服务，利用三种方式来创建服务，希望对阅读本文的你有所帮助，我们下节再叙。
AngularJS之Service（四）的更多相关文章
- AngularJS：Service
ylbtech-AngularJS:Service 1.返回顶部 1. AngularJS 服务(Service) AngularJS 中你可以创建自己的服务,或使用内建服务. 什么是服务? 在 An ...
- AngularJS 1.x系列：AngularJS服务-Service
1. AngularJS服务 AngularJS可注入类型包括:Service.Factory.Provider.Value及Constant. 2. Service AngularJS Servic ...
- angularjs factory,service,provider 自定义服务的不同
angularjs框架学了有一段时间了,感觉很好用.可以把angularjs的app理解成php的class,controller是控制器,而内置服务和自定义服务就可以理解成models了.angul ...
- AngularJS 服务(Service)
AngularJS 中你可以创建自己的服务,或使用内建服务. 什么是服务? 在 AngularJS 中,服务是一个函数或对象,可在你的 AngularJS 应用中使用. AngularJS 内建了30 ...
- Make AngularJS $http service behave like jQuery.ajax()(转)
There is much confusion among newcomers to AngularJS as to why the $http service shorthand functions ...
- AngularJS 1.x系列：AngularJS服务-Service、Factory、Provider、Value及Constant（5）
1. AngularJS服务 AngularJS可注入类型包括:Service.Factory.Provider.Value及Constant. 2. Service AngularJS Servic ...
- angularjs学习第四天笔记（第一篇：简单的表单验证）
您好,我是一名后端开发工程师,由于工作需要,现在系统的从0开始学习前端js框架之angular,每天把学习的一些心得分享出来,如果有什么说的不对的地方,请多多指正,多多包涵我这个前端菜鸟,欢迎大家的点 ...
- Angularjs演示Service功能
在angularjs中,我们可以自定义自己的service.可以说得是自定义的方法,函数. 下面我们一步一步来演示吧:首先为angularjs定义一个app: var demoApp = angula ...
- 【angularJS】Service服务
AngularJS 中的服务是一个函数或对象.可以创建自己的服务,或使用内建服务. 内置服务 AngularJS 内建了30 多个服务. 1. $location 服务,它可以返回当前页面的 URL ...
随机推荐
- java基础
属性是对象的特征,每个对象都有自己独立的属性值.一个对象的属性发生变化,不会影响另外一个对象的属性.属性是封装在对象之中的变量,是对象的成员.属性也叫成员变量. null表示一个变量没有指向任何对象. ...
- C++构造函数/析构函数 设置成private的原因
C++构造函数/析构函数 设置成private的原因 标签(空格分隔): c/c++ 将构造函数,析构函数声明为私有和保护的,那么对象如何创建? 已经不能从外部调用构造函数了,但是对象必须被构造,应该 ...
- myBatis中 collection 或 association 联合查询 中column 传入多个参数值
下面是一个树形结构表自连接 联合查询 Demo <resultMap id="BaseResultMap" type="com.maidan.daas.entit ...
- PHP DOS漏洞的新利用：CVE-2015-4024 Reviewed
1. 背景介绍 今天我们想从2015.04.03的一个PHP远程dos漏洞(CVE-2015-4024)说起.技术细节见如下链接,https://bugs.php.net/bug.php?id ...
- C语言dll文件的说明以及生成、使用方法
最近在搞一些小项目,由于要涉及到跟其它语言进行交互,动态链接库变成了不二的选择.为此也查阅了很多资料,将动态链接库的相关知识在此做一个整理. 一.动态链接库概述 动态链接库(Dynamic Link ...
- 页面制作部分之PS切图
页面制作部分之PS切图 <--本标签下,通过页面制作.页面架构.javascript程序设计.DOM编程艺术.产品前端架构五部分来分享总结笔记,总结笔记会陆续分享--> 网页设计在技术层面 ...
- 最短路（代码来源于kuangbin和百度）
最短路 最短路有多种算法,常见的有一下几种:Dijstra.Floyd.Bellman-Ford,其中Dijstra和Bellman-Ford还有优化:Dijstra可以用优先队列(或者堆)优化,Be ...
- Ubantu 下安装 tensorflow
# 在 Linux 上: $ sudo apt-get install python-pip python-dev python-virtualenv $ virtualenv --system-si ...
- 基于 Asp.Net的 Comet 技术解析
Comet技术原理 来自维基百科:Comet是一种用于web的技术,能使服务器能实时地将更新的信息传送到客户端,而无须客户端发出请求,目前有两种实现方式,长轮询和iframe流. 简单的说是一种基于现 ...
- SQL Server 2012故障转移的looksalive check和is alive check
什么是looksalive check和is alive check SQL Server故障转移集群是建立在windows集群服务上的一种热备的高可用方案.在集群运行过程中,windows集群服务定 ...