caldo per evitare di dichiarare tutti i servizi nella funzione di bootstrap()

Question

Quindi in base alla mia domanda precedente: Angular2 "Services" how to @inject one service into another (singletons)

per il quale ho una risposta ora una nuova domanda aggiornato su di me. E questo è dovuto al fatto che finora, ovunque guardo, tutti i servizi sono inclusi nel metodo bootstrap. Cose come il post sul blog di Pascal Precht indicano anche questo: http://blog.thoughtram.io/angular/2015/09/17/resolve-service-dependencies-in-angular-2.html

Ma per me questo si presenta (rispetto a Angular1) come codifica davvero brutta. Per far sì che funzioni in questi casi, dovrei includere tutti i miei servizi all'interno del componente dell'app (modulo di configurazione di Angular1). Mentre la forza dovrebbe venire dall'avere che ogni "Modulo" di Classe si prende cura di ottenere le proprie dipendenze (fornitori) che sono singleton in tutta l'applicazione.

Ora la mia domanda è:

E 'possibile avere classi specificare le proprie dipendenze, mentre la dipendenza rimane un Singleton per tutte le altre classi che richiedono lo stesso pure. Qualcosa di simile:

app.ts

@Component({ 
    selector: 'app', 
    providers: [ 
    TeamCollection 
    ] 
}) 
@View({ 
    template: '{{name}}' 
}) 
class TestApp { 
    name: string; 
    teamCollection: TeamCollection; 
    constructor(@Inject(TeamCollection) teamCollection: TeamCollection){ 
    this.name = 'Angular2'; 
    this.teamCollection = teamCollection; 
    } 
} 

export function main() { 
    bootstrap(TestApp); 
} 

team.ts

@Injectable() 
export class TeamCollection extends BaseCollection { 
    playerCollection: PlayerCollection; 
    constructor(playerCollection: PlayerCollection) { 
     super(); 
     this.playerCollection = playerCollection; 
    } 

    create(data: Object): TeamModel { 
     return new TeamModel(data); 
    } 
} 

player.ts

@Injectable() 
export class PlayerCollection extends BaseCollection { 
    create(data: Object): PlayerModel { 
     return new PlayerModel(data); 
    } 
} 

Senza avermi Entrambi includono il TeamCollection e la PlayerCollection all'interno dei fornitori array del componente dell'app. E invece di avere la raccolta Teamcollection iniettare un'istanza Singleton PlayerCollection nel suo costruttore al momento della creazione dell'istanza Singleton di TeamCollection attraverso l'array di provider del componente App.

Per me che si sente veramente fuori, ma se questo è il modo di Angular2 farò solo imparare ad adattarsi ad esso.

Modifica: Ho voluto spiegarlo ulteriormente illustrando il fatto che se voglio un servizio condiviso da tutti i componenti all'interno dell'applicazione devo aggiungerlo al metodo bootstrap. Quale in un progetto che in precedenza aveva forse più di 50 servizi diventa incredibilmente brutto (se deve essere tutto nella funzione bootstrap).

Un'altra cosa: Sarebbe veramente incoerente e vedendo il @RouteConfig è qualcosa che sembra nelle sottoclassi quando si specifica un percorso come abc/... Significato ABC componente può avere un proprio @RouteConfig ecc che è un grande modifica rispetto a Angular1 in cui abbiamo dovuto specificare tutto all'interno di config().

Edit2: See @alexpods commento: https://github.com/angular/angular/issues/5063#issuecomment-154753852

E @EricMartinez commento qui sotto. Per vedere il modo corretto di gestire la modularità in angular2.

Answer 1

@RouteConfig non viene utilizzato su RC4 più non ti preoccupare.

per i vostri servizi, che dire una cosa del genere

export const YOUR_SERVICES_PROVIDERS = [ 
    provide(Service1, {useClass: Service1}), 
    provide(Service2, {useClass: Service2}), 
    provide(Service3, {useClass: Service3}), 
    provide(Service4, {useClass: Service4}), 
    provide(Service50, {useClass: Service50}) 
]; 

e poi sul boostrap: saranno disponibili

bootstrap(App, [ 
...YOUR_SERVICES_PROVIDERS 
]); 

Tutti i tuoi servizi in tutta l'applicazione.

Answer 2

È possibile esportare i servizi come un unico token e fornire il ritiro presso bootstrap() come

a.js

export const MODULE_A: any[] = [Service1, Service2, Service3]; 

b.js

export const MODULE_B: any[] = [Service3, Service4, Service5]; 

c .js

import {MODULE_A} from 'a.js';  
import {MODULE_B} from 'b.js'; 

export const MODULE_C: any[] = [MODULE_A, Module_B, Service6]; 

main.js

import {MODULE_C} from 'c.js'; 

bootstrap(AppComponent, [MODULE_C]; 

Questa è una pratica comune in Angular2, come ROUTER_PROVIDERS, MD_CARD_PROVIDERS, ...