这 3 个 Angular2 命令导入了什么？

Question

我正在使用 this sample app. Specifically, I am trying to map out the chain of dependencies starting at the root JavaScript file for the entire app, which is boot.js 在 ES6 JavaScript 中学习 Angular2。 谁能解释一下 boot.js 的以下三行究竟导入了什么：

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

当我导航到上面 GitHub link 中的 './app/core'、'./app/auth' 和 './app/posts' 目录时，其中有很多嵌套文件那些目录，我不清楚上面三个命令究竟将什么传递给了三个 ..._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 }
]);

Answer 1

当你有

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

它将在 two 文件夹中查找由 index 文件导出的 Something 标识符。

在你的例子中，当位于 /client/boot.js 的文件

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

第一个从 /client/app/core/index.js、which is:

中查找导出的 CORE_PROVIDERS 标识符

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

export const CORE_PROVIDERS = [LoggedInGuard, LoggedOutGuard];

如您所见，它只是 "re-exports" 其他提供者，它们本身存在于其他文件中。

第一个在/client/app/core/guards/logged-in.guard.js等等。

顺便说一下，index 文件的使用是一个很好的做法，在 Create and Import Barrels 下的 Angular2 样式指南中也有建议。

Answer 2

*_PROVIDERS 导出是 Angular 2 的常规做法，用于将多个相关提供程序保持在一个常量下（AngularJS 模块的粗略对应）。

这些不是 Angular 2 依赖项，而是应用程序依赖项。可以从index file to nested modules一一追踪。

这 3 个 Angular2 命令导入了什么？

What are these 3 Angular2 commands importing?

javascript

angularjs

angular2-providers

angular