Запуск приложения

Для начала давайте создадим приложение с одним компонентом. Для этого нам понадобятся следующие файлы:

• app/app.component.ts - это наш корневой компонент
• app/app.module.ts - основной(инициализируюший) модуль
• index.html - это страница, в которой компонент будет отображаться.
• app/main.ts - точка входа в приложение.

Если вы предварительно склонили к себе в проект angular2-webpack-starter, а я надеюсь именно так вы и поступили, то эта структура уже готова.

На самом деле, даже больше. Давайте уберем не нужное. app/app.component.ts:

import { Component, ViewEncapsulation } from '@angular/core';

@Component({
  selector: 'app',
  encapsulation: ViewEncapsulation.None,
  styleUrls: [
    './app.component.css'
  ],
  template: `Bootstrap Angular App`
})
export class AppComponent {

}

app/app.module.ts:

import ...

// Application wide providers
const APP_PROVIDERS = [
  ...APP_RESOLVER_PROVIDERS,
  AppState
];

type StoreType = {
  state: InternalStateType,
  restoreInputValues: () => void,
  disposeOldHosts: () => void
};

@NgModule({
  bootstrap: [ AppComponent ],
  declarations: [
    AppComponent,
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpModule,
    //RouterModule.forRoot(ROUTES, { useHash: true, preloadingStrategy: PreloadAllModules })
  ],
  providers: [
    ENV_PROVIDERS,
    APP_PROVIDERS
  ]
})
export class AppModule {
  ...
}

Во время старта приложения загружается main.ts, который является главной точкой входа приложения. AppModule работает как корневой модуль приложения. Модуль настроен на использование AppComponent в качестве компонента для начальной загрузки и будет отображать его на любой странице приложения.

В файле index.html есть <app></app> тег, и мы используем app/main.ts для импорта AppModule в platformBrowserDynamic().bootstrapModule функцию для запуска приложения.

Почему Angular самозагружается таким образом? Ну есть на самом деле очень хорошая причина. Поскольку Angular не является веб-ориентированной средой, мы можем написать компоненты, которые будут работать в NativeScript, или Cordova, или в любой другой среде, в которой могут быть помещены Angular приложения. Волшебство загрузочного процесса в том, что мы можем импортировать ту платформу, которую хотим использовать, в зависимости от среды, в которой работаем. В нашем примере, поскольку мы запускали приложение в браузере, мы использовали загрузчик из @angular/platform-browser-dynamic.

Также неплохо оставить процесс начальной загрузки в отдельном файле main.ts. Это упрощает тестирование(поскольку компоненты изолированы от загрузочной логики), что упрощает повторное использование и дает лучшую организацию и структуру для приложения.