AngularJS 服务(Service)用法详解

在 AngularJS 中,服务是一个函数或对象,可在你的 AngularJS 应用中使用。

AngularJS 内建了30 多个服务。

有个 $location 服务,它可以返回当前页面的 URL 地址。

var app = angular.module('myApp', []);
app.controller('customersCtrl', function($scope, $location) {
$scope.myUrl = $location.absUrl();
});

注意 $location 服务是作为一个参数传递到 controller 中。如果要使用它,需要在 controller 中定义。

为什么使用服务?

在很多服务中,比如 $location 服务,它可以使用 DOM 中存在的对象,类似 window.location 对象,但 window.location 对象在 AngularJS 应用中有一定的局限性。

AngularJS 会一直监控应用,处理事件变化, AngularJS 使用 $location 服务比使用 window.location 对象更好。

$location vs window.location

~~~

1.服务 #

angular会自动创建实例并注入,不需要手工创建
service在整个应用的生命周期存在,可以共享数据

1.1 provider #

可配置,是唯一一种你可以传进 .config() 函数的 service

1.1.1 提供计算的服务 #

<div class="col-lg-4 col-lg-offset-4 form-group" ng-controller="ctrl as vm ">
    <input type="text" class="form-control" ng-model="vm.a">
    <select name="" id="" class="form-control" ng-model="vm.select">
        <option value="+">+</option>
        <option value="-">-</option>
        <option value="*">*</option>
        <option value="/">/</option>
    </select>
    <input type="text" class="form-control" ng-model="vm.b">
    <button class="btn btn-primary" ng-click="vm.computed()">=</button>
    {{vm.value}}
</div>

1.1.2 创建服务 #

app.provider('myProvider', function () {
        this.currency = '¥';
        this.$get = function () {
           return {
               '+':(a,b)=>this.currency+(a+b),
               '-':(a,b)=>this.currency+(a-b),
               '*':(a,b)=>this.currency+(a*b),
               '/':(a,b)=>this.currency+(a/b),
           }
       }
});

1.1.3 使用服务 #

app.controller('ctrl', function (myProvider) {
    this.computed = function () {
        console.log(myProvider[this.select](parseInt(this.a),parseInt(this.b)));
        this.value = myProvider[this.select](this.a,this.b);
    }
});

1.1.4 配置服务 #

app.config(function (myProviderProvider) {
        myProviderProvider.currency='$'
});

在模块上进行配置

var app = angular.module('appModule',[], function (myProviderProvider) {
    myProviderProvider.currency='$'
});

1.2 factory #

工厂函数定义服务,调用该工厂函数将返回服务实例

app.factory('myfactory', function () {
       var currency = '$';
       return {
           '+':(a,b)=>currency+(a+b),
           '-':(a,b)=>currency+(a-b),
           '*':(a,b)=>currency+(a*b),
           '/':(a,b)=>currency+(a/b),
       }
});

1.3 service #

app.service('myservice', function () {
       var currency  = '$';
       this['+']=(a,b)=>currency+(a+b);
       this['-']=(a,b)=>currency+(a-b);
       this['*']=(a,b)=>currency+(a*b);
       this['/']=(a,b)=>currency+(a/b);
});

1.4 constant #

app.constant('myconstant', {
     '+':(a,b)=>(a+b),
     '-':(a,b)=>(a-b),
     '*':(a,b)=>(a*b),
     '/':(a,b)=>(a/b),
});

可配置

app.config(function (myconstant) {
    myconstant.aa = '$';
});

1.5 value #

app.value('myvalue', {
      '+':(a,b)=>(a+b),
      '-':(a,b)=>(a-b),
      '*':(a,b)=>(a*b),
      '/':(a,b)=>(a/b),
});

1.6 decorator #

1.6.1 声明服务 #

app.factory('my',function () {
    return {
        a: function () {
            return 1;
        }
    };
});

1.6.2 装饰服务 #

app.config(function ($provide) {
    $provide.decorator('my',function ($delegate) {
        var fn =  $delegate['a'];
        $delegate['a'] = function () {
            return fn()+100;
        };
        return $delegate;
    });
});
服务的用途
  • 服务提供了一种能在应用的整个生命周期内保持数据的方法,它能够在控制器之间进行通信,并且能保证数据的一致性
  • 服务提供了把特定功能相关联的方法集中在一起的接口

自定义服务详解(factory、service、provider)

  1. 3种创建自定义服务的方式。
    1. Factory
    2. Service
    3. Provider
  2. 大家应该知道,AngularJS是后台人员在工作之余发明的,他主要应用了后台早就存在的分层思想。所以我们得了解下分层的作用,如果你是前端人员不了解什么是分层,那么你最好问问你后台的小伙伴。
    dao层:就是Model层,在后台时,这一层的作用,就要是写与数据库交互数据的一层,在angularJS里就主要是写ajax的。
    service层:主查写逻辑代码的,但在angularJS里也可以持久化数据(充当数据容器),以供不同的controller高用。
    controller层:即控制层,在angularJS里就是写控制器的。控制器里尽量不要写那些不必要的逻辑,尽量写在service层里。
    所以,就有了创建自定义服务的三种方式。

