Question

我正在使用this sample app在ES6 JavaScript中学习Angular2。具体来说，我试图从整个应用程序的根JavaScript文件开始映射依赖关系链，即boot.js。 有人可以通过以下三行boot.js 来解释输入的具体内容：

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

当我导航到上面GitHub链接中的'./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';

它将查找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，which is中导出的/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文件是一种很好的做法，也在Create and Import Barrels下的Angular2风格指南中提出。

Answer 2

对于Angular 2来说，

*_PROVIDERS导出是常规的，可以将几个相关的提供者保持在单一常量下（AngularJS模块的粗略对应物）。

这些不是Angular 2依赖项，而是app依赖项。可以逐个跟踪index file到nested modules。

这3个Angular2命令导入的是什么？

2 个答案: