Для новичков в Angular 2+ (теперь называемых просто Angular) борьба всегда связана с радикальным изменением структуры, с которой они уже знакомы в AngularJS. А для тех, кто никогда не видел AngularJS, но начал свое путешествие по Angular с новым ребенком на блоке, тот факт, что Angular включает процесс начальной загрузки, может послать довольно неприятный, но довольно ошибочный тон, что Angular просто решил быть белой вороной среди своих аналогов. (как будто одоления машинописного текста было недостаточно).
Однако эти заблуждения возникают только тогда, когда вы не полностью понимаете внутреннюю работу Angular. Когда вы полностью поймете это, вы поймете и начнете ценить его структуру, и вместо того, чтобы видеть, что он «сложен», вы увидите его как высокоорганизованный.
В этой короткой статье (одна из многих, посвященных демистификации структуры Angular) я расскажу о процессе начальной загрузки Angular, проще говоря, о том, как запускается приложение angular.
Тогда точкой входа в каждое приложение Angular является файл main.ts, который содержит эту последнюю строку:
Часть platformBrowserDynamic() этой строки кода указывает, что мы собираемся загрузить Angular в среде браузера. Поскольку Angular может использоваться в средах хоста Javascript помимо браузера (например, на сервере или в веб-воркере), поэтому обязательно указать среду, в которой должно быть загружено наше приложение.
Функция bootstrapModule() помогает запустить наш корневой модуль, принимая корневой модуль в качестве аргумента.
AppModule - это наш корневой модуль, который является модулем входа для нашего приложения, на самом деле это может быть любой из модулей в нашем приложении, но по соглашению AppModule используется в качестве корневого модуля.
Затем в нашем AppModule нам нужно указать компонент, который будет служить компонентом точки входа для нашего приложения. Это происходит в нашем app.module.ts файле, где мы импортируем компонент ввода (обычно AppComponent) и предоставляем его как единственный элемент в нашем bootstrap array внутри объекта NgModule configuration.
На этом процесс загрузки Angular завершен. Резюме шагов
- Укажите среду, в которой работает ваше приложение Angular
- Используйте функцию
bootstrapModule()для загрузки модуля ввода, указав модуль в качестве аргумента. - Внутри корневого модуля укажите компонент точки входа в объекте конфигурации модуля.
Теперь это не выглядит сложным :).
