Question

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

班级结构：

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中，人们会做这样的事情：

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;
}]);

如果这些方法是正确的，或者可能有另一种方法对我想要完成的方法更好，我想提供一些建议。我还想或者更需要在大部分代码中使用promises，因为它会是异步的。

Answer 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 here

还有来自ngConf的Youtube中有一个名为Writing A Massive Angular App的有趣视频，其中涵盖了一些主题以及一些关于角度代码可重用性的其他想法。

Answer 2

这个问题在18个月前被问到并回答了。我最近在一个项目上遇到了同样的问题。我希望定义一个基本模型，我可以用它来构建工厂。 Angular有一个非常简单的提供商来协助这个叫做 Value Provider 的提供商，Angular使用 Value Recipe 来实现。

我不确定您当时使用的是什么版本的Angular，但这可以追溯到（AFAIK）版本1.3.0。（截至本文撰写时，当前稳定值为1.4.8）

我也在使用John Resig的Simple Inheritance Script. http://ejohn.org/blog/simple-javascript-inheritance/

这是我的代码片段（删除了大部分特定于应用程序的逻辑）。

var MyApp = angular.module( 'MyApp',['ngResource','ngAnimate','ngSanitize'] );

/* ==================================================================================== */
// -   Base Model Class   -------------------------------------------------------------
/* ==================================================================================== */

MyApp

/**
 * BaseModel - Value Provider
 * 
 */
.value( 'BaseModel',Class.extend({

    attribs: {},

    init: function(){

        var self = this;

        _active = true;

        _new = true;

        _origs = {};

        _loadByObject = function( obj ){ ... }
    },

    get: function( key ){ ... },
    set: function( key,val ){ ... },

    isNew: function(){ ... },
    keep: function(){ ... },
    remove: function(){ ... },

    load: function( obj ){ ... }
    verify: function(){ ... },      
    save: function(){ ... },

}))

.factory( 'UserFactory', 
    [ '$http', '$q', 'BaseModel', 
    function( $http, $q, BaseModel ){

    var UserFactory = BaseModel.extend({

        init: function(){

            this._super( false );

            _fields = [
                'first', 'last', 'email', 
                'phone', 'password', 'role'
            ];

            _permitted = [
                'first', 'last', 'email', 
                'phone', 'password', 'role'
            ];

            _required = [
                'first', 'last', 'email', 'role'
            ];

            _resource = "users";

            _api = "users";

        }

    });

    return UserFactory;

}])

我也很乐意听到任何人的反馈。

这是Angular 文档： https://code.angularjs.org/1.3.0/docs/guide/providers

扩展Angular服务中的基类

2 个答案: