angularJS自定义服务的几种方式

时间: 2019-01-29阅读: 342标签: angular

在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中的服务也有异曲同工之妙,在某种程度上可以使用服务进行状态管理。


成为优秀Angular开发者所需要学习的19件事

一款to-do app基本等同于前端开发的“Hello world”。虽然涵盖了创建应用程序的CRUD方面,但它通常只涉及那些框架或库也能做到的皮毛而已。Angular看起来似乎总是在改变和更新

在 Angular 8 中,我们可以期待些什么?

Angular 作为一款优秀的前端框架,自诞生之日起,就致力于面向前端开发者提供一整套全功能解决方案。与其他流行框架所追求的理念不同,Angular并非作为一款可以并入 Web 应用程序的轻量级框架而生

angular7中的变化监测

最近做公司新项目用的angular7,中碰到了一个很头疼的问题在绑定对象中的数据改变时,页面视图没有跟新,需点击页面中的时间元素后才会更新。

AngularJS 的那些内置九种过滤器

ng内置了九种过滤,currency (货币处理)使用currency可以将数字格式化为货币,默认是美元符号,你可以自己传入所需的符号,例如我传入人民币,ng提供的date过滤器基本可以满足一般的格式化要求。

Angular 响应式表单之表单分组

表单提交,表单全部校验成功才能提交,当表单校验错误,表单边框变红,同时有错误提示信息,有重置功能。在分析代码之前,首先明确 FormControl、formControl、formControlName、FormGroup...

Angularjs的$http异步删除数据详解及实例

这篇文章主要介绍了Angularjs的$http异步删除数据详解及实例的相关资料,这里提供实现思路及实现具体的方法,写的十分的全面细致,具有一定的参考价值,对此有需要的朋友可以参考学习下。

angular动态绑定样式以及改变UI框架样式的方法

ngClass要绑定的类名会在tr根据数据循环生成html的过程中调用组件中定义的isHideClass方法,并把i(index)带过去让方法使用根据方法逻辑返回的类名去绑定写好的样式

angular2及其他项目中遇到的问题和解决方法

Angular2项目日常开发中所遇问题及解决方案记录:angular-cli修改域名及端口号、解决双击变蓝的问题、修改浏览器滚动条的默认样式等等

Angular 6的新功能,特点介绍

Angular 6目的是为了使Angular变得更小,更快,更易于使用。Angular 6版本更加关注底层框架和工具链,同时加快了工具链在Angular中的运行速度,除此以外,这次更新还包括框架包

Angular HMR(热模块替换)功能实现方法

在使用Angular的时候,希望能像VUE那样,修改代码后浏览器不刷新,页面对应修改的组件自动更新的功能。这个功能的名字时HMR (hot module replace)。稍微研究了一下,发现在angular/cli创建的项目中,实现这个不算太难,步骤如下

fly63.com版权所有,内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权,请与小编联系!情况属实本人将予以删除!

广告赞助文章投稿关于web前端网站点搜索站长推荐网站地图站长QQ:522607023

小程序专栏: 土味情话心理测试脑筋急转弯幽默笑话段子句子语录成语大全