2015-03-12 18 views
14

Sfondo, l'attuale implementazione di classi/moduli nella nostra app è classi common.js e CoffeeScript. Sto cercando disperatamente una soluzione per lavorare con ES6 o TypeScript, ma il problema rimane.Angular.js DI con classi (ES6) ed ereditarietà

Come eseguire DI con l'ereditarietà di classe utilizzando Angular-1.x?

dato il codice:

// SuperService.js 
class SuperService { 
    constructor($http, $q, $etc) { 
    // Implementation is not important ... 
    } 
} 
export { SubService } 

// SubService.js 
import { SuperService } from './SuperService'; 
class SubService extends SuperService { 
    constructor($more, $di, $things, $here) { 
    // Implementation is not important ... 
    // // // // // // // // // // 
    // Problem exists here ... // 
    // // // // // // // // // // 
    super($we, $need, $all, $the, $super, \ 
      $class, $di, $things, $every, $time, $we, \ 
      $inherit, $from, $it) 
    } 
} 
export { SubService } 

Must uno, nel SubService qui ridefinire tutti i requisiti genitore di a fine di chiamare con successo super()?

Stiamo attualmente facendo qualcosa di simile a quanto segue:

// CoffeeScript        // Javascript 
app.factory "subService", (Service) ->  app.factory("subService", function(Service) { 
    SubService =() ->       var SubService; 
    Service.call(@)       SubService = function() { 
    @           Service.call(this); 
               return this; 
    # Overwrite some stuff on the "Service"  }; 
    Service::basepath = "/environments"   Service.prototype.basepath = "/environments"; 
    Service::model = Environment     Service.prototype.model = Environment; 
               return new SubService(); 
    new SubService()       }); 

che è anche meno che ideale, oltre ad essere brutto.

+0

Hai mai trovare una soluzione al Questo? Ci stiamo anche avvicinando in modo simile, ma ci deve essere un modo migliore. – forrestranger

+1

Proprio per questo motivo, il mio team non ha ancora effettuato il passaggio a ES6 per le nostre cose angolari, speriamo che questo in qualche modo venga risolto nella mossa dattiloscritta in ng-2.0, ma non stiamo vedendo nulla che risolva questo ancora. –

+0

Come in molti altri luoghi, in AngularJS penso sia più facile e più leggibile usare la composizione sull'ereditarietà. – Thomas

risposta

2

non è ES6 (è ES7), ma potrebbe galleggiare la vostra barca

Vorrei guardare in angular-decorators da MikeRyan52.

Ha messo insieme un @inject decoratore che funziona come segue:

@inject('$http', '$rootScope') 
class SomeClass { 
    constructor($http, $rootScope) { 

    } 
} 

@inject('$q') 
class SubClass extends SomeClass { 
    constructor($q, ...parentDependencies) { /** parent dependencies caught with a rest parameter **/ 
    super(...parentDependencies); 
    } 
} 

the implementation of @inject

+0

fantastico, grazie per il suggerimento, penso che quando si avvia il backporting delle funzioni di angular2 a quello angolare, potrebbe essere meglio investire il tempo per aggiornare :) ma comunque, fantastico vedere una dimostrazione del concetto e avere una scelta. –

0

aggiungere questo al fondo di SubService.js

SubService.$inject = ['$http', '$q', '$etc', '$more', '$di', '$things', '$here'];