С выходом в свет новой версии Android 5.0, названной Lollipop, компания Google представила новое видение дизайна пользовательского интерфейса – Google Material Design. Вслед за появлением спецификации разработчики привнесли немного “материальности” в свои фреймворки, такие как Angular.js, React.js, даже всем известный Twitter Bootstrap сделали “материальным”.
В связи с этим хотелось бы рассмотреть, как же такие известные фреймворки внедряют поддержку Material Design. Рассмотрим это на примере Angular.js.
Установка
Установка ничем не отличается от установки большинства пакетов – нам достаточно иметь установленный bower:
bash
bower install angular-material
Такой способ предпочтительнее, хотя есть вариант с использованием CDN. С ним мы можем попробовать поэкспериментировать прямо в CodePen или JSFiddle:
html
<head>
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/angular_material/0.7.0/angular-material.min.css">
</head>
<body>
<!-- Некоторый HTML код -->
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.6/angular.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.6/angular-animate.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.6/angular-aria.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angular_material/0.7.0/angular-material.min.js"></script>
</body>
Разметка
В данном случае разметка построена на современном flexbox‘е, что, несомненно, является подспорьем в мире адаптивных сайтов. Фремворк вводит специальные теги и атрибуты, при помощи которых можно построить нужный нам интерфейс. Так, для разметки используется тег div с различными атрибутами, например layout или flex.
Компоненты
Фреймворк предлагает к использованию различные компоненты: кнопки, поля ввода, радио-кнопки, вкладки, сайд-бары, подсказки и тому подобное. В каждый из них мы вникать не будем, мы только рассмотрим общую структуру построения приложения с использованием Material Angular.
Что же попробуем сделать пример
А попробуем мы вот что: мы напишем маленькое, но практичное приложение – простейшую анкету пользователей. Действовать она будет примерно так: две вкладки, в одной – поля ввода отдельного человека, во второй вкладке – список введенных пользователей.
Для начала я приведу готовое демо, а потом мы разберем его в деталях
Формируем разметку
Первым делом опишем две вкладки и основу приложения. Приложение мы создаем стандартно, ничего особенного в нем нету:
var app = angular.module('app', ['ngMaterial']);
app.controller('AppCtrl', function($scope) { });
Теперь описываем div, к которому будет привязано приложение и контроллер. Внутри него разместим вкладки md-tabs, а также ng-switch, который будет описывать содержимое каждой вкладки отдельно. Также сделаем привязку к модели data.selectedIndex, чтобы иметь возможность контролировать текущую вкладку:
html
<div>
Ввод анкеты
Список пользователей <div role="tabpanel" id="tab1-content"></div>
<div role="tabpanel" id="tab2-content"></div>
</div>
Я думаю, Вы заметили, что элементы с префиксом md- относятся к Material Design, а ng- – стандартные элементы Angular.
Теперь опишем поля ввода для первой вкладки. Для этого воспользуемся тегом md-whiteframe для создания пустого окна, а в нем разместим непосредственно поля ввода, как на примере ниже:
<md-input-container flex>
<label>Адрес</label>
<input ng-model="user.address">
</md-input-container>
На самом деле, кода получается гораздо больше, однако, там везде все аналогично – создается контейнер, метка и поле ввода, создается привязка к модели и вуа-ля!
Легко добавить проверку данных. Так, например, мы легко можем добавить ограничение по длине вводимого текста:
<input md-maxlength="20">
Добавим кнопку сохранения данных:
<md-button class="md-fab md-primary" aria-label="Сохранить">
<md-icon icon="//material.angularjs.org/img/icons/ic_insert_drive_file_24px.svg" style="width: 24px; height: 24px;"></md-icon>
</md-button>
Для этой кнопки нам необходимо описать в контроллере функцию save, а также прикрепить ее к самой кнопке:
js
app.controller('AppCtrl', function($scope){
$scope.save = function() { }
});
html
<md-button ... ng-click="save()"> ...
Контроллер
Собственно, теперь нам необходимо реализовать базовый функционал контроллера AppCtrl. Все делается стандартно, ничего неожиданного тут нету. Мой контроллер выглядит примерно так:
app.controller('AppCtrl', function($scope) {
// Модели полей ввода
$scope.user = {
firstName: '',
lastName: '',
address: '',
state: '',
postalCode: ''
};
// Список введенных и сохраненных анкет
$scope.users = [];
// Функция сохранения
$scope.save = function() {
$scope.users.push($scope.user);
}
});
Вывод списка пользователей
После того, как мы создали контроллер для сохранения анкет, нам надо обеспечить их вывод. Поддержка “материальных” списков реализуется при помощи тегов md-list и md-item, а сам Angular предлагает атрибут ng-repeat, которым запросто можно пробежать по всем элементам некоторого списка. Реализуем вывод списка:
<md-list>
<md-item ng-repeat="item in users">
<md-item-content>
<div class="md-tile-content">
<h3>{{item.firstName}} {{item.lastName}}</h3>
<h4>Из города {{item.city}}, область {{item.state}}</h4>
<p>
Адрес: {{item.address}}
</p>
</div>
<md-button class="md-raised md-warn">Удалить</md-button>
</md-item-content>
</md-item>
</md-list>
Теперь давайте создадим кнопку удаления отдельного элемента. Material Angular вводит поддержку специальных сервисов, таких как диалоги, подсказки. Реализуем диалог подтверждения удаления пользователя. В этом нам поможет сервис $mdDialog, предлагающий несколько вариантов модальных окон. Помимо этого, он позволяет нам реализовывать свои пользовательские типы окон. Здорово, не правда ли? Подключим к кнопке удаления функцию delete:
<md-button class="md-raised md-warn" ng-click="delete($index, $event)">Удалить</md-button>
В функцию будет передаваться индекс выбираемого элемента и событие, которое мы отдадим сервису. Реализуем функцию delete. Диалоговое окно описывается весьма просто: создается объект и путем последовательного применения нужных команд этот самый объект настраивается.
js
$scope.delete = function(index, ev) {
var confirm = $mdDialog.confirm()
.title('Вы желаете удалить данного пользователя')
.content('В случае согласия данные будут полностью удалены из списка.')
.ok('Удалить!')
.cancel('Отменить')
.targetEvent(ev);
$mdDialog.show(confirm).then(function() {
$scope.users.splice(index, 1);
}, function() {});
}
После того, как объект был создан, его можно вызвать, указав callback-функции, которые будут вызваны в случае нажатия одной из кнопок.
В завершение
Собственно, теперь весь основной функционал реализован и можно заняться внедрением своих “фич” и стилизацией. Однако, если хотите, чтобы вся “материальность” была сохранена, то Вам стоит почитать официальную спецификацию. Подробная документация по Angular Material Design вместе с примерами расположена тут: https://material.angularjs.org
PDF и версия для печати
Всем привет. Я новичок в этих делах и хотел бы задать ряд вопросов которые могут показаться глупыми и неуместными, но все же:
1. У меня есть сайт на wordpress`e с готовой темой, и хотел бы уточнить куда именно (в какой файл) прописывать команду “bower install angular-material” для установки данного менеджера библиотек?
2. Можно ли будет отдельные переделать дизайн установленных плагинов в wordpress(то есть, будет ли это вообще работать)?
3. Как корректно встроить angular.js в свой сайт?
Спасибо за внимание!
Привет. Сначала о bower, он всего лишь скачивает все библиотеки, указанные разработчиком, после чего он (разработчик) должен самостоятельно их подключить в своем приложении, добавив их либо сразу в html, либо при помощи require.js. Потому Вам придется либо настроить bower для своего сайта, либо в html файлах темы wordpress'a прописать местоположение библиотек (в статье указан пример, там все необходимое грузится сразу с CDN гугла и подключается в конце вашего html файла). Собственно второй способ будет проще, мне так кажется. Дизайн плагинов можно переделать, если вам доступен их код. Вы можете изменить стили, html файлы плагинов. Часть html кода расположена в php файлах плагинов, этот html тоже можно изменить, причем все будет работать, изменится только оформление. Про третий вопрос: собственно он относится к первому – либо при помощи bower, предварительно его настроив, либо указав руками положение всех скриптов в нужных местах вашей страницы. Вы можете взять код фрейма статьи (html5.by/blogdemo/material-angular/index.html) в качестве примера, там показано, как подключить на странице angular, а также как запустить приложение, основанное на нем. Пример конечно заточен под Material Design, но суть того, как устроен и работает ангуляр, сохранена. :) Если же вы просто хотите поставить на вордпресс “материальную” тему, может быть, вам стоит обратить внимание на такие штуки: http://materialwp.com/ либо http://materialpress.me/ :)
Спасибо тебе уважаемый Alex за более подробную инструкцию, и за ссылочки премного благодарствую.
Парсер скушал разметку табов в примере, оставив только названия вкладок.
у меня такой вопрос а как сохранить все данные в .txt или .json файле?
Ненавижу сраный ангуляр. Ни какие стандарты не желают соблюдать.
Что за говнотеги и говноконтроллеры, это пишется проще простого.