了解文件结构

让我们开始使用单个组件创建一个空的Angular 应用程序。为此,我们需要以下文件:

  • app/app.component.ts - 这是我们定义根组件的地方
  • app/app.module.ts - 要引导的Angular模块的入口
  • index.html - 这是组件将被呈现的页面
  • app/main.ts - 是将组件和页面组合在一起的胶水

app/app.component.ts

  1. import { Component } from '@angular/core'
  2. @Component({
  3. selector: 'app-root',
  4. template: '<b>Bootstrapping an Angular Application</b>'
  5. })
  6. export class AppComponent { }

index.html

  1. <body>
  2. <app-root>Loading...</app-root>
  3. </body>

app/app.module.ts

  1. import { BrowserModule } from '@angular/platform-browser';
  2. import { NgModule } '@angular/core';
  3. import { AppComponent } from './app.component'
  4. @NgModule({
  5. imports: [BrowserModule],
  6. declarations: [AppComponent],
  7. bootstrap: [AppComponent]
  8. })
  9. export class AppModule {
  10. }

app/main.ts

  1. import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
  2. import { AppModule } from './app.module';
  3. platformBrowserDynamic().bootstrapModule(AppModule);

如果你使用Ahead-of-Time(AoT)编译,你将编写main.ts如下。

  1. import { platformBrowser} from '@angular/platform-browser';
  2. import { AppModuleNgFactory } from '../aot/app/app.module.ngfactory';
  3. platformBrowser().bootstrapModuleFactory(AppModuleNgFactory);

View Example

引导程序进程 main.ts,这是应用程序的主入口点。 AppModule作为我们应用程序的根模块运行。模块被配置为使用AppComponent作为引导的组件,并将在任何遇到的app-rootHTML元素上呈现。

index.html 文件中有一个appHTML元素,我们使用app/main.ts来导入AppModule组件和platformBrowserDynamic().bootstrapModule函数,并启动该进程。如上所示,您可以选择使用AoT,在这种情况下,您将使用工厂,在示例中是AppModuleNgFactorybootstrapModuleFactory

为什么Angular 以这种方式 bootstrap 自身? 那么实际上有一个很好的理由。 由于Angular不是基于Web的框架,我们可以编写将在NativeScript或Cordova或任何其他可以托管Angular应用程序的环境中运行的组件。

然后,神奇的是在我们的引导过程 - 我们可以导入我们想要使用的平台,这取决于我们所处的运行环境。在我们的示例中,由于我们在浏览器中运行Angular 2应用程序,因此我们使用@angular/platform-browser-dynamic中的bootstrapping进程。

这也是一个好主意,将 bootstrapping 程序放在自己单独的main.ts文件中。这使得测试更容易(因为组件与bootstrap 调用隔离),更容易重用,并为我们的应用程序提供更好的组织和结构。

还有更多的关于理解Angular模块和@NgModule的内容将在稍后介绍,但现在这已经足够开始。