Бутстрапирование

Angular, как и многие фреймворки, позволяет быстро начать работу с проектом, этот процесс генерации файлов запуска специфичных для фреймворка проектов называется загрузкой.

начальная загрузка, относится к начальному фрагменту кода, который выполняется при запуске. Самый первый фрагмент кода, запускаемый после запуска, - это то, от чего зависит вся операционная система для правильной работы.

Предпосылки

Основное понимание следующего:

Модули JavaScript и NgModules.

Модуль NgModule описывает, как части приложения сочетаются друг с другом. Каждое приложение имеет как минимум один угловой модуль, корневой модуль, который вы загружаете для запуска приложения. По соглашению он обычно называется AppModule.

Если вы используете Angular CLI для создания приложения, AppModule по умолчанию выглядит следующим образом:

Код TypeScript:

/* JavaScript imports */
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpClientModule } from '@angular/common/http';
import { AppComponent } from './app.component';
/* the AppModule class with the @NgModule decorator */
@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpClientModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Демонстрация в реальном времени:

См. Pen default_app.module.ts от w3resource ( @ w3resource ) в CodePen .

После операторов import идет класс с декоратором @NgModule.

Декоратор @NgModule идентифицирует AppModule как класс NgModule. @NgModule принимает объект метаданных, который сообщает Angular, как скомпилировать и запустить приложение.

• объявления - одинокий компонент этого приложения.
• import - импортируйте BrowserModule, чтобы иметь определенные сервисы браузера, такие как DOM-рендеринг, очистка и расположение.
• провайдеры - поставщики услуг.
• bootstrap - корневой компонент, который Angular создает и вставляет в веб-страницу index.html.

Приложение по умолчанию, созданное Angular CLI, имеет только один компонент, AppComponent, поэтому он находится как в декларациях, так и в массивах начальной загрузки.

Массив объявлений

Вы должны объявить каждый компонент ровно в одном классе NgModule. Если вы используете компонент без объявления его, Angular возвращает сообщение об ошибке.

Массив объявлений принимает только деклараторы. Декларации - это компоненты, директивы и трубы. Все объявления модуля должны быть в массиве объявлений. Декларации должны принадлежать ровно одному модулю. Компилятор выдает ошибку, если вы пытаетесь объявить один и тот же класс более чем в одном модуле.

Эти объявленные классы видимы внутри модуля, но невидимы для компонентов в другом модуле, если они не экспортированы из этого модуля, а другой модуль импортирует этот.

Ниже приведен пример того, что входит в массив объявлений:

declarations: [
  YourComponent,
  YourPipe,
  YourDirective
],

Декларируемый объект может принадлежать только одному модулю, поэтому объявляйте его только в одном @NgModule. Когда вам это понадобится в другом месте, импортируйте модуль, в котором есть декларатор, который вам нужен.

Только ссылки @NgModule попадают в массив импорта.

Использование директив с @NgModule

Используйте массив объявлений для директив. Чтобы использовать директиву, компонент или канал в модуле, вы должны сделать несколько вещей:

• Экспортируйте его из файла, в котором вы его написали.
• Импортируйте его в соответствующий модуль.
• Объявите это в массиве объявлений @NgModule.

Эти три шага выглядят следующим образом. В файле, где вы создаете свою директиву, экспортируйте ее. В следующем примере с именем ItemDirective является структурой директивы по умолчанию, которую CLI создает в своем собственном файле item.directive.ts:

Directive.ts

import { Directive } from '@angular/core';
@Directive({
  selector: '[appItem]'
})
export class ItemDirective {
  constructor() { }
}

Ключевым моментом здесь является то, что вы должны экспортировать его, чтобы вы могли импортировать его в другом месте. Затем импортируйте его в NgModule, в этом примере app.module.ts, с помощью оператора импорта JavaScript:

app.module.ts

import { ItemDirective } from './item.directive';

в том же файле добавьте его в массив объявлений @NgModule:

app.module.ts

declarations: [
  AppComponent,
  ItemDirective
],

Теперь вы можете использовать ItemDirective в компоненте. В этом примере используется AppModule, но вы сделаете то же самое для функционального модуля. Для получения дополнительной информации о директивах см. Директивы атрибутов и Структурные директивы. Вы также использовали бы ту же технику для труб и компонентов.

Массив импорта

Массив импорта модуля отображается исключительно в объекте метаданных @NgModule. Он сообщает Angular о других NgModules, что этот конкретный модуль должен функционировать должным образом.

Этот список модулей экспортирует компоненты, директивы или каналы, на которые ссылаются шаблоны компонентов в этом модуле.

Массив провайдеров

Массив провайдеров - это список служб, которые нужны приложению. Когда вы перечисляете услуги здесь, они доступны для всего приложения. Вы можете использовать их при использовании функциональных модулей и отложенной загрузке.

загрузочный массив

Приложение запускается путем начальной загрузки корневого AppModule, который также называется entryComponent. Помимо прочего, процесс начальной загрузки создает компонент (ы), перечисленные в массиве начальной загрузки, и вставляет каждый из них в DOM браузера.

Каждый загруженный компонент является основой своего собственного дерева компонентов. Вставка загруженного компонента обычно запускает каскад создания компонентов, которые заполняют это дерево.

Предыдущая: Практическое использование
Далее: NgModules