2016-07-23 11 views
0

Ich studiere Angular2 in ES6 JavaScript mit this sample app. Insbesondere versuche ich, die Kette der Abhängigkeiten abzubilden, beginnend mit der JavaScript-Stammdatei für die gesamte App, nämlich boot.js. Kann jemand bitte erklären, was genau wird durch die folgenden drei Zeilen boot.js importiert:Was importieren diese 3 Angular2-Befehle?

import { CORE_PROVIDERS } from './app/core'; 
import { AUTH_PROVIDERS } from './app/auth'; 
import { POSTS_PROVIDERS } from './app/posts'; 

Als ich oben auf die './app/core', './app/auth' und './app/posts' Verzeichnisse im GitHub Link navigieren, es gibt so viele verschachtelte Dateien In diesen Verzeichnissen ist mir nicht klar, was genau in die drei ..._PROVIDERS Variablen durch die obigen drei Befehle übertragen wird. Kann jemand anderes das bitte erklären?

Der vollständige Code für boot.js ist:

import './shim'; 
import 'rxjs/add/operator/map'; 
import { bootstrap } from '@angular/platform-browser-dynamic'; 
import { enableProdMode } from '@angular/core'; 
import { FORM_PROVIDERS, LocationStrategy, HashLocationStrategy } from '@angular/common'; 
import { HTTP_PROVIDERS } from '@angular/http'; 

import { AppComponent } from './app/core/components/app/app.component'; 
import { APP_ROUTES_PROVIDER } from './app/core/app.routes'; 
import { CORE_PROVIDERS } from './app/core'; 
import { AUTH_PROVIDERS } from './app/auth'; 
import { POSTS_PROVIDERS } from './app/posts'; 

if (ENVIRONMENT === 'production') { 
    enableProdMode(); 
} 

bootstrap(AppComponent, [ 
    FORM_PROVIDERS, 
    HTTP_PROVIDERS, 

    APP_ROUTES_PROVIDER, 
    AUTH_PROVIDERS, 
    POSTS_PROVIDERS, 
    CORE_PROVIDERS, 

    { provide: LocationStrategy, useClass: HashLocationStrategy }, 
    { provide: 'ENVIRONMENT', useValue: ENVIRONMENT } 
]); 

Antwort

1

Wenn Sie eine

import { Something } from './one/two'; 

haben es für die Something Kennung aussehen wird, die durch die index Datei im Ordner two exportiert wurde.


In Ihrem Fall, wenn die Datei auf /client/boot.js befindet tut

import { CORE_PROVIDERS } from './app/core'; 
import { AUTH_PROVIDERS } from './app/auth'; 
import { POSTS_PROVIDERS } from './app/posts'; 

Die erste von /client/app/core/index.js für die exportierte CORE_PROVIDERS Kennung sieht, which is:

import { LoggedInGuard } from './guards/logged-in.guard'; 
import { LoggedOutGuard } from './guards/logged-out.guard'; 

export const CORE_PROVIDERS = [LoggedInGuard, LoggedOutGuard]; 

Wie Sie sehen können es "exportiert" lediglich andere Anbieter, die selbst in anderen Dateien vorhanden sind.

Die erste bei /client/app/core/guards/logged-in.guard.js und so weiter.


By the way, diese Verwendung von index Dateien ist eine gute Praxis, auch an der Führungs Angular2 vorgeschlagen Stils unter Create and Import Barrels.

+0

Diese Seite sollte sich um alle Ihre Zweifel kümmern: https://www.typescriptlang.org/docs/handbook/module-resolution.html – acdcjunior

+0

Danke und +1 für die Aufklärung mit einer gründlichen und klaren Antwort. – FirstOfMany

1

*_PROVIDERS Exporte für Angular 2 sind üblich, um mehrere relevante Anbieter unter einer einzigen Konstante zu halten (ein ungefähres Gegenstück zu AngularJS-Modulen).

Dies sind keine Angular 2-Abhängigkeiten, sondern App-Abhängigkeiten. Sie können nacheinander von index file bis nested modules verfolgt werden.