（11）AngularJS 1.X 之自定义服务

2024-04-27 15:17:59

字体：大中小

来源：转载

供稿：网友

引言通过service方法自定义服务1 使用模块service方法自定义服务2 使用PRovide服务的service方法自定义服务3 service自定义服务解释通过factory方法自定义服务1 使用模块factory方法自定义服务2 使用服务factory方法自定义服务3 解释factory方法自定义的服务通过provider方法自定义服务1 provider定义简单服务2 provider定义需要配置的服务3 provider创建的服务需要注意的地方使用供应商修改默认表达式符号1 使用interpolateProvider供应商修改默认表达式服务服务注入代码压缩问题

1.引言

在本篇博客中主要介绍一下如何自定义服务，为什么要自定义服务？首先我们应该意识到：在开发的过程中，controller 这一层应该很薄；也就是说，应用里大部分的业务逻辑和持久化数据都应该放在 service里。controller 中就不应该存储持久化数据，出于内存性能的考虑，controller 只在需要的时候才会初始化，一旦不需要就会被抛弃。因此，每次当你切换或刷新页面的时候， Angular 会清空当前的 controller。与此同时，service 可以用来永久保存应用的数据，并且这些数据可以在不同的 controller 之间使用。

关于自定义服务有三种方法，三种方法分别为：

provider factoryservice

这三种方法创建自定义服务都有着自己的特点，我们以前说过：服务的类型有两种，一种是具有供应商的服务，一种是不具备供应商的服务，通过Provider方法创建的服务是具有供应商的，因此我们可以将Provider创建的服务传入config方法进行配置；而Factory，Service方法创建的服务是不具备供应商概念的，Factory，Service两个方法创建服务也有细微的区别，接下来我们分别使用这三种方法创建自定义服务。

2.通过`service`方法自定义服务

service方法定义的服务是用new关键字实例化的。因此，我们可以直接给this添加属性，然后服务返回this。我们也可以将自定义的服务注入到我们的控制器中。使用service方法自定义服务也有两种方式，一种是通过模块的service方法自定义服务，一种是通过$provide服务自定义服务。接下来我们就来看一下这两种方法。

重点说明service自定义服务是new一个函数对象（一定是对象）

2.1 使用模块`service`方法自定义服务

自定义服务，服务名称为$myService var app = angular.module('myApp',[]); app.service("$myService",function(){ var _name="wpx"; this.getName=function(){ return _name; } })在控制区中注入我们的服务 app.controller("firstController", function ($scope,$myService) { $scope.name=$myService.getName() })html片段<div ng-controller="firstController">{{name}}</div>运行结果

这里写图片描述

2.2 使用`$provide`服务的`service`方法自定义服务

自定义我们的服务：$myService var app = angular.module('myApp',[], function ($provide) { $provide.service("$myService", function () { var _name="wpx"; this.getName= function () { return _name; } }) });将服务注入到控制器中 app.controller("firstController", function ($scope,$myService) { $scope.name=$myService.getName() })html 片段 <div ng-controller="firstController">{{name}}</div>运行结果

这里写图片描述

2.3 `service`自定义服务解释

首先我们注意到：service自定义的服务是一个函数。service自定义的服务函数是可以注入其他服务的，比如我注入$http服务，可以这么写//注入其他服务app.service("$myService",function($http){ })service自定义的服务是new出来的，也就是说改服务的实现和函数类用法一样，比如： function myClass() { } var a=new myClass();

3.通过`factory`方法自定义服务

使用factory方法自定义服务也是有两种方式，通过模块定义，通过$provide服务的factory方法定义服务，factory创建的服务和service方法定义的服务是有区别的，factory 方法直接把一个函数当成一个对象的$get方法，因此factory 创建的服务 是可以直接返回字符串的。（service自定义的服务就不可以直接返回字符串），接下来我们就使用factory 方法自定义我们的服务

重点说明factory自定义服务是是调用函数 ，然后返回一个对象，或者是数据

3.1 使用模块`factory`方法自定义服务

自定义服务,服务名称为：$myFactory1（返回字符串） var app = angular.module('myApp',[]); app.factory("$myFactory1",function(){ return "aaaa"; })自定义服务,服务名称为：$myFactory2（返回对象）app.factory("$myFactory2",function(){ var _name; function getName(){ return _name; } function setName(name) { _name=name; } return { getName:getName, setName:setName } })将自定义服务注入到控制器app.controller("firstController", function ($scope,$myFactory1,$myFactory2) { $scope.name=$myFactory1 $myFactory2.setName("wpx");})app.controller("secondController", function ($scope,$myFactory2) { $scope.name=$myFactory2.getName() })html片段 <div ng-controller="firstController">{{name}}</div> <div ng-controller="secondController">{{name}}</div>运行结果

