Angular(二)服务

本文深入剖析Angular中的服务概念,包括服务的定义、初始化过程及其作为单例的特性。介绍了三种依赖注入方式:隐式注入、显式注入和行内注入,并详细讲解了服务的注册方法,如provider、factory和服务方法(service)的使用细节。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

一、服务的概念及声明

1.在angular中,服务是作为一种提供特定功能的方法而存在的,可以被其他程序调用。它是一个单例,可以是任意类型。一个服务在angular应用的生命周期内,只会被初始化一次,并被所有调用者所共享。
服务通过依赖注入的方式被调用
2.依赖注入的三种方式
(1).隐式注入:没有明确的声明,angular会默认参数名称就是函数依赖,并使用$injector将这些参数注入到对象实例中。
在严格模式下,使用隐式注入会 报错。如果对代码进行压缩,参数名称就会被替换成简单的字符,AngularJS找不到这些函数依赖将导致注入失败。

angular.modular('myApp',[])
.controller('myController',function($scope) {})

(2).显示注入:只需为函数对象新增一个$inject属性,值为一个字符串数组,包含依赖的名称。数组元素必须与注入参数的顺序一一对应。

angular.module('myApp',[])
.controller('myController',myService);
myService.$inject = ['$scope','window'];
function myService() {}

(3).行内注入

angular。module(‘myAPP’,[])
.controller('myCtrl',['$scope',function($scope) {}]);

二、服务的注册

1.provider
provider可以注册一个可配置的服务,通过provider()方法注册的服务必须要包含“ get()provider get()发放返回的结果。如果provider有返回值,那它只能是this 或者 基本数据类型 或者是 具有 $get()发放的对象类型。

provider()发放利用config 函数来对服务进行配置(在对象启动之前),config配置的只能是在$get()方法之外定义的变量,在注入config函数中时,参数名必须由 “服务名”+ Provider 的形式。

angular.module('myApp',[])
.provider('myServer',function() {
    this.$get() = function() { return ...}
})
.config(function(myServerProvider) {...})

2.factory()方法
factory方法注册的服务是不可配置的,且必须要有返回值,它可以返回任意类型的值(基本数据类型或者对象类型),如果没有返回值则会报错。factory注入的结果就是return返回的结果,可以在被注入的对象中使用return的值

定义一个factory服务

angular.module('myApp',[])
.factory('myFactory',function() {
    return {
        name: 'name1'
        getInfo: function() {console.log(name);}
    }
});

在controller中注入服务

angular.module('myApp',[])
.controller('maCtrl',['$scope','myFactory',function($scope,myFactory) {
    maFactory.getInfo();
}])

3.service()方法
service方法创建的服务也是不可配置的,可以不需要返回任何值,因为service本身就是一个构造器对象,系统会用 new 关键字创建一个对象(即以构造函数实例化的形式生成一个服务实例),因此可以再service的内部使用 this 关键字,对service进行扩展。如果service有返回值,则必须是一个对象,因为如果返回一个基本类型,则相当于返回德尔还是this本身。

angular.module('myApp',[])
.service('myService'.function() {
this.info = 'infomation';
   this.getInfo = function() {
       return this.info;
   }
})
.controller('myCtrl',['$scope','myService',function($scope,myService) {
    $scope.info = myService.getInfo();
}])

参考文章:Angular服务深度剖析

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值