factory

factory方式创建的服务,作用就是返回一个有属性有方法的对象。相当于:var f = myFactory();

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<p>{{r}}</p>
</div>

<script>
//创建模型
var app = angular.module('myApp', []);

//通过工厂模式创建自定义服务
app.factory('myFactory', function() {
var service = {};//定义一个Object对象'
service.name = "张三";
var age;//定义一个私有化的变量
//对私有属性写getter和setter方法
service.setAge = function(newAge){
age = newAge;
}
service.getAge = function(){
return age;
}
return service;//返回这个Object对象
});
//创建控制器
app.controller('myCtrl', function($scope, myFactory) {
myFactory.setAge(20);
$scope.r =myFactory.getAge();
alert(myFactory.name);
});
</script>
</body>
</html>

在自定义服务里注入服务示例,但不能注入$scope作用域对象。

<script>
var app = angular.module('myApp', []);
app.factory('myFactory', function($http,$q) {
var service = {};
service.name = "张三";
//请求数据
service.getData = function(){
var d = $q.defer();
$http.get("url")//读取数据的函数。
.success(function(response) {
d.resolve(response);
})
.error(function(){
d.reject("error");
});
return d.promise;
}
return service;
});
app.controller('myCtrl', function($scope, myFactory) {
//alert(myFactory.name);
myFactory.getData().then(function(data){
console.log(data);//正确时走这儿
},function(data){
alert(data)//错误时走这儿
});;
});
</script>

service

通过service方式创建自定义服务,相当于new的一个对象:var s = new myService();,只要把属性和方法添加到this上才可以在controller里调用。

<div ng-app="myApp" ng-controller="myCtrl">
<h1>{{r}}</h1>
</div>
<script>
var app = angular.module('myApp', []);

app.service('myService', function($http,$q) {
this.name = "service";
this.myFunc = function (x) {
return x.toString(16);//转16进制
}
this.getData = function(){
var d = $q.defer();
$http.get("ursl")//读取数据的函数。
.success(function(response) {
d.resolve(response);
})
.error(function(){
alert(0)
d.reject("error");
});
return d.promise;
}
});
app.controller('myCtrl', function($scope, myService) {
$scope.r = myService.myFunc(255);
myService.getData().then(function(data){
console.log(data);//正确时走这儿
},function(data){
alert(data)//错误时走这儿
});
});
</script>

3.provder

只有provder是能传 .config() 函数的 service。如果想在 service 对象启用之前,先进行模块范围的配置,那就应该选择 provider。需要注意的是:在config函数里注入provider时,名字应该是:providerName+Provider.
使用Provider的优点就是,你可以在Provider对象传递到应用程序的其他部分之前在app.config函数中对其进行修改。
当你使用Provider创建一个service时,唯一的可以在你的控制器中访问的属性和方法是通过$get()函数返回内容。

<body>
<div ng-app="myApp" ng-controller="myCtrl">
</div>

<script>
var app = angular.module('myApp', []);

//需要注意的是:在注入provider时,名字应该是:providerName+Provider
app.config(function(myProviderProvider){
myProviderProvider.setName("大圣");
});
app.provider('myProvider', function() {
var name="";
var test={"a":1,"b":2};
//注意的是,setter方法必须是(set+变量首字母大写)格式
this.setName = function(newName){
name = newName
}

this.$get =function($http,$q){
return {
getData : function(){
var d = $q.defer();
$http.get("url")//读取数据的函数。
.success(function(response) {
d.resolve(response);
})
.error(function(){
d.reject("error");
});
return d.promise;
},
"lastName":name,
"test":test
}
}

});
app.controller('myCtrl', function($scope,myProvider) {
alert(myProvider.lastName);
alert(myProvider.test.a)
myProvider.getData().then(function(data){
//alert(data)
},function(data){
//alert(data)
});
});
</script>
</body>

4.在过滤器中注入自定义服务

<body>
<div ng-app="myApp">
在过滤器中使用服务:
<h1>{{255 | myFormat}}</h1>
</div>

<script>
var app = angular.module('myApp', []);
app.service('hexafy', function() {
this.myFunc = function (x) {
return x.toString(16);
}
});
app.filter('myFormat',['hexafy', function(hexafy) {
return function(x) {
return hexafy.myFunc(x);
};
}]);
</script>
</body>

~~~

未经允许不得转载:WEB前端开发 » AngularJS 服务(Service)用法详解

赞 (0)