《AngularJS》------自定义服务 provider、service、factory

2024-08-27 20:48

本文主要是介绍《AngularJS》------自定义服务 provider、service、factory,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

    在AngularJS中,我们经常将通用的业务逻辑封装在服务里面,这样一来,不仅减少了代码量,而且使出错率也降低了,代码的易读性也提高了,所以说,我们经常用到了业务逻辑,或者是说持久化数据化操作应该放在自定义的服务里面,而不是Controller里面。下面我说一下provider、service、factory的定义方式还有主要区别。

    1、provider

    Providers是唯一 一种你可以传进 .config() 函数的service。当你想要在 service对象启用之前,先进行模块范围的配置,那就应该用 provider。当我们定义provider时候,我们还必须将返回对象放在this.$get=function(){}中。代码如下:

var myModule = angular.module("HelloAngular", []);
myModule.config(['providerServiceProvider',function(providerServiceProvider){providerServiceProvider.name='这是通过外部config传入的参数名字:大哥你好啊!!!!!!';
}])myModule.provider('providerService',function(){this.name='';this.$get=function(){var _name='';var serverce={};var that =this;serverce.setName=function(name){_name=name;}serverce.getName=function(){return _name;}serverce.getConfigName=function(){return that.name;}return serverce;}
});

    定义个Controller调用该服务

myModule.controller("helloAngular", ['$scope','service01','factory01','providerService',function HelloAngular($scope,service01,factory01,providerService) {providerService.setName("这是providerService服务设置的名字:美女,今晚约吗?");console.log(providerService.getName());console.log(providerService.getConfigName());}
]);

    效果图:

 

     2、service

     Service是用"new"关键字实例化的。因此,你应该给"this"添加属性, 然后service返回"this"。你把 service 传进 controller 之后,在 controller 里 "this" 上的属性就可以通过 service来使用了。

myModule.service('service01',function(){var _name='';this.setName=function(name){_name=name;}this.getName=function(){return _name;};});

    Controller可以这么写

myModule.controller("helloAngular", ['$scope','service01',function HelloAngular($scope,service01) {service01.setName("这是service01服务设置的名字:美女,今晚约吗?");console.log(service01.getName());}
]);

    3、factory

    factory 方法直接把一个函数当成一个对象的$get 方法,它还可以直接返回字符串,用factory 就是创建一个对象,为它添加属性,然后把这个对象返回出来。你把service 传进 controller 之后,在controller 里这个对象里的属性就可以通过factory 使用了。代码如下:

    factory直接返回字符串,其它的两个服务不行。

myModule.factory('factory01',function(){return '你大爷的';
});

    factory定义对象,然后在对象上定义各种属性,各种方法。

myModule.factory('factory01',function(){var _name='';var serverce={};var that =this;serverce.setName=function(name){_name=name;}serverce.getName=function(){return _name;}serverce.getConfigName=function(){return that.name;}return serverce;
});

    Controller的调用我就不用再写了吧,和上面一样,相比较三种方式,定义服务的方法大同小异,只是provider方法稍微复杂了点。

     service方法与factory相比,service可以不用生命对象,它直接将某些属性和方法绑定在this上就可以,但是它不可以直接返回字符串,而factory定义的服务必须在里面定义一个对象,将某些公用的方法或者属性绑定在此对象上,然后Return回去。这就是我总结的Angular中三种自定义服务的区别,其实这三种服务还有其它定义方式,可以通过config定义,也可以直接在声明module时当第三个参数传入进去使用,本人认为使用module方法简单,所以今天只是总结了这种方法。

这篇关于《AngularJS》------自定义服务 provider、service、factory的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/1112745

相关文章

【前端学习】AntV G6-08 深入图形与图形分组、自定义节点、节点动画(下)

【课程链接】 AntV G6:深入图形与图形分组、自定义节点、节点动画(下)_哔哩哔哩_bilibili 本章十吾老师讲解了一个复杂的自定义节点中,应该怎样去计算和绘制图形,如何给一个图形制作不间断的动画,以及在鼠标事件之后产生动画。(有点难,需要好好理解) <!DOCTYPE html><html><head><meta charset="UTF-8"><title>06

