Создавайте ультрасовременные веб-приложения с помощью Angular Material

На конференции Google I/O в 2014 году Google анонсировала Material Design, свой новый язык дизайна. С тех пор они преобразовали большую часть своих популярных приложений, чтобы они соответствовали этой новой спецификации, чтобы обеспечить единообразие работы. Теперь они пытаются убедить вас последовать их примеру.

Что такое материальный дизайн?

После посещения официальной спецификации Material Design вы сразу почувствуете ультрасовременный минимализм. Основные формы и плоские цвета являются темой здесь. Просмотр документации - это настоящий опыт. Я рекомендую взглянуть на себя, но я подытожу это здесь.

Цель

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

Принципы

Материальный дизайн основан на трех принципах.

Материал — это метафора

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

Жирный, Графический, Преднамеренный

Преднамеренный выбор цвета, изображения от края до края, крупномасштабная типографика и преднамеренное пустое пространство создают смелый графический интерфейс, который погружает пользователя в процесс. Плавающая кнопка действия, или FAB, является ярким примером этого принципа. Вы заметили этот маленький кружок с символом «плюс», плавающий в вашем приложении Google Inbox? Материальный дизайн делает очевидным, что это важная кнопка.

Движение дает смысл

Движение имеет смысл и уместно, оно служит для концентрации внимания и поддержания непрерывности. Обратная связь тонкая, но четкая. Переходы эффективны, но последовательны. Главное здесь — анимировать только тогда, когда у этого есть цель, и не переусердствовать.

Как AngularJS вписывается в материальный дизайн?

AngularJS, «Superheroic JavaScript MVW Framework» от Google, решает многие проблемы, возникающие при разработке одностраничных приложений (SPA). Он обеспечивает основу, необходимую для создания современных веб-приложений, которые подключаются к API и никогда не нуждаются в обновлении страницы.

AngularJS: новый подход

Angular — это то, чем был бы HTML, если бы он был разработан для приложений. HTML — отличный декларативный язык для статических документов, но не для создания динамических приложений.

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

1. Библиотека - набор функций. (JQuery)
2. Framework — код динамически заполняет статические элементы, когда это необходимо. (Дюрандаль, Эмбер)

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

Было бы неплохо, если бы Google создал набор директив, основанных на принципах Material Design?

Представляем угловой материал

Google активно разрабатывает Angular Material, реализацию Material Design в AngularJS. Angular Material предоставляет набор повторно используемых компонентов пользовательского интерфейса, основанных на системе Material Design. Angular Material состоит из нескольких частей. У него есть библиотека CSS для типографики и других элементов, он предлагает интересный подход JavaScript для создания тем, а его адаптивный макет использует гибкую сетку. Но самой привлекательной особенностью Angular Material является удивительная коллекция директив.

Начиная

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

Взгляните на демо здесь или разветвите код на GitHub.

Директивы

Директивы — это основная функция Angular. Angular поставляется с несколькими директивами, которые вы постоянно используете, например, ng-model или ng-repeat. Это очень важная часть Angular, благодаря которой фреймворк функционирует должным образом.

Как использовать директиву материала Angular

Angular Material расширяет эту библиотеку набором красивых директив, вдохновленных Material Design. Директивы Angular Material — это теги HTML, начинающиеся с «md»; сокращение от Material Design. Они не могут быть намного проще в использовании. Например, давайте взглянем на старую добрую кнопку.

Стандартная HTML-кнопка может выглядеть примерно так.

 <button>Click Me</button>

Кнопка Angular Material выглядит так.

 <md-button>Click Me</md-button>

И это все, что нужно для создания кнопки Material. Теперь есть несколько других вариантов, доступных для этой директивы, таких как создание темы и поднятие ее с поверхности, чтобы подчеркнуть важность.

 <md-button class="md-raised md-primary md-hue-1">Click Me</md-button>

Услуги

Сервисы также являются основой функциональности Angular. Они используются для совместного использования кода в приложении. Общая базовая служба, такая как $http, используется и повторно используется для вызовов данных в приложениях Angular.

Угловые сервисы это:

1. Ленивое создание экземпляра — Angular создает экземпляр сервиса только тогда, когда от него зависит компонент приложения.
2. Одиночки — каждый компонент, зависящий от службы, получает ссылку на единственный экземпляр, сгенерированный фабрикой служб.

Как использовать сервис материалов Angular

