angularJS自定义服务的几种方式

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


站长推荐

1.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

2.广告联盟: 整理了目前主流的广告联盟平台,如果你有流量,可以作为参考选择适合你的平台点击进入

链接: http://www.fly63.com/article/detial/1903

关闭

20 个 AngularJS 开发工具

AngularJS是那些渴望以动态方式来设计web app的web开发人员最偏爱的框架之一。如果你是一个希望启动AngularJS项目的开发人员,那么你可能需要帮助来挑选出趁手的工具……

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

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

探索 Angular 使用 ViewContainerRef 操作 DOM

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

为什么使用AngularJS?

Angular.js是google开发者设计和开发的一套前端开发框架,帮助你简化前端开发的负担。下面给大家介绍一下你应该使用Angular.js的重要原因:要知道开源界的很多框架都是开发人员由于个人兴趣或者激情而开发出来的

angular有必要学吗?

对于前端开发人员来说,angular是非常有必要学习的,它可以使Web应用开发比以往更简单、更快捷;同时也降低了构建复杂应用的难度。更何况很多后端职位都要求掌握angular了。Angular是一个使用 HTML 和 JavaScript 编写的 Web 前端框架

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

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

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

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

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

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

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

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

Angular有哪些版本?

目前Angular有7个版本,分别为:AngularJS、Angular2、Angular4、Angular5、Angular6、Angular7、Angular8。下面本篇文章就来给大家介绍一下,希望对大家有所帮助。

点击更多...

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