AngularJS之Service4
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之Service4的更多相关文章
- 通过AngularJS实现前端与后台的数据对接（二）——服务（service，$http）篇
什么是服务? 服务提供了一种能在应用的整个生命周期内保持数据的方法,它能够在控制器之间进行通信,并且能保证数据的一致性. 服务是一个单例对象,在每个应用中只会被实例化一次(被$injector实例化) ...
- AngularJs之九（ending......)
今天继续angularJs,但也是最后一篇关于它的了,基础部分差不多也就这些,后续有机会再写它的提升部分. 今天要写的也是一个基础的选择列表: 一:使用ng-options,数组进行循环. <d ...
- AngularJS过滤器filter-保留小数，小数点-$filter
AngularJS 保留小数 默认是保留3位 固定的套路是 {{deom | number:4}} 意思就是保留小数点 的后四位 在渲染页面的时候 加入这儿个代码 用来精确浮点数,指定小数点 ...
- Angular企业级开发(1)-AngularJS简介
AngularJS介绍 AngularJS是一个功能完善的JavaScript前端框架,同时是基于MVC(Model-View-Controller理念的框架,使用它能够高效的开发桌面web app和 ...
- 模拟AngularJS之依赖注入
一.概述 AngularJS有一经典之处就是依赖注入,对于什么是依赖注入,熟悉spring的同学应该都非常了解了,但,对于前端而言,还是比较新颖的. 依赖注入,简而言之,就是解除硬编码,达到解偶的目的 ...
- 步入angularjs directive（指令）--点击按钮加入loading状态
今天我终于鼓起勇气写自己的博客了,激动与害怕并存,希望大家能多多批评指导,如果能够帮助大家,也希望大家点个赞!! 用angularjs 工作也有段时间了,总体感觉最有挑战性的还是指令,因为没有指令的a ...
- 玩转spring boot——结合AngularJs和JDBC
参考官方例子:http://spring.io/guides/gs/relational-data-access/ 一.项目准备 在建立mysql数据库后新建表“t_order” ; -- ----- ...
- 玩转spring boot——结合jQuery和AngularJs
在上篇的基础上 准备工作: 修改pom.xml <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi=&q ...
- 通过AngularJS实现前端与后台的数据对接（一）——预备工作篇
最近,笔者在做一个项目:使用AngularJS,从而实现前端与后台的数据对接.笔者这是第一次做前端与后台的数据对接的工作,因此遇到了许多问题.笔者在这些问题中,总结了一些如何实现前端与后台的数据对接的 ...
随机推荐
- 面向对象程序设计-C++ Operator Overloading & Type conversion (Static)【第十一次上课笔记】
本次上课继续讲解了 [ ] .-> 等运算符重载的具体例子 也讲解了C++单个参数的类的类型转换的案例 最后稍微提到了 static 的第三种作用:静态数据成员 具体详解我都已注释出来了,大家可 ...
- SystemTap----将SystemTap脚本编译成内核模块
当运行SystemTap脚本时,会根据脚本生成一个内核模块,然后插入到系统中执行后退出.这个过程总共分为5个阶段:parse, elaborate, translate, compile, run ...
- 怎样删除在Github中创建的项目
像我这种刚開始学习的人总会不可避免的创建了一些測试性的项目.随后自然就是要删除了.那么该怎样删除呢? 你此刻可能处于这个界面: 也可能处于这个界面: 假设是第一个界面直接点击右側的"Sett ...
- ACM比赛（11462 Age Sort)
You are given the ages (in years) of all people of a country with at least 1 year of age. You know t ...
- winform之2---messagebox用法
MessageBox.Show();可谓是winform开发中用的次数最多的东东啦.先贴一张msdn的图解 msdn好像没有更新哎,只提供了这几种方法,并且参数名称和最新的有差别,但实际上messag ...
- Arduino 入门程序示例之直流电机（2015-06-15）
概述 演示直流电机的控制. 示例程序 PWM控制直流电机 略过控制电机转停的示例啦,有需要就把这里的 PWM 换成数字口输出 HIGH 或 LOW 就行了. // ------------------ ...
- BZOJ 3359: [Usaco2004 Jan]矩形( dp )
数据范围这么小..怎么乱搞都可以吧... 先排序一遍然后O(n²) dp --------------------------------------------------------------- ...
- [转]linux下iftop工具的安装与使用详解(图文)——实时的网络流量，监控TCP/IP连接（单机）
原文链接:http://www.jbxue.com/LINUXjishu/10735.html 在linux中监控系统资源.进程.内存占用等信息,可以使用top命令.查看网络状态可以使用netstat ...
- awk内置变量 awk有许多内置变量用来设置环境信息，这些变量可以被改变，下面给出了最常用的一些变量。
ARGC 命令行参数个数 ARGV 命令行参数排列 ENVIRON 支持队列中系统环境变量的使用 FILENAME awk浏览的文件名 FNR 浏览文件的记录数 FS 设置输入域分隔符,等价于命令行 ...
- android switch语句case expressions must be constant expressions
在项目中遇到这样的Exception:case expressions must be constant expressions public class StandingCityActivity e ...