Angular Material поставляется в комплекте с некоторыми сервисами, которые предоставляют дополнительную функциональность приложению. Они также способствуют выполнению некоторых директив. Отличным примером услуги является «тост».

Тост — это небольшое уведомление, которое появляется в верхней части экрана и исчезает через несколько секунд. Пользоваться этим сервисом легко.

В JavaScript,

 $mdToast.show( $mdToast.simple('Simple Toast!') .position('left bottom') .hideDelay(3000) );

В этом примере показано простое всплывающее уведомление, которое появляется в левом нижнем углу экрана и исчезает через 3 секунды.

Некоторые услуги можно персонализировать с помощью пользовательских шаблонов. В этом случае служба $mdToast может использовать пользовательский HTML-шаблон с помощью директивы md-toast.

Тематика

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

Согласно руководству по материальному дизайну, вы должны «ограничить свой выбор цветов, выбрав три цветовых оттенка из основной палитры и один акцентный цвет из вторичной палитры». Angular Material упрощает выполнение этого правила, используя JavaScript для настройки темы. Но сначала, что такое палитра и оттенок?

• Оттенок: оттенок — это один цвет в палитре.
• Палитра: палитра — это набор оттенков.

Например, палитра будет «зеленой», а оттенок — это определенный оттенок зеленого. Angular Material поставляется со всеми допустимыми палитрами из спецификации Material Design. Вы можете узнать больше о допустимых цветовых палитрах здесь.

Настройка темы

Тематика вашего проекта — это кусок пирога. В файле app.js задайте нужные палитры и оттенки с помощью службы Theming Provider.

 angular.module('myApp', ['ngMaterial']) .config(function($mdThemingProvider) { $mdThemingProvider.theme('default') .primaryPalette('cyan', { 'default': '400', 'hue-1': '100', 'hue-2': '600', 'hue-3': 'A100' }) .accentPalette('amber') .warnPalette('red') .backgroundPalette('grey'); });

Использование темы

Чтобы применить тему к компонентам, установите класс элемента на желаемую палитру и оттенок.

 <md-button class="md-primary">Click me</md-button> <md-button class="md-primary md-hue-1">Click me</md-button> <md-button class="md-primary md-hue-2">Click me</md-button> <md-button class="md-accent">or maybe me</md-button> <md-button class="md-warn">Careful</md-button>

Макет

Flexbox — это новейшее и лучшее дополнение к адаптивному дизайну, и Angular Material поставляется вместе с ним. Если вы знакомы с сеткой Bootstrap, то вы сможете быстро разобраться. Фактически, Bootstrap переходит на Flexbox в своем следующем выпуске. Он имеет знакомое расположение строк и столбцов, к которому вы привыкли, но с гораздо большим. Узнайте, как использовать Flexbox с помощью этого руководства или изучите официальную документацию.

9 лучших директив по угловым материалам

Директив Angular Material слишком много, чтобы перечислить их все, поэтому я хотел бы поделиться с вами своими любимыми.

9. Линейный прогресс

Часто в SPA страницам требуется время для загрузки данных с сервера. Если приложение показывает пустую страницу в течение этого времени, пользователи могут подумать, что приложение не работает, и уйдут. Сообщите пользователям, что данные загружаются с помощью директивы Progress Linear. Пользователи будут знать, что нужно подождать, когда они увидят анимированный индикатор выполнения, указывающий, что что-то происходит. В качестве альтернативы используйте директиву Progress Circular для круглого индикатора.

8. Выбор даты

Директива Date Picker делает выбор даты простым и понятным для пользователя, а написать его можно буквально одной строкой. Просто используйте md-datepicker и при желании ограничьте диапазон с помощью md-min-date и md-max-date, и все.

7. Автозаполнение

Автозаполнение обеспечивает приятный пользовательский опыт, помогая пользователю выбрать вариант. Это то, что делает поисковую систему Google лучшей. Директива Autocomplete добавляет эту функциональность в ваше приложение, дополняя слова пользователя по мере их ввода. Но лучшая часть этой директивы — это настройка. Заполнив автозаполнение шаблоном md-item-template, вы сможете придать больше смысла предложениям. Например, если пользователь искал имена в компании, автозаполнение может отображать совпадающие имена с их изображением и ролью в компании, обеспечивая более надежное взаимодействие с пользователем.

6. Нижний лист

