Я изучаю Angular2 в ES6 JavaScript, используя это примерное приложение. В частности, я пытаюсь отобразить цепочку зависимостей, начиная с корневого файла JavaScript для всего приложения, которое является boot.js. Может кто-нибудь объяснить, что именно импортируется следующими тремя строками boot.js
:
import { CORE_PROVIDERS } from './app/core';
import { AUTH_PROVIDERS } from './app/auth';
import { POSTS_PROVIDERS } from './app/posts';
Когда я './app/core'
к './app/core'
, './app/auth'
и './app/posts'
в ссылке GitHub выше, в этих каталогах так много вложенных файлов, что не ясно для меня то, что именно передается в три переменные ..._PROVIDERS
тремя вышеуказанными командами. Может ли кто-нибудь еще объяснить это?
Полный код для boot.js
:
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 }
]);
Когда у вас есть
import { Something } from './one/two';
Он будет искать идентификатор Something
который был экспортирован index
файлом в two
папках.
В вашем случае, когда файл, расположенный в /client/boot.js
,
import { CORE_PROVIDERS } from './app/core';
import { AUTH_PROVIDERS } from './app/auth';
import { POSTS_PROVIDERS } from './app/posts';
Первые из них ищет экспортируемый CORE_PROVIDERS
идентификатор из /client/app/core/index.js
, который является:
import { LoggedInGuard } from './guards/logged-in.guard';
import { LoggedOutGuard } from './guards/logged-out.guard';
export const CORE_PROVIDERS = [LoggedInGuard, LoggedOutGuard];
Как вы можете видеть, он просто "реэкспортирует" других поставщиков, которые сами присутствуют в других файлах.
Первый в /client/app/core/guards/logged-in.guard.js
и т.д.
Кстати, это использование index
файлов является хорошей практикой, также предлагаемой в руководстве по дизайну Angular2 в разделе " Создать и импортировать бочки".
Экспорт *_PROVIDERS
является обычным для Angular 2, чтобы удержать несколько релевантных поставщиков под одной постоянной (приблизительный аналог модулей AngularJS).
Это не зависимости от углов 2, а зависимостей приложений. Их можно отслеживать из индексного файла в вложенные модули по одному.