这里写图片描述

3.2 使用服务`factory`方法自定义服务

话不多少，直接上代码

var app = angular.module('myApp',[], function ($provide) { $provide.factory("factoryName",function () { //服务代码 }) });

3.3 解释`factory`方法自定义的服务

第一点：factory的服务是当作方法来调用第二点：factory自定义服务也可以注入其他服务，比如：$httpapp.factory("$myFactory1",function($http){ //代码实现 //记得return })第三点：服务是单例的，通过实例我们知道，服务可以在多个控制器之间传递数据（在控制器一中给服务添加数据，然后在控制器2中读取数据）

4.通过`provider`方法自定义服务

在前面我们说过provider方法定义的服务最大的区别在于具有供应商的概念，具有了供应商我们就可以通过config方法配置一些全局的属性。首先我们先使用provider定义一个简单的服务。

4.1 `provider`定义简单服务

使用模块的provider定义一个服务（叫做mySelf） var app = angular.module('myApp',[]); app.provider("$mySelf", function () { this.$get=function(){ return { message:"$mySelf" } } })使用$provide定义一个服务（叫做mySelf） var app = angular.module('myApp',[], function ($provide) { $provide.provider("$mySelf", function () { this.$get=function(){ return { message:"$mySelf" } } }) });将自定义服务注入到控制器app.controller("firstController", function ($scope,$mySelf) { $scope.message=$mySelf.message })html片段 <div ng-controller="firstController">{{message}}</div>运行结果

这里写图片描述

4.2 `provider`定义需要配置的服务

刚刚我们说过：通过provider定义的服务会生成供应商，有供应商的服务可以通过模块的config方法进行配置，接下来我们来使用一下供应商。

创建一个自定义的服务（该服务需要配置一个attr属性） var app = angular.module('myApp',[]); app.provider("$mySelf", function () { //需要配置的属性 this.attr=""; this.$get=function(){ var that=this; var service={}; var _attr="$mySelf.attr"; service.getAttr=function(){ return _attr+"-----"+that.attr; } return service; } })通过供应商配置属性（在服务的后面添加Provider就是供应商）app.config(function ($mySelfProvider) { $mySelfProvider.attr="config.attr"; })将服务注入到控制器中app.controller("firstController", function ($scope,$mySelf) { $scope.attr=$mySelf.getAttr(); })html片段<div ng-controller="firstController">{{attr}}</div>运行结果

这里写图片描述

4.3 `provider`创建的服务需要注意的地方

使用provider方法创建服务具有供应商我们可以通过config配置供应商的属性使用provider自定义服务是如何创建的？首先我们看一下服务的定义//首先我们new了一下，服务函数然后使用this.$get方法，将得到的结果注入到了控制器中，也就是说provider方法创建的服务其实是service方法和factory方法的一个组合使用。app.provider("$mySelf", function () { //需要配置的属性 this.attr=""; this.$get=function(){ var that=this; var service={}; var _attr="$mySelf.attr"; service.getAttr=function(){ return _attr+"-----"+that.attr; } return service; } })*

5 使用供应商修改默认表达式符号

前面我们说了，部分服务是具有供应商的，既然AngularJS提供了一些默认的服务，那么就应该有一些默认的供应商，这里我们就使用一下默认的供应商修改一下默认的表达式，默认表达式是{{表达式}}，现在我们将其修改为#表达式#。

5.1 使用`$interpolateProvider`供应商修改默认表达式服务

使用config方法设置供应商 var app = angular.module('myApp',[]); app.config(function ($interpolateProvider) { $interpolateProvider.startSymbol("#"); $interpolateProvider.endSymbol("#"); })使用新的表达数输出数据//控制器app.controller("firstController", function ($scope) { $scope.attr="hello world";})//html片段<div ng-controller="firstController">#attr#</div>运行结果

这里写图片描述

6 服务注入，代码压缩问题

在使用服务的时候，不可避免的就会涉及到依赖注入的问题，如果服务的名称过长，那么我们多次使用服务代码的体积就会变得越来越大，所以我们在注入服务的时候可以给服务：起别名。利用非常短的别名来代替服务，接下来我们看一看如何注入我们的服务，以$scope服务为例：

app.controller("firstController",["$scope","$rootScope",function ($s,$rs) { $s.name="wpx"; $rs.age="20"; }])html代码片段<div ng-controller="firstController">{{name}}---{{age}}</div>运行结果

这里写图片描述