在 Angular 服务中扩展基类 [英] Extending a base class in an Angular service

问题描述

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

I have a base class that I would like to extend in a service to help get data in to the angular scope. I have searched around the net for a solution, but have not found one that I like. I have a base class that is used to access the File systems of devices

类结构:

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 等)中扩展这个类，其中每个服务都能够使用存储库来存储各种不同的数据类型.我正在寻找最好的，最合适的方式来做这个.在 vanilla JavaScript 中，你会做这样的事情:

I would like to be able to extend this class in several different angular services (ie offlineCart, offlineCustomLists, ect...) where each service would be able to use the storage base to store the various different data types. I am looking for the best, most appropriate way to do this in angular. In vanilla JavaScript one would just do something like this:

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

但我想以有角度的方式做同样的事情.

but I want to do this same thing the angular way.

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

The approach I have been considering are to use the angular.extend functionality, but I am not sure this is appropriate or would something like this be a more appropriate approach:

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

如果这些方法是正确的，或者是否有另一种更适合我想要完成的方法，我需要一些建议.我也希望或者更确切地说需要在大部分代码中使用 promise，因为它是异步的.

I would like some advice if theses approaches are correct or if there might be another that is better for what I am wanting to accomplish. I would also like or rather need to use promises in much of this code as it would be async.

推荐答案

我最近完成了这个技巧.

I pulled off this trick recently.

我将首先定义一个普通的 JavaScript 构造函数.这不需要是一个角度服务.我所做的是，稍后，扩展构造函数可以通过参数传递任何必要的注入.所以，这将是我的角度服务的基础类".在这里，我将公开我希望所有 Angular 服务继承的任何内容.

I will start by defining a plain JavaScript constructor. This does not need to be an angular service. What I do is that, later, the extending constructors can pass any necessary injections by parameter. So, this will be the base "class" of my angular services. This is where I would expose anything I want all angular services to inherit.

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

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

然后我将继续使用原型继承定义子构造函数.这个构造函数确实是一个角度服务(你可以通过我最后使用的 $inject 来判断).

Then I will proceed to define a child constructor using prototypal inheritance. This constructor will indeed be an angular service (you can tell by my use of $inject at the end).

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'];

然后我将继续在相应的 angular 模块中注册点菜服务:

Then I will proceed to register the services à la carte in the corresponding angular modules:

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

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

Finally, in my controller I will simply inject my service, which will be an instance of my ChildService constructor, which in turn extends my ParentService constructor:

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

你可以在这里看到一个 JSFiddle

在 Youtube 上还有一个来自 ngConf 的有趣视频，名为 Writing A Massive Angular App其中涵盖了其中的一些主题以及有关使用 angular 进行代码可重用性的一些其他想法.

Also there is an interesting video in Youtube from ngConf called Writing A Massive Angular App which covers some of these topics and a few other ideas on code reusability with angular.

这篇关于在 Angular 服务中扩展基类的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！