Base class extension in Angular service

Question

I have a base class that I would like to extend in the service to help get data in the angular area. I searched the network for a solution, but did not find what I like. I have a base class that is used to access device file systems.

class structure:

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

I would like to be able to extend this class in several different angular services (e.g. offlineCart, offlineCustomLists, ect ...), where each service can use a database to store different types of data. I am looking for the best, most suitable way to do this in angular. In vanilla JavaScript, you can simply do something like this:

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

but I want to do the same with the angular way.

The approach I considered is to use the angular.extend functionality, but I'm not sure if this is appropriate or something like this would be more appropriate:

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

I would like some tips to be right, or if there could be something else, which is better for what I want to achieve. I would also like, or rather, use promises in a lot of this code, since it will be async.

Answer 1

I recently took off this trick.

I'll start by defining a simple JavaScript constructor. This should not be an angular service. What I am doing is that later extension constructors can pass any necessary injections by parameter. So this will be the base “class” of my angular services. This is where I can expose everything I want all angular services to inherit from.

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

Then I will move on to defining a child constructor using prototype inheritance. This constructor will really 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']; 

Then I will start registering the à la carte services in the corresponding angular modules:

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

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

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

Here you can see JSFiddle

There is also an interesting ngConf Youtube video called Writing the angular App Array , which covers some of these topics and a few other ideas about reusing code with angular.

Answer 2

This question was asked, and he answered, 18 months ago. Recently, I went through the same issue on the project. I wanted to have a basic model that I could use to create factories. Angular has a very simple provider that can help with this Value Provider , which Angular implements using Recipe Values .

I'm not sure which version of Angular you could use at that time, but it dates back (AFAIK) to version 1.3.0. (At the time of writing, the current one is stable - 1.4.8)

I also use John Resig Simple Inheritance Script. http://ejohn.org/blog/simple-javascript-inheritance/

Here is a snippet of my code (with the removal of most of the specific application logic).

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

I would also like to hear feedback.

Here's Angular Docs: https://code.angularjs.org/1.3.0/docs/guide/providers