Делюсь опытом в описанных технологиях. Блог в первую очередь выполняет роль памяток для меня самого.

Немного о Material Design Lite и Angular Material

Комментариев нет

Хочу сказать пару слов про библиотеку Material Design Lite (MDL).

TL;DR Если нужны только стили, сгодится. Если требуется качественный JS и интеграция с Angular - посмотрите в сторону Angular Material. Впрочем, в своих проектах я использую их вместе, это не так уж сложно.

Стили

Что касается стилей, тут всё довольно неплохо. Во-первых, даже при установке через bower скачиваются исходные файлы. Можно открыть нужный .scss и внести правки. Не уверен, что многие часто пользуются этой возможностью, но в любом случае она есть, и для этого даже не нужно клонировать репозиторий с GitHub.

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

Очень даже хорошо, что из коробки идёт поддержка стилей для таблиц, карточек, панели навигации и некоторых других объектов. По сравнению с Angular Material - шаг вперёд.

JS

А вот с JS не всё гладко. Во-первых, поведение меню. В Angular Material разработчики предусмотрели позиционирование таким образом, чтобы оно не уезжало за экран. В MDL приходится самому заботиться об этом и подбирать нужные стили. Впрочем, это не такая уж большая проблема. Есть кое-что ещё.

MDL выполняет обновление компонентов и установку обработчиков на них только в момент загрузки страницы. Да, он дожидается DOMReady, после чего выполняет заполнение свойств элементов. При использовании какого-либо роутинга в Angular сразу появляется проблема. Решается довольно легко, спасибо StackOverflow:

Приложение
Application.run(['$rootScope', '$location', '$timeout', function (
    $rootScope,
    $location,
    $timeout
) {
    $rootScope.$on("$viewContentLoaded", function () {
        $timeout(function () {
            componentHandler.upgradeAllRegistered();
        });
    });
}]);

Нет некоторых нужных полей, например, поле для выбора даты, которое появилось в Angular Material 0.11.0. Впрочем, обе библиотеки прекрасно работают вместе.

Если пишете SPA на Angular, для создания навбара и верхнего тулбара лучше используйте те, что идут в Angular Material. Почему? Потому что эти элементы статичны в MDL, а нам же нужно будет иногда менять их содержимое, не так ли? Да и привязка к контроллерам будет проще, если сделать один ng-view, без использования ng-include или сторонних вещей типа ui-route.

Комментариев нет :

Отправить комментарий