Нижний лист — это небольшое меню, которое выдвигается из нижней части экрана, закрывая содержимое и фокусируясь на нем. Первоначально предназначенный для использования исключительно на мобильных устройствах, нижний лист набирает популярность на больших экранах. Чтобы использовать его, создайте шаблон с md-bottom-sheet, содержащий либо md-grid, либо md-list для макета сетки или макета списка соответственно. Затем вызовите его с помощью службы Bottom Sheet, $mdBottomSheet.show().

5. Ввод

Формы ввода скучны и были такими с самого начала Интернета. Но они не должны быть! Придайте своим вводам некоторую изюминку с помощью директивы Input. Оберните свой входной тег md-input-container и наблюдайте, как он оживает. Посмотрите, как ваш заполнитель превращается в плавающую метку. Легко проверяйте ввод с помощью мгновенных, но незаметных изменений цвета и предупреждающих сообщений. Директива input берет элемент, который, как ожидается, будет скучным, и преподносит приятный сюрприз.

4. Тост

Самый раздражающий пользовательский опыт — это незнание того, что делает приложение. Мы облегчаем это обострение тостерами или небольшими ненавязчивыми уведомлениями. В старые времена, когда мы отправляли запрос на сервер, мы ждали на этой странице, пока не придет ответ, прежде чем мы могли двигаться дальше. С тех пор объем внимания пользователей резко упал. В сегодняшних SPA мы нажимаем кнопку и ожидаем немедленного продолжения, имея дело с ответом сервера, когда он приходит. Директива Toast упрощает эту задачу. Тостер вызывается простым использованием службы тостов, $mdToast.show(), и установкой текста, продолжительности и угла, в котором он должен появляться. Создайте свой собственный тостер с помощью md-toast.

3. Список сетки

В ваших списках не хватает пиццы? Списки сетки являются альтернативой стандартным представлениям списка. Список сетки лучше всего подходит для представления изображений и оптимизирован для визуального восприятия. Он работает, укладывая плитки разного размера на сетку, создавая рассеянный, эклектичный вид. Затем размер плитки и макет реагируют на размер экрана. Эта директива обязательно придаст вашему приложению захватывающий и забавный вид.

2. Белая рамка

Концепция пространства является ядром Material Design и его бумажной метафоры. Два листа бумаги в одном и том же положении по оси Z (или на глубине) образуют шов и должны двигаться вместе. Два перекрывающихся листа бумаги с разными позициями по оси z образуют ступеньку. Они двигаются независимо друг от друга. Чтобы следовать дизайну, мы должны иметь возможность сдвигать элементы по оси Z. Angular Material предоставляет простой способ сделать это. Используя директиву Whiteframe, установите класс md-whiteframe-z{x}, где x — это единицы измерения глубины от фона. Чем больше число, тем больше тень, отбрасываемая бумагой.

1. Сиденав

Создание бокового навигационного меню никогда не было проще. Директива Sidenav размещает меню навигации слева или справа от экрана. Принимая во внимание мобильные устройства, он прокручивается, как и ожидалось, или программно одним нажатием кнопки. Приятным дополнением является функция открытия замка. Боковую навигацию можно настроить так, чтобы она открывалась, когда экран достигает определенного размера. Установив параметр md-is-locked-open=”$mdMedia('gt-sm')”, меню будет скрыто на телефоне, но заблокировано на планшете и больше.

Заключение

Google переводит свои самые популярные приложения на Material Design. Сейчас они возглавляют разработку Angular Material, реализации Material Design, написанной на AngularJS. Материальный дизайн использует бумажную метафору, смелые намерения и осмысленное движение. AngularJS организует одностраничные приложения. Angular Material применяет принципы Material Design к приложениям AngularJS.

Материальный дизайн здесь, и Angular Material — это фантастический способ применить спецификацию материального дизайна к вашим одностраничным приложениям. Если вы хотите создать собственное приложение Angular Material, не тратьте время на то, чтобы начать с нуля. Вместо этого начните с полностью функционирующего приложения с демонстрационными версиями директив, уже настроенными темами и готовыми к работе навигацией и маршрутизацией. Взгляните на демо здесь или создайте форк кода на GitHub. Конечно, вы также можете узнать все об Angular Material, посетив официальную документацию.

Что вы думаете о моих выборах лучших директив Angular Material? Я правильно их понял? Какие ваши любимые?