Angular сегодня, с его 10 версиями, выпущенными с 2010 года, по-прежнему является фиксированной точкой для разработки веб-приложений.
Благодаря раннему выпуску по сравнению с прямыми конкурентами, хорошо сформулированной документации и популярности в 2020 году, которая делает его вторым после React, будущее фреймворка Google, несомненно, будет иметь долгую жизнь.

Однако разработчики очень часто приступают к созданию веб-сайтов с помощью Angular, даже не начав.
По этой причине сегодня мы не будем сосредотачиваться на том, как создать приложение Angular, а подробнее рассмотрим этап начальной загрузки фреймворка.

Файл: main.ts

import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app/app.module';
import { environment } from './environments/environment';
if (environment.production) {
    enableProdMode();
}
platformBrowserDynamic().bootstrapModule(AppModule)
 .catch(err => console.error(err));

Из документации Angular файл main.ts

Точка входа для вашего приложения. Компилирует приложение с помощью JIT-компилятора (или компилятора AOT, добавляя флаг «aot» для команды сборки) и загружает корневой модуль приложения (AppModule) для запуска в браузере.

Поэтому, говоря простым языком, main.ts - это не модуль, а просто импортированный файл сценария из index.html, запускаемый сверху вниз для запуска нашего приложения в браузере.

Именно отсюда определяется корневой модуль, в котором описываются компоненты, службы, поставщики, маршруты и т. Д.

Причина, по которой это называется «основным», чисто условна, поскольку оно может иметь
любое имя, которое хочет разработчик, если вы измените ссылку на файл запуска в angular.json.

Обычно в этом файле проверяется среда, в которой находится приложение (например, производство или разработка).
Это потому, что с помощью функции «enableProdMode ()» Angular будет осознавать среду, в которой вы находитесь, и вести себя иначе.

Конечно, среди наиболее важных вещей, которые Angular выполняет между средой разработки и производственной средой, есть «changeDetection».

Любой, кто какое-то время работал с Angular, знает, насколько серьезна следующая ошибка.

Это происходит потому, что Angular выполняет «обнаружение изменений» для любых изменений, которые произошли в приложении.

Теперь в производственной среде, после проверки всего, Angular отображает изменения в представлениях.
Напротив, в среде разработки он проверяет все, а затем снова проверяет, нет ли несоответствий с ранее проверенными значениями.
Если одно из них изменилось, вот сообщение об ошибке, которое я показал ты выше.

Помимо прочего, «enableProdMode ()», безусловно, снижает активность ведения журнала Angular.
Если в среде разработки, фреймворк выдает предупреждения, такие как очистка URL или классические ошибки Javascript, в производственной среде Angular избавляет нас от всего этого.

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

Файл: angular.json

Файл angular.json отвечает за конфигурацию сборки и разработку проекта.
Среди множества настраиваемых свойств, безусловно, наиболее интересным для нас в данный момент является определение проекта и его запуск. файлы.

Как видно из приведенного выше кода, помимо возможности создания проекта с несколькими рабочими областями, внутри каждого проекта мы указываем путь к основному файлу и путь к индексу, в котором есть корневой каталог приложения «. », который позволяет нам просматривать содержимое файла app.component.html.

AppModule

AppModule - это главный модуль нашего приложения.
Технически это может быть любой модуль проекта, но по соглашению используется AppModule.

Если не разделить на несколько модулей, а затем импортировать в корневой модуль, все компоненты, службы, провайдеры, маршруты и т. Д. Должны быть импортированы сюда.

APP_INITIALIZER

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

Если функция возвращает обещание, то Angular будет ждать, пока обещание не будет выполнено.

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

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

Размышления

Почему Angular загружается таким образом?

На самом деле, для этого есть веская причина.
Поскольку Angular не является веб-фреймворком, но можно писать компоненты, которые работают в Cordova, NativeScript, Ionic и т. Д., Во время процесса начальной загрузки , мы можем импортировать платформу, которую мы предпочитаем, в зависимости от среды, в которой мы находимся.

Фактически, в нашем случае импорт был:

@angular/platform-browser-dynamic.

Выводы

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

Если вам понравилась эта статья, нажмите кнопку 👏 хлопка 50 раз или столько раз, сколько захотите. Не стесняйтесь задавать вопросы, если они у вас есть. Большое спасибо за чтение!