在Angular服务中扩展基类

小编典典

在Angular服务中扩展基类

angularjs

我有一个基类，我想在服务中进行扩展以帮助将数据输入角度范围。我已经在网上搜索了一种解决方案，但是没有找到我喜欢的解决方案。我有一个用于访问设备文件系统的基类

类结构：

var cOfflineStorageBase = Class.extend({
   init: function(){
   },
   CreateFolderDir: function(){
   },
   DeleteAll: function(){
   },
   DeleteDirectories: function(){
   },
   DeleteItem: function(){
   },
   GetFiles: function(){
   },
   FileExists: function(){
   }, 
   GetPath: function(){
   },
   GetObject: function(){
   },
   SaveObject: function(){
   },   
});

我希望能够在几个不同的角度服务（即offlineCart，offlineCustomLists等）中扩展该类，其中每个服务都将能够使用存储库来存储各种不同的数据类型。我正在寻找最好，最合适的方式来做到这一点。在普通JavaScript中，人们只会做这样的事情：

var newClass = cOfflineStorageBase.extend({
   //add new stuff here
});

但我想以同样的方式做同样的事情。

我一直在考虑的方法是使用angular.extend功能，但是我不确定这是否合适，或者类似的方法是否更合适：

app.factory('someChild', ['$http' , 'cOfflineStorageBase', 
            function($http, cOfflineStorageBase){
  var SomeClass = cOfflineStorageBase.extend({
     init: function(){
        this._super.init()
     },
     //Add more stuff here
  });
  return SomeClass;
}]);

如果这些方法是正确的，或者对于我想完成的工作，可能还有其他更好的方法，我想提出一些建议。我也希望或者宁愿在大多数代码中使用Promise，因为它将是异步的。

阅读 318

2020-07-04

共1个答案

小编典典

我最近完成了这个技巧。

我将从定义一个普通的JavaScript构造函数开始。这不必是有角度的服务。我要做的是，以后，扩展构造函数可以按参数传递任何必要的注入。因此，这将是我的角度服务的基本“类”。在这里，我将公开我希望所有角度服务继承的任何内容。

function ParentService($http) {
   this.$http = $http;
}

ParentService.prototype.foo = function () {
    alert("Hello World");
};

然后，我将继续使用原型继承定义子构造函数。该构造函数确实将是一个有角度的服务（您可以$inject在最后使用我告诉您）。

function ChildService($http) {
    Parent.call(this, $http);
}

ChildService.prototype = new ParentService();
ChildService.prototype.baz = function() {
   return this.$http.get('/sample/rest/call');
}
ChildService.$inject = ['$http'];

然后，我将在相应的角度模块中注册点菜服务：

var app = angular.module('SampleApp', []);
app.service('child', ChildService);

最后，在我的控制器中，我将简单地注入我的服务，该服务将是我的ChildService构造函数的一个实例，该实例又扩展了ParentService构造函数：

app.controller('MainCtrl', ['$scope', 'child', function ($scope, child) {
    child.foo(); //alert("Hello World")
    var promise = child.bar();
}]);

您可以在这里看到一个JSFiddle

在ngConf上，Youtube上还有一个有趣的视频，名为“
编写大规模的Angular应用程序”，其中涵盖了这些主题中的一些以及有关角度代码可重用性的其他一些想法。

2020-07-04