Следуйте этим простым шагам, чтобы создать полнофункциональный веб-сайт, используя Angular.
Как создать полностраничный веб-сайт в Angular. Часть 1 (4)
Как создать полностраничный веб-сайт в Angular. Часть 2 (4)
Как создать полностраничный веб-сайт в Angular. Часть 3 (4)
Как создать полностраничный веб-сайт в Angular. Часть 4 (4)
Это первая часть серии о том, как создать полностраничный анимированный веб-сайт в Angular. Мы начнем с создания полностраничного веб-сайта и последующей анимацией в следующем выпуске.
В этом уроке мы сосредоточимся прежде всего на Angular части и не будем говорить о части HTML и CSS, которые напрямую не связаны с конструкцией приложения.
Загрузите исходный код, перед тем как идти дальше.
01. Создание проекта
Есть много движущих частей, которые входят в нетривиальное веб-приложение. Какие зависимости имеются у вашего приложения? Как вы собираетесь запускать его локально? Как вы будете его тестировать? Как вы собираетесь упаковывать свои файлы.
К счастью, в @angular/cli все эти сложные процессы решены. Всего несколько команд с терминала и у нас уже полнофункциональное Angular приложение, готовое для работы.
Первым шагом для работы с CLI является его установка. Для этого используйте следующую команду:
|
1 |
npm install -g @angular/cli |
После того, как CLI установлен, в командной строке мы можем перейти к папке, в которую мы хотим установить наш проект. Оттуда мы запустим ng new с именем нашего проекта. Как только операции будут завершены, будет создана папка с тем же именем, как в папке в которой мы находимся, куда мы и перейдем.
|
1 2 3 |
cd <your-projects-folder> ng new angular-animations-site cd angular-animations-site |
И это все! Наше Angular приложение готово к запуску. Вы можете запустить приложение с помощью npm start или ng serve. Я предпочитаю использовать npm start, потому что он более общепринятый и позволяет добавлять дополнительные команды. Затем вы можете перейти к http://localhost:4200, чтобы увидеть запущенное приложение.
02. Подключение анимации и Angular Material
Поскольку мы любим красивые вещи, сделаем несколько небольших дополнений к нашему приложению, добавив и установив пакеты @angular/animations и @angular/material:
|
1 |
npm i --save @angular/material @angular/animations |
Cообщим Angular об этих зависимостях добавив их в наш файл app.module.ts. Мы будем использовать кнопки, карту и панель инструментов Angular Material, поэтому мы импортируем их соответствующие модули, а также BrowserAnimationsModule.
|
1 2 3 4 |
// app/app.module.ts ... import { MdButtonModule, MdCardModule, MdToolbarModule } from '@angular/material'; import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; |
Теперь мы можем добавить их в массив imports в объявлении NgModule.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
// app/app.module.ts ... import { MdButtonModule, MdCardModule, MdToolbarModule } from '@angular/material'; import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; @NgModule({ ... imports: [ ... BrowserAnimationsModule, MdToolbarModule, MdButtonModule, MdCardModule ], ... }) |
И последнее, мы импортируем тему indigo pink в наш файл styles.css.
|
1 2 |
/* styles.css */ @import '~@angular/material/prebuilt-themes/indigo-pink.css'; |
До этого момента мы занимались настройкой приложения, чтобы мы могли начать разработку. Сначала эти команды могут казаться неуклюжими, но как только вы привыкнете к ним, вы будете тратить всего пару минут, чтобы иметь полностью развитую среду для создания веб-сайтов.
03. Применение компонентов страницы
Поскольку мы создаем веб-сайт с Angular, нам нужно будет применить механизм для отображения наших страниц. В Angular компонент является простейшим строительным блоком приложения. Благодаря архитектуре нашего приложения с четко определенными инкапсулированными компонентами мы можем повторно использовать существующую функциональность, а также создавать новые функции, внедряя новые компоненты.
CLI поставляется с поддержкой генератора прямо из коробки, и это то, что мы используем для создания нашего компонента страницы. Мы можем сгенерировать наш компонент страницы, выполнив приведенную ниже команду (команда g является сокращением для generate).
|
1 |
ng g component page |
Примечание: Я рекомендую потратить время, чтобы научиться строить основные Angular элементы вручную, пока у вас не появится мышечная память. Только когда вы действительно разберетесь что происходит, оптимизируйте свой рабочий процесс с помощью генераторов.
CLI создаст папку в каталоге src с именем page с файлами HTML, CSS и Typescript, а также файл спецификации. В файле page.component.ts у нас есть базовая структура компонента. Наш компонент ссылается на наши файлы шаблонов и стилей в метаданных @Component и содержит методы constructor и ngOnInit.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
// app/page/page.component.ts import { Component, OnInit } from '@angular/core'; @Component({ selector: 'app-page', templateUrl: './page.component.html', styleUrls: ['./page.component.css'] }) export class PageComponent implements OnInit { constructor() { } ngOnInit() { } } |
Помимо создания нашего компонента, CLI также модифицирует файл app.module.ts, включив запись PageComponent в массив declarations. Это означает, что наш page component теперь доступен по всему модулю.
|
1 2 3 4 5 6 7 8 9 |
// app/app.module.ts @NgModule({ declarations: [ AppComponent, PageComponent ], ... }) |
Для проверки работоспособности, перейдем в файл app.component.html и добавим в конец <app-page> </ app-page>. Обратите внимание, что тег элемента, который мы используем, соответствует свойству selector, определенному в наших метаданных @Component.
|
1 2 3 4 5 6 7 |
<!-- app/app.component.html --> <h1> {{title}} </h1> <app-page></app-page> |
04. Создание своего компонента страницы
Раз наш page component жив и здоров, мы можем его оформить, чтобы он выглядел как настоящая веб-страница. Мы введем объект page со свойствами title, subtitle, content и image.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
// app/page/page.component.ts export class PageComponent implements OnInit { page = { title: 'Home', subtitle: 'Welcome Home!', content: 'Some home content.', image: 'assets/bg00.jpg' }; constructor() { } ngOnInit() { } } |
Обновим наш шаблон для привязки (bind) с объектом page. Элемент изображения в конечном итоге будет дополнен, чтобы он заполнял все окно браузера. Мы также добавим компонент Angular Material card, который мы также свяжем (сбиндим) с остальнами частями нашего объекта page.
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<!-- app/page/page.component.html --> <img class="fullBg" [src]="page.image"> <md-card> <md-card-header> <md-card-title><h1>{{page.title}}</h1></md-card-title> <md-card-subtitle>{{page.subtitle}}</md-card-subtitle> </md-card-header> <md-card-content> {{page.content}} </md-card-content> </md-card> |
Наш компонент страницы начинает выглядеть намного лучше! Наш следующий шаг — добавить возможность создания нескольких страниц и перемещаться между ними.
Источник creativebloq.com
