分享web开发知识

注册/登录|最近发布|今日推荐

主页 IT知识网页技术软件开发前端开发代码编程运营维护技术分享教程案例
当前位置:首页 > 软件开发

angularJS自定义服务的几种方式

发布时间:2023-09-06 02:31责任编辑:熊小新关键词:暂无标签

在angularJS中定义服务共有四种常见的方式:factory,service,provider,constant,value

使用形式的不同:

1)factory以返回对象的形式定义服务:

 ?myapp.factory(‘factorySer‘,[function() { ???return { ?????getName: function () { ???????return ‘your name is tomHason-factory‘; ?????} ???} ?}])

2)service是使用new关键字实例化,所以直接使用this定义

 myapp.service(‘serviceSer‘,[function() { ???this.getName = function () { ?????return ‘your name is tomHason-service‘; ???} ?}])

3)provider比较特殊,在定义服务的时候必须使用$get函数返回一个对象

能注入到config的service,这样定义的service在你开始注入之前就已经实例化,开发共享的模块的时候常常使用它,能够在使用之前进行配置,比如你可能需要配置你的服务端的url

 ?// 能注入到config的service,这样定义的service在你开始注入之前就已经实例化,开发共享的模块的时候常常使用它,能够在使用之前进行配置,比如你可能需要配置你的服务端的url ?myapp.provider(‘providerSer‘, [function () { ?????this.$get = function() { ?????????return { ?????????name: ‘your name is tomHason-provider‘, ?????????getName: function () { ???????????return ?this.name; ?????????}, ?????????setName: function (name) { ???????????return this.name = name; ?????????} ???????} ???} ???}])

4)constant一般用于常量定义

能注入到config的服务

myapp.constant(‘constantSer‘, {name: ‘Greasy Giant‘, age: 32});

5)value与constant一样是用于定义常量的

 myapp.value(‘valueSer‘, {name:‘tomHsm-valuse‘})

 

关于provider,以及constant在angularModule.config函数中的使用方式简单例子

AngularJS模块可以在被加载和执行之前对其自身进行配置。我们可以在应用的加载阶段应用不同的逻辑组对其修改,在模块加载阶段,AngularJS会在提供者(provide)注册和配置的过程中对模块进行配置。

在整个AngularJS的工作流中,这个阶段是唯一能够在应用启动前对其进行修改的部分。

关于angularJS的config函数使用较多的地方就是配置路由的ui-router

下面是一个简单provider服务使用在congfig函数中的例子:

app.js

define([‘angular‘],function(angular) { ???var myapp = angular.module(‘myapp‘,[‘ui.router‘]); ???myapp.provider(‘MyProvider‘, function() { ?????????var defaultName = ‘anonymous‘; ?????????var name = defaultName; ?????????this.setName = function(newName) { ?????????????name = newName; ?????????} ???????this.getName = function () { ???????????return name; ???????} ????????this.$get = function() { ?????????????var result = {}; ????????????result.name = name; ?????????????result.defaultName = defaultName; ?????????????result.getName = function () { ???????????????return this.name; ???????????} ???????????result.setName = function (name) { ???????????????this.name = name ???????????} ???????????return result; ?????????} ?????}) ?????myapp.constant(‘apiKey‘, ‘123123123‘) ???myapp.config([‘$translateProvider‘,‘apiKey‘,‘MyProviderProvider‘,function($translateProvider,apiKey,MyProviderProvider) { ???????MyProviderProvider.setName(‘Angularjs‘); ?

可以看到的是我们在模块定义的时候定义了一个provider形式的服务MyProvider,在config函数中使用了其setName()方法进行name的初始化【在config使用的时候是`服务名+‘Provider’`的形式】

在控制器中使用这个服务的时候和其他服务形式是一样的

define([‘app‘,‘service/service.methods‘],function(myapp){ ?myapp.controller("servicesMethodsCtrl",["$scope",‘$state‘,"$timeout","factorySer", "serviceSer", "constantSer",‘valueSer‘,‘providerSer‘,‘MyProvider‘, ???function($scope,$state,$timeout,factorySer, serviceSer, constantSer,valueSer,providerSer,MyProvider){ ?????console.log("this is servicesMethodsCtrl");    $timeout(function () {      MyProvider.setName("vueJS");      $scope.MyProviderName = MyProvider.getName();      $scope.$apply();    },2000)

  

借题发挥:

现如今项目十分复杂,涉及状态难以管理,于是就有了vuex,redux等等比较优秀的状态管理工具,本质上是全局定义一个对象,给几个api进行对象的属性维护。

那么在angularJS中的服务也有异曲同工之妙,在某种程度上可以使用服务进行状态管理。

angularJS自定义服务的几种方式

原文地址:https://www.cnblogs.com/evaling/p/10332116.html

知识推荐

我的编程学习网——分享web前端后端开发技术知识。 垃圾信息处理邮箱 tousu563@163.com 网站地图
icp备案号 闽ICP备2023006418号-8 不良信息举报平台 互联网安全管理备案 Copyright 2023 www.wodecom.cn All Rights Reserved