Как создать полностраничный веб-сайт в Angular. Часть 1 (4)

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

Angular

Как создать полностраничный веб-сайт в Angular. Часть 1 (4)

Как создать полностраничный веб-сайт в Angular. Часть 2 (4)

Как создать полностраничный веб-сайт в Angular. Часть 3 (4)

Как создать полностраничный веб-сайт в Angular. Часть 4 (4)

Это первая часть серии о том, как создать полностраничный анимированный веб-сайт в Angular. Мы начнем с создания полностраничного веб-сайта и последующей анимацией в следующем выпуске.

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

Загрузите исходный код, перед тем как идти дальше.

01. Создание проекта

Есть много движущих частей, которые входят в нетривиальное веб-приложение. Какие зависимости имеются у вашего приложения? Как вы собираетесь запускать его локально? Как вы будете его тестировать? Как вы собираетесь упаковывать свои файлы.

К счастью, в @angular/cli все эти сложные процессы решены. Всего несколько команд с терминала и у нас уже полнофункциональное Angular приложение, готовое для работы.

Первым шагом для работы с CLI является его установка. Для этого используйте следующую команду:

После того, как CLI установлен, в командной строке мы можем перейти к папке, в которую мы хотим установить наш проект. Оттуда мы запустим ng new с именем нашего проекта. Как только операции будут завершены, будет создана папка с тем же именем, как в папке в которой мы находимся, куда мы и перейдем.

И это все! Наше Angular приложение готово к запуску. Вы можете запустить приложение с помощью npm start или ng serve. Я предпочитаю использовать npm start, потому что он более общепринятый и позволяет добавлять дополнительные команды. Затем вы можете перейти к http://localhost:4200, чтобы увидеть запущенное приложение.

app-works
Приложение Angular CLI работает

02. Подключение анимации и  Angular Material

Поскольку мы любим красивые вещи, сделаем несколько небольших дополнений к нашему приложению, добавив и установив пакеты @angular/animations и @angular/material:

Cообщим Angular об этих зависимостях добавив их в наш файл app.module.ts. Мы будем использовать кнопки, карту и панель инструментов Angular Material, поэтому мы импортируем их соответствующие модули, а также BrowserAnimationsModule.

Теперь мы можем добавить их в массив imports в объявлении NgModule.

И последнее, мы импортируем тему indigo pink в наш файл styles.css.

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

03. Применение компонентов страницы

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

CLI поставляется с поддержкой генератора прямо из коробки, и это то, что мы используем для создания нашего компонента страницы. Мы можем сгенерировать наш компонент страницы, выполнив приведенную ниже команду (команда g является сокращением для generate).

Примечание: Я рекомендую потратить время, чтобы научиться строить основные Angular элементы вручную, пока у вас не появится мышечная память. Только когда вы действительно разберетесь что происходит, оптимизируйте свой рабочий процесс с помощью генераторов.

CLI создаст папку в каталоге src с именем page с файлами HTML, CSS и Typescript, а также файл спецификации. В файле page.component.ts у нас есть базовая структура компонента. Наш компонент ссылается на наши файлы шаблонов и стилей в метаданных @Component и содержит методы constructor и ngOnInit.

Помимо создания нашего компонента, CLI также модифицирует файл app.module.ts, включив запись PageComponent в массив declarations. Это означает, что наш page component теперь доступен по всему модулю.

Для проверки работоспособности, перейдем в файл app.component.html и добавим в конец <app-page> </ app-page>. Обратите внимание, что тег элемента, который мы используем, соответствует свойству selector, определенному в наших метаданных @Component.

page-works

04. Создание своего компонента страницы

Раз наш page component  жив и здоров, мы можем его оформить, чтобы он выглядел как настоящая веб-страница. Мы введем объект page со свойствами titlesubtitlecontent и image.

page component
Компонент страницы с Angular Material стилизацией

Обновим наш шаблон для привязки (bind) с объектом page. Элемент изображения в конечном итоге будет дополнен, чтобы он заполнял все окно браузера. Мы также добавим компонент Angular Material card, который мы также свяжем (сбиндим) с остальнами частями нашего объекта page.

Наш компонент страницы начинает выглядеть намного лучше! Наш следующий шаг — добавить возможность создания нескольких страниц и перемещаться между ними.

Источник creativebloq.com