【区块链 + 人才服务】可信教育区块链治理系统 | FISCO BCOS应用案例

伴随着区块链技术的不断完善,其在教育信息化中的应用也在持续发展。利用区块链数据共识、不可篡改的特性, 将与教育相关的数据要素在区块链上进行存证确权,在确保数据可信的前提下,促进教育的公平、透明、开放,为教育教学质量提升赋能,实现教育数据的安全共享、高等教育体系的智慧治理。 可信教育区块链治理系统的顶层治理架构由教育部、高校、企业、学生等多方角色共同参与建设、维护,支撑教育资源共享、教学质量评估、

【区块链 + 人才服务】区块链集成开发平台 | FISCO BCOS应用案例

随着区块链技术的快速发展,越来越多的企业开始将其应用于实际业务中。然而,区块链技术的专业性使得其集成开发成为一项挑战。针对此,广东中创智慧科技有限公司基于国产开源联盟链 FISCO BCOS 推出了区块链集成开发平台。该平台基于区块链技术,提供一套全面的区块链开发工具和开发环境,支持开发者快速开发和部署区块链应用。此外,该平台还可以提供一套全面的区块链开发教程和文档,帮助开发者快速上手区块链开发。

自定义类型:结构体(续)

目录 一. 结构体的内存对齐 1.1 为什么存在内存对齐? 1.2 修改默认对齐数 二. 结构体传参 三. 结构体实现位段 一. 结构体的内存对齐 在前面的文章里我们已经讲过一部分的内存对齐的知识,并举出了两个例子,我们再举出两个例子继续说明: struct S3{double a;int b;char c;};int mian(){printf("%zd\n",s

AngularJS for login

web.xml <?xml version="1.0" encoding="UTF-8"?><web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://java.sun.com/xml/ns/javaee" xsi:schemaLocation="http://java.sun.com/xml/n

Spring 源码解读:自定义实现Bean定义的注册与解析

引言 在Spring框架中,Bean的注册与解析是整个依赖注入流程的核心步骤。通过Bean定义,Spring容器知道如何创建、配置和管理每个Bean实例。本篇文章将通过实现一个简化版的Bean定义注册与解析机制,帮助你理解Spring框架背后的设计逻辑。我们还将对比Spring中的BeanDefinition和BeanDefinitionRegistry,以全面掌握Bean注册和解析的核心原理。

数据视图(AngularJS)

<!DOCTYPE html><html ng-app="home.controller"><head><meta charset="utf-8"><title>数据视图</title><link href="page/common/css/bootstrap.min.css" rel="stylesheet"><script src="page/common/js/angular.js"></

Oracle type (自定义类型的使用)

oracle - type   type定义: oracle中自定义数据类型 oracle中有基本的数据类型,如number,varchar2,date,numeric,float....但有时候我们需要特殊的格式, 如将name定义为(firstname,lastname)的形式,我们想把这个作为一个表的一列看待,这时候就要我们自己定义一个数据类型 格式 :create or repla

基于SpringBoot的宠物服务系统+uniapp小程序+LW参考示例

系列文章目录 1.基于SSM的洗衣房管理系统+原生微信小程序+LW参考示例 2.基于SpringBoot的宠物摄影网站管理系统+LW参考示例 3.基于SpringBoot+Vue的企业人事管理系统+LW参考示例 4.基于SSM的高校实验室管理系统+LW参考示例 5.基于SpringBoot的二手数码回收系统+原生微信小程序+LW参考示例 6.基于SSM的民宿预订管理系统+LW参考示例 7.基于

HTML5自定义属性对象Dataset

原文转自HTML5自定义属性对象Dataset简介 一、html5 自定义属性介绍 之前翻译的“你必须知道的28个HTML5特征、窍门和技术”一文中对于HTML5中自定义合法属性data-已经做过些介绍,就是在HTML5中我们可以使用data-前缀设置我们需要的自定义属性,来进行一些数据的存放,例如我们要在一个文字按钮上存放相对应的id: <a href="javascript:" d