Что такое angular material
Angular 5 Material для начинающих
Данный материал посвящен изучению Angular 5 Material. В примере будет использоваться именно пятая версия, потому что с новыми релизами появляются все новые и новые возможности в фреймворке. Так, например, переход с AngularJS на Angular 2 ознаменовался полной переработкой всего фреймворка.
Начало работы с Angular 5 Material
Для начала необходимо установить Angular CLI глобально во всей системе. Для этого нужно выполнить следующую команду:
Также вы можете ознакомиться с полной документацией по установке на сайте разработчиков.
Создание проекта
В командной строке выполните следующую команду:
С её помощью мы создадим новый проект. Все нужные компоненты приложения будут сгенерированы автоматически.
Установка Angular Material и Angular CDK
В командной строке введите команду для установки компонентов и их зависимостей:
Установка модуля Animations
Для работы с Angular Material нужно установить модуль Animations:
Теперь надо импортировать модули в файле app.module.ts :
Затем нужно добавить новый модуль, который будет отвечать за Angular Material Components. Для этого создется файл в src/app с именем ngmaterial.module.ts :
Теперь модуль MatButtonModule добавлен в приложение. Далее надо
зарегистрировать MaterialAppModule в app.module.ts :
Подключение тем оформления
Для корректной работы тем оформления требуется подключение всех стилей темы глобально в приложении.
Для примера будем использовать заранее подготовленную тему Angular Material Indigo-Pink. Подключим ее в приложение, добавив следующую строку в style.css :
Также подключим поддержку иконок в стиле material. Для этого добавим следующую строку в index.html :
Поддержка жестов
Это можно сделать несколькими способами: через npm, с использованием CDN (например Google CDN) или же напрямую из приложения.
После установки импортируем компонент в наше приложение, добавив следующие строки в src/main.ts :
Теперь, когда все модули подключены, добавим новый элемент в app.component.html :
Удалим лишний HTML-код и запустим приложение следующей командой:
Теперь приложение запущено и доступно по ссылке http://localhost:4200.
Если всё сделано правильно, то на странице отобразится кнопка, при нажатии на которую будет воспроизводиться анимация.
Добавление новых элементов интерфейса
На примере ToolBar разберемся, как добавлять новые элементы интерфейса в приложение. Для этого добавим следующие строки в app.component.html :
Также пропишем следующие строки и в ngmaterial.module.ts :
Таким образом мы добавили ToolBar в приложение.
Заключение
Мы рассмотрели построение простейших интерфейсов на Angular 5 Material. Если вы только начали знакомство с frontend, то вам стоит обратить внимание на наш материал для начинающих разработчиков.
Material Design и AngularJS
Ни для кого не секрет, что Google повсюду в своих продуктах внедряет так называемый material design. Как и любой другой стиль он имеет сторонников и противников. Не буду касаться этих споров. Если вам нравится данный подход, Google подготовил полную спецификацию и описание особенностей: Material Design.
Для любителей angularjs появилась библиотека с набором директив, реализующих графические компоненты и позволяющих создавать разметку в соответствии с принципами material design. О ней и пойдет рассказ.
Я постараюсь кратко показать некоторые особенности и недостатки, а также покажу небольшое приложение для демонстрации.
Что мы имеем?
1. Готовые компоненты:
Множество готовых angularjs директив для различных компонентов: кнопок, переключателей, вкладок. Все перечислять не буду, все это хорошо освещено в документации, покажу лишь основной принцип:
Вам нужна круглая кнопка?
Используем готовую директиву, т.е. пишем:
Если нужно добавить всплывающую подсказку, тоже все предусмотрено:
Все это удобным образом связывается с данными:
Удобно? Конечно. Но только когда вам достаточно стандартных опций, которых не так уж и много. Заходите сделать какую-то особенность — и сразу все плюсы теряются.
Для того, чтобы создавать адаптивную разметку, предусмотрено почти все необходимое. Вы можете создавать колонки, строки, вкладывать эти элементы друг в друга. Можно указывать как отображаться элемента при разных размерах экранов, все это реализовано вполне удобно. Рекомендую ознакомиться с примерами.
Еще одна особенность — возможность описывать темы. Темы можно менять динамически с помощью директив или в контроллере. Изначально темы уже описаны для всех основных цветов используемых в Material Design. Подробнее.
Пример приложения
Лучший способ понять преимущества и недостатки чего-либо — использовать это. Я сделал небольшой демонстрационный проект. Это небольшое приложение, здесь я не использовал удаленный REST сервис [соответственно, вносимые изменения нигде не отобразятся], чтобы сосредоточиться непосредственно на angularjs и возможностях material-angular.
Я сделаю простой редактор, в котором можно, нажав на плавающую кнопку, добавить задание, выбрав которые можно отметить, после чего они будут перенесены в архив.
live demo
проект на github
Для начала создадим angular проект на базе angular-seed. Здесь я не буду рассказывать про ngRroute и ngView, кто работал с angularjs — это знают (если не знакомы с angularjs, прошу сюда).
Нам понадобится верхний toolbox:
Для этих целей предусмотрен соответствующий элемент:
Также нужно сделать слева выдвижное меню, для этого тоже все предусмотрено:
Для управления открытием можем использовать следующий код:
Таким образом, мы получили основной каркас. Теперь наполнение — это часть, которая будет изменятся при переходе между страницами. Наш view, в котором я буду отображать список задач:
Можно либо сразу отметить задачу как выполненную, либо при наведении на кружок появляется checkbox и мы можем отметить несколько записей одновременно, после выделения хотя бы одной записи верхний toolbox меняет свой вид. Поскольку основной toolbox находится не во view, то было принято решение просто выводить другой toolbox поверх заданного в каркасе.
Добавление новых элементов. Было принято решение вызывать диалоговое окно, в котором можно задать параметры.
Тут я поясню некоторую особенность, которая позволяет очень гибко управлять окнами. Данным фреймворком можно создавать как простые окна, так и сложные: для этого создается отдельная html страница, которая является шаблоном для модального окна.
При создании своего окна для управления создается контроллер, который будет обрабатывать и передавать данные из окна.
Код контроллера управляющего окном:
Тогда само окно может вызываться в коде следующим образом:
Я не стал подробно описывать как все реализовано, чтобы не нагромождать кучей довольно простого кода, только выделил моменты, касающиеся material angular. Все остальное вы можете посмотреть на github.
Впечатления и выводы
Изначально я подумал, что появилась замечательная возможность разрабатывать angular приложения с material design, однако немного поработав могу однозначно сказать: использовать еще рано (на момент написания версия 0.6). Содержится множество мелких багов, некоторые элементы отображаются по-разному в различных браузерах и постоянно приходится подстраивать стили вручную.
На данный момент множество проблем с отображением в различных браузерах. Проблем много (столкнулся при написании демонстрационного проекта), покажу только несколько (это примеры с официального сайта проекта, открытые в разных браузерах).
(Google Chrome):
(Internent Exprorer 11):
(Google Chrome):
(Internent Exprorer 11):
Дальше показывать косяки, думаю, не имеет смысла, они есть, и их много, а это значит, что вам придется вручную все поправлять.
Пока сложно сказать, как скоро будут исправлены недостатки, но на данном этапе для использования angular material явно не готов.
Знакомимся с основами Angular через создание простого приложения
Готовы сегодня создать что-нибудь интересное? Я тоже!
На данный момент я тружусь в роли Angular-разработчика, создавая для сотрудников нашей компании инструменты, которые помогают им более эффективно и комфортно решать насущные задачи. Работать с Angular я начала только в мае 2020, но ввиду своего глубокого увлечения фронтенд-разработкой планирую освоить этот навык профессионально.
Я глубоко убеждена, что единственный способ научиться чему-либо — это начать заниматься этим на практике. Только методом смелых проб и ошибок можно шаг за шагом выстроить пирамиду опыта и вырасти из новичка в рок-звезду.
“Обучение — это активный процесс, и учимся мы путем активной деятельности. Как итог — в виде устойчивых навыков оседают только те знания, которые применяются на практике”, — Дэйл Карнеги.
Что будем изучать?
Мы создадим базовую версию приложения для отслеживания привычек, где будут содержаться соответствующие записи, которые можно будет добавлять, редактировать и удалять. Это будет пошаговая инструкция, в которой мы поочередно соберем все компоненты UI и бэкенд, чтобы вы могли наглядно проследить процесс их объединения воедино.
В конце урока у вас будет рабочее приложение, управляющее списком привычек, которые можно добавлять, редактировать и удалять. Поехали!
Для тех, кто не хочет читать: демо-версия приложения доступна на StackBlitz.
Базовая настройка
Если вы ранее не создавали приложение Angular на своей машине, то убедитесь, что у вас установлены Node.js и Angular CLI.
Откройте предпочтительный для вас терминал. Я в данном уроке буду использовать его встроенный в VSCode вариант.
Перейдите в каталог, где хотите создать приложение и введите следующую команду:
Вам будет задано два вопроса:
После генерации этих пакетов можно переходить к настройке Angular Material (AM). Для начала перейдите в каталог приложения командой cd и добавьте эту библиотеку в проект:
Вам также понадобится ответить на ряд вопросов:
После этого введите команду “ng serve”, чтобы увидеть весь сгенерированный Angular код.
Пустяки, не так ли? А теперь пора перейти к собственному написанию кода.
Создание элементов UI
Создание нашего удобного красивого UI мы начнем с добавления пары компонентов Angular Material.
Toolbar
В файле app.component.html удалите весь сгенерированный код и добавьте:
Так как для создания элементов mat-toolbar и mat-icon мы используем AM, вам также понадобится добавить в файл app.module.ts следующее:
Примечание: я буду опускать некоторые импорты, чтобы сократить свои вставки с GitHub. Весь код вы сможете найти в конце урока.
Затем добавьте в app.component.scss следующее:
Сохраните все и полюбуйтесь, какую крутую панель инструментов мы создали.
Использование иконок Angular Material
Среди прочих крутых возможностей AM можно выделить бесплатный функционал иконок. По этому поводу я хочу пояснить несколько моментов:
Создание списка
А теперь мы обратимся за помощью к TypeScript, который позволит настроить в шаблоне отображение дат. В этом руководстве не затрагиваются темы локального сохранения информации, поэтому пока что для экспериментирования мы настроим временный список.
Вернитесь к app.component.ts и добавьте с помощью нашего нового типа свойство массива:
В app.component.html под панелью инструментов вставьте этот HTML:
Теперь из-за добавления этих новых компонентов AM в шаблон нам будет не хватать несколько импортов. Чтобы это исправить, импортируйте MatCardModule в app.module.ts :
Внесите в app.component.scss следующие классы:
Таким образом Angular и AM предоставили нам целый набор бесплатных компонентов, стилей и поведений, что изначально сделало приложение достаточно продуманным.
Настройка формы
Для управления списком привычек нам понадобится форма, которая позволит добавлять и редактировать записи.
Пока что мы поместим HTML-фрагмент для формы между кодом панели инструментов и All Habits (обратите внимание, чтобы он оказался над областью тега div с class=»all-habits» ):
Для исправления красных волнистых подчеркиваний, выдаваемых элементами формы и кнопок, импортируйте MatButtonModule, MatInputModule и MatSelectModule в корневой модуль:
Стилизуем мы это все, добавив в app.component.scss следующее:
Форма готова! Давайте кое-что по этому фрагменту проясним:
Добавление UX
Сейчас наша форма смещает список привычек вниз, и мы его не видим. А нужно ли нам его видеть в процессе добавления новой привычки? На мой взгляд, нет.
Для начала обратимся к TypeScript коду и добавим переменную, указывающую, находимся ли мы в режиме добавления привычки, определив ее по умолчанию как false:
Теперь, чтобы не отображать постоянно форму, добавим кнопку Add New Habit, которая эту форму будет вызывать. Для этого обновим раздел all-habits :
После сохранения изменений форма будет появляться только при нажатии кнопки.
Отлично! Теперь, когда мы выстроили все элементы UI, пришло время добавить приложению динамичности и заставить кнопки выполнять их основную работу. Я понимаю, что все это долго, но мы уже почти закончили.
Основная функциональность
Подключение реактивной формы
А теперь веселая часть. Пора привязать к нашему TypeScript-коду реактивную форму, что даст нам возможность управлять данными в списке привычек.
Для настройки этой формы добавьте в app.component.ts следующий код:
На что обратить внимание:
Теперь нужно прикрепить форму TypeScript к шаблону HTML.
Теперь у нас не только есть рабочая реактивная форма, но мы также можем добавлять в список новые привычки.
После всего проделанного важно обратить внимание на следующее:
Добавление метода редактирования
На данный момент мы можем добавлять привычки, но нам еще нужно поместить в интерфейс иконку карандаша, которая будет открывать форму редактирования и обновлять соответствующую запись в списке. Сначала добавим в app.component.ts метод редактирования:
Теперь перейдем к шаблону:
Какие здесь изменения:
Прекрасно! Теперь займемся удалением.
Добавление метода удаления
Далее в шаблоне добавьте к иконке удаления событие клика:
Теперь у нас появилась возможность удаления.
Кнопка отмены и исправление бага
Итак, мы вышли на финишную прямую и впереди настройка последних фрагментов.
Нам осталось сделать две вещи: организовать работу кнопки отмены (cancel) и попутно исправить небольшой баг. Вы могли заметить, что если после редактирования привычки сразу перейти к созданию новой, то форма заполняется данными из только что редактированной записи. Почему это происходит?
На данный момент при сохранении новых записей мы не очищаем поля формы, поэтому данные просто в них “подвисают”. Давайте создадим решение, которое будет отвечать за очищение при сохранении или нажатии кнопки отмены, которую также потребуется добавить.
Далее мы включим в форму добавления кнопку отмены с событием клика exitForm() :
Вывод
Во-первых, я благодарю вас за то, что проделали со мной этот путь! Давайте подведем его итог.
Как использовать Material Design в Angular 6
Дата публикации: 2018-10-02
От автора: Angular развивается на протяжении многих лет, и в каждую версию постоянно добавляются новые захватывающие функции. Одно из усовершенствований введено в Material Design, который поставляется с новыми компонентами. В этом руководстве мы рассмотрим сам Angular Material Design и то, как включить его в проекты Angular 6.
Что такое Material Design?
Material Design — это язык дизайна для веб- и мобильных приложений, который был разработан Google в 2014 году. Material Design упрощает разработчикам настройку UI, сохраняя при этом удобный интерфейс приложений. С Material Design вы получаете хорошо организованный формат и гибкость, чтобы выразить свой бренд и стиль.
Если вы хотите получить представление о Material Design, ознакомьтесь с дизайном домашней страницы Houzz, которые в 2016 году выиграли награду Google Play. Это приложение использует Material Design, чтобы реализовать многочисленные функции в ограниченном пространстве мобильных устройств. Это дает хороший опыт для пользователей, позволяя им просматривать и перемещаться по приложению, не чувствуя себя перегруженным. Это действительно одно из лучших приложений Material Design.
Введение в Angular Material
Angular Material состоит из набора предустановленных компонентов Angular. В отличие от Bootstrap, предоставляющего компоненты, которые вы можете использовать любым способом, Anglate Material стремится обеспечить расширенный и последовательный пользовательский интерфейс. В то же время он дает возможность контролировать, как ведут себя разные компоненты.
Бесплатный курс «Laravel + Angular. Быстрый старт»
Изучите курс и узнайте, как создать веб-приложение с нуля на Angular и Laravel
Также, как Angular, Angular Material значительно изменился с момента его первоначального выпуска.
Как добавить Angular Material в ваш проект
Чтобы добавить в проект Angular Material, мы будем использовать команду ng add. Эта команда является новой функцией в Angular 6, она очень проста:
Angular 4 Material. Часть 1 — Создание и настройка проекта
Предисловие
Этап 1. Подготовка ОС
В уроках используется Ubuntu 16.04.
Установка NodeJS
Сначала необходимо установить NodeJS. Используем пакетный менеджер Ubuntu:
Для тех, кому не подходит пакетный менеджер Ubuntu, используйте Node Version Manager (если NodeJS успешно стал с помощью пакетного менеджера Ubuntu, пропустите этот шаг).
Установка Node Version Manager
У кого cURL не стоит, поставьте следующей командой:
Перезапустите свой терминал и выполните установку NVM:
Установка NodeJS с помощью NVM завершена.
Установка npm
Теперь необходимо установить npm — менеджер пакетов для NodeJS, который по идее стандартный и должен ставиться автоматически с NodeJS, но у меня такого не произошло.
И, наконец, последняя и важная вещь для нас, это инструмент для инициализации, разработки и поддержки приложений Angular, то есть, Angular CLI:
Этап 2. Базовое приложение
Прежде, чем пойти дальше, давайте убедимся, что мы говорим на одном языке:
Компонент — это элемент или совокупность элементов веб-страницы (отображение).
Модуль — всё приложение на Angular состоит из модулей. Обязан быть как минимум один корневой модуль.
Мы сделаем Material Angular проект на основе обычного генерирующегося Angular проекта. Для создания нового проекта служит команда:
mySoul — это название моего нового проекта. В этих уроках я буду делать проект, предназначенный для коллекционирования фильмов, книг, отдельных цитат и прочего. Такие ресурсы уже есть, но у каждого есть свои минусы. А впрочем, почему не создать удобный для себя ресурс, идеальный ресурс?
А вот и первая ошибка при создании проекта:
Чтобы ее устранить я создал ссылку на node для совместимости:
Теперь проект успешно создан. Перейдем в папку с проектом
Автоматически откроется страница в браузере, где Вы увидите
Если Вы закрыли страницу, а сервер еще запущен, то в адресной строке напишите:
localhost:4200. 4200 — порт по умолчанию. Как его изменить, расскажу в следующей части.
Давайте удалим лишнее. Откройте файл mySoul/src/app/app.component.html и можете удалить всё из файла. Сохраните файл, перейдите на Вашу страницу и увидите, что на ней ничего нет. Одно из удобств: при редактировании проекта Вы сразу же можете видеть изменения. Т.к. мы делаем проект Angular Material, нам необходимо установить дополнительные компоненты.
Внимание! Установка дополнительных пакетов должна производиться в корневом каталоге проекта (в нашем случае в папке mySoul)
Установим Angular Material:
И пакет, необходимый для отображения анимации. Некоторые компоненты Material используют анимацию, поэтому установка этого пакета желательна:
И еще один важный шаг, который не описан на официальном сайте (или я очень слеп, т.к. несколько раз все перечитывал на официальном сайте, но этого не видел), но он необходим. Необходимо подключить стиль. Для этого открываем файл mySoul/src/styles.css и подключаем стиль:
Больше стилей можете найти на официальном сайте.
Теперь мы можем добавить Material компонент. Все Material компоненты можете найти на сайте Material Angular
Практически на любой веб-странице есть кнопки, поэтому добавим кнопку. Переходим на сайт Material Angular → вкладка Components → в меню слева ищем Button и кликаем на него. На открытой странице Вы можете увидеть, как этот элемент работает, и весь необходимый код для добавления элемента в Ваш проект.
Сначала, Вы должны нажать «<>» (вверху справа) и скопировать код
button md-button> Click me!
(добавьте открывающий и закрывающий теги)
с вкладки «HTML». Вставьте этот код в файл mySoul/src/app/app.component.html. После того, как Вы сохранили файл, на Вашей странице Вы увидите кнопку.
Кнопка самая обычная. А где же Material Design? Чтобы его увидеть, необходимо сделать следующее: импортировать модуль для этого компонента в свой проект. Перейдите на вкладку «API» (вверху).
Откройте файл mySoul/src/app/app.modul.ts и подключите необходимый модуль. До редактирования файл app.modul.ts выглядел так:
После подключения модуля он должен выглядеть так:
Сохраните файл. Подождите, пока загрузится необходимый модуль и на своей странице Вы увидите:
Совет: для правильного отображения некоторых компонентов прямо сейчас подключите анимацию:
Я против того, когда в проект подключается лишнее, но не раз бывало, что при добавлении компонента, требующего анимации, он отображался, я тратил много времени на поиск решения проблемы. А решение просто: надо импортировать анимацию.
Теперь у Вас есть проект Angular с единственным Material компонентом. В следующей части я расскажу подробно о структуре проекта, как создать и правильно подключить несколько компонентов и напишем сервис.