От AngularJS до Angular 7 и других... мой личный путь ❤️☕️
С возвращением 👋
Это продолжение многих историй, которые начались с этого первого поста на Medium.
Думаю, пора мне приступить к моему проекту aWe Motors. Начнем с создания простой страницы приветствия. На данный момент ничего особенного, но должно быть следующее:
Предпосылка
Я начинаю эту историю, предполагая, что все настроено для разработки с помощью Angular и создан первоначальный проект. Если вам нужно освежить в памяти, вы всегда можете прочитать мой рассказ Начало работы.
Давайте делиться
Первое, что я хочу сделать, это убедиться, что файл app.module.ts достаточно компактен. Для этого я предпочитаю разделять модули, которые, как я знаю, будут использоваться во всем приложении, в отдельный файл shared.module.ts.
Я знаю, что все мое приложение будет использовать основные директивы и каналы Angular, такие как NgIf, NgForOf, DecimalPipe и т. д. Мы получаем эту функциональность от CommonModule. Я также хочу, чтобы мои страницы использовали FlexLayout, и большинству из них потребуется доступ к FormsModule. Прикрепленная навигация также будет общей для всех моих страниц, поэтому давайте добавим ее в наш каталог shared/components:
К вашему сведению, есть также файл nav.component.css, но в настоящее время он пуст.
В нашем shared.module.ts мы могли бы импортировать наши компоненты Angular Material, но мне нравится хранить их отдельно в отдельном модуле с именем shared-material.module.ts.
Давайте свяжем все это вместе в файле shared.module.ts:
Импорт, Декларации, Экспорт… Почему?
NavComponent использует FlexLayout, MatToolbar, MatIcon и, возможно, NgIf / NgForOf, поэтому мы хотим включить CommonModule, SharedMaterialModule и FlexLayoutModule в наш импорт.
Поскольку NavComponent принадлежит этому модулю, мы также должны поместить его в объявления.
Мы хотим, чтобы эти модули были доступны для новых компонентов. Вот почему мы включили их в экспорт. Делая это, новые компоненты могут получить к ним доступ, просто импортировав наш SharedModule.
Страницы/компоненты
Наша конечная цель — создать страницу приветствия, но я хочу сначала создать другие компоненты (шапку, основную часть, нижний колонтитул). Внутри моей папки app я создам папку pages, внутри которой нам нужно создать нашу папку welcome. Давайте начнем с этого header, поэтому создайте папку под welcome с именем header.
Заголовок
Внутри нашей папки header мы можем сначала создать файл header.component.ts:
Для HTML мы хотим включить навигацию, раздел с заголовком/маленьким абзацем описания и фоновое изображение того прекрасного Scion FRS, которое было снято Erik Mclean.
Помните, что наша навигация — это общий компонент, поэтому мы хотим включить его с помощью селектора app-nav.
Для CSS я хочу включить нашу фотографию FRS и придать ей линейный градиент 50%. У меня также есть стили для элементов ‹section›, ‹h1›, ‹p› и несколько медиа-запросов для настройки размера и высоты шрифта. , ширина на небольших устройствах. Одним из примеров является то, что абзац раздела занимает 50% ширины, но на небольших устройствах занимает 100%.
Поскольку мы используем FlexLayout, я обязательно следую рекомендациям по медиа-запросам, которые они установили. Документацию можно найти здесь.
Я решил не углубляться в объяснение CSS, но если у кого-то есть комментарии или вы хотите узнать больше, просто дайте мне знать 😃
Главный
Теперь мы можем работать с основным разделом, поэтому создайте папку под приветствием с именем main. Внутри этой папки давайте создадим наш main.component.ts:
HTML будет состоять из нашего изображения разработки справа и деталей этого проекта слева.
Когда они отображаются на экране, таком как планшет или меньше, мы хотели бы, чтобы изображение / детали изгибались на 100% и отображали детали под изображением. Эта функциональность достигается с помощью FlexLayout (fxFlex.lt-md="100), но в приведенном ниже CSS вы можете увидеть, как мы также изменили некоторые отступы на основе медиа-запросов.
Нижний колонтитул
Нижний колонтитул будет включен в нижнюю часть наших страниц, так что вы можете догадаться, где мы хотим его разместить? Мы создадим папку footer внутри нашего каталога shared/components.
Добро пожаловать
У нас есть части для создания нашей первой страницы… теперь нам нужно собрать их все вместе. Сначала давайте создадим файл welcome.component.ts:
Я также хочу подготовить страницу для отложенной загрузки и импортировать различные компоненты (SharedModule, FooterComponent, HeaderComponent, MainComponent, WelcomeComponent), поэтому давайте создадим наш welcome.module.ts :
Чтобы лениво загрузить наш корневой маршрут для приветствия, мы должны помнить об использовании RouterModule.forChild вместо RouterModule.forRoot.
Наши компоненты селектора доступны для нашего шаблона 👍. Теперь нам нужно определить HTML-макет… искомый порядок: верхний колонтитул, главный и нижний колонтитул.
Нам не нужно беспокоиться о навигации, поскольку мы включили ее в наш компонент заголовка.
Отложенная загрузка маршрута
Когда кто-то заходит в наш корневой каталог, мы хотим загрузить нашу страницу приветствия, но мы также хотим добиться отложенной загрузки.
Обычный маршрут будет выглядеть примерно так:
const routes: Routes = [
{ path: 'welcome', component: WelcomeComponent }
];
Все наши компоненты, связанные с WelcomeComponent, также должны быть импортированы в наш app-routing.module.ts… Я надеюсь, вы понимаете, что как только вы начнете добавлять больше маршрутов, этим файлом станет довольно сложно управлять.
Мы использовали welcome.module.ts, чтобы сделать за нас тяжелую работу и загрузить эти компоненты только тогда, когда это необходимо. Нам просто нужно настроить наши маршруты, чтобы использовать свойство loadChildren и указать его на наш WelcomeModule.
Ленивая загрузка помогает уменьшить начальные размеры пакетов, что, в свою очередь, помогает сократить время загрузки. Мы увидим больше примеров этого по мере расширения нашего проекта, но я решил познакомить вас с этим мышлением на раннем этапе.
Теперь у нас должна быть заполненная страница приветствия! 👏
Филиал репозитория
Вывод
Спасибо, что нашли время, чтобы прочитать мои истории, и если вы подписчик, я невероятно благодарен ❤️.
Если вам понравилась эта статья, пожалуйста, поаплодируйте 👏!
Если я что-то упустил или у вас есть комментарии, проблемы или советы, пожалуйста, не стесняйтесь обращаться ко мне.
