angularJS自定义服务的几种方式

更新日期: 2019-01-29阅读: 3k标签: 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中的服务也有异曲同工之妙,在某种程度上可以使用服务进行状态管理。


链接: https://fly63.com/article/detial/1903

angular.js和vue.js中实现函数去抖

搜索输入框中,只当用户停止输入后,才进行后续的操作,比如发起Http请求等。本文将分别探讨在angular.js和vue.js中如何实现对用户输入的防抖。

你所要知道的所有关于Angular的变化检测机制

如果想像我一样全面的了解Angular的脏值检测机制,除了浏览源代码之外别无他法,网上可没有太多可用信息。大部分文章都提到,Angular中每个组件都自带一个脏值检测器,但是它们都仅仅停留在脏值检测的策略和案例的使用,并没有做太多的深入。

探索 Angular 使用 ViewContainerRef 操作 DOM

每次我读到 Angular 如何操作 DOM 相关文章时,总会发现这些文章提到 ElementRef、TemplateRef、ViewContainerRef 和其他的类。尽管这些类在 Angular 官方文档或相关文章会有涉及,但是很少会去描述整体思路

解决angularJS解决数据显示闪一下的问题?

使用 angular JS 的时候,把 angularJS 放到文件底部,在渲染页面的时候,会出现闪一下的情况。解决办法:1、使用 ng-cloak ;2、将angular.js的引入放到head前,提前加载;3、使用 ng-bind

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

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

Angular 6的新功能,特点介绍

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

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

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

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

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

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

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

Angular 响应式表单之表单分组

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

点击更多...

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