Что такое Angular? (Часть 3)

Как это работает… | Как начать…

Если вы еще не знакомы с Частью 2 этой серии, я рекомендую вам проверить эту ссылку → «Что такое Angular? | Часть 2"

Приступим к созданию проекта Angular?

Откройте файл 👉 app.component.ts в папке src/app и измените заголовок, заменив строку с 'app' на 'Angular App'.

Посмотрите на строку № 9

Вернитесь в командную строку или терминал и запустите:

ng serve

Затем посмотрите на сообщение👇 webpack: Компиляция…

Итак, angular CLI использует инструмент под названием webpack, который представляет собой инструмент автоматизации сборки, он получает все наши скрипты и таблицы стилей, объединяет их в пакет и минимизирует этот пакет, и это для оптимизации.

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

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

Здесь мы можем увидеть еще один пакет, который представляет собой styles.bundle.js, который включает все наши таблицы стилей. Здесь таблицы стилей хранятся в пакете Javascript.

Здесь мы можем увидеть еще один пакет, который представляет собой vendor.bundle.js, который включает все сторонние библиотеки.

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

webpack: Compiled successfully.

Вернитесь в браузер и введите http: // localhost: 4200 /. Изменение кода отобразится в браузере даже без обновления страницы - это функция webpack, которая называется горячей заменой модуля или горячей перезагрузкой модуля, поэтому при каждом изменении исходного файла webpack автоматически обновляет наш браузер.

Вывод👇 Теперь у нас есть новое название Добро пожаловать в приложение Angular! 👏👏

На этой странице вкладки браузера👆 щелкните правой кнопкой мыши и перейдите в Просмотр исходного кода страницы.

Смотри👇

Исходная страница смотрит после нажатия на View Page Source👇

Примечание: у нас нет никаких ссылок на наши таблицы стилей или файл сценария в нашем коде в index.html - wepack автоматически генерирует таблицы стилей и файлы сценария и интегрирует их в index.html динамически во время выполнения (см. выше 👆)

Посмотрите ниже👇 index.html в нашем коде без таблиц стилей и файлов сценариев.

Все пакеты, созданные webpack, также внедрили в index.html - все происходит динамически во время выполнения.

Итак, что у нас есть в этих наборах? 👇👇

👨‍⚖️ Еще раз напоминаю…

Беги 👉 ng serve

Откройте браузер с URL 👉 http://localhost:4200/ - это должно открыть домашнюю страницу нашего приложения Angular.

После этого 👉 Щелкните правой кнопкой мыши по этой странице, затем щелкните «View Page Source» - в новой вкладке откроется ссылка (то есть исходный код страницы) 👉 view-source:http://localhost:4200/

Затем, наконец, найдите styles.bundle.js и щелкните по нему, что снова откроет новую ссылку в новой вкладке 👉 http://localhost:4200/styles.bundle.js - он содержит фактический исходный код styles.bundle.js - этот файл на самом деле имеет код Javascript, и середину этого кода Javascript мы можем найдите стили, используемые в нашем приложении. Смотри👇

⭐️ Здесь важно отметить, что все наши стили скомпилированы в пакет Javascript. И webpack находится позади для автоматического создания этих пакетов по адресу время компиляции. Он также внедрил их в index.html во время выполнения.

Итак, это для этой части - увидимся в следующей части 👋👋

Если вы еще не знакомы с Частью 2 этой серии, я рекомендую вам проверить эту ссылку → «Что такое Angular? | Часть 2"

Далее нажмите здесь👇 для части - 4
https://medium.com/@AnkitMaheshwariIn/angular-template-syntax-directive-interpolation-property-binding-event-binding-part -4-547e2512d8fe

Если вы не против похлопать в ладоши 👏 👏 раз уж это помогло, я буду очень признателен :) Помогите другим найти статью, чтобы она могла им помочь!

Всегда хлопайте в ладоши…