Angular Light для jQuery/JS разработчиков

Я на Тостере периодический вижу вопросы типа «как скрыть блок по клику» или «как раскрасить по условию», поэтому я хочу вам показать 4 «приема» которые могут улучшить ваш jQuery-код и скорость разработки.

Начальный пример

Примеры к описанию ниже: jQuery пример и Angular Light пример
Этот пример состоит из 2-х «моментов»: 1. Кликом выбрать «панель», 2. Отобразить выбранную «панель».

1. Для примера с jQuery мы вынуждены пометить кнопки class="button", чтобы можно было найти их из кода (хотя классы изначально не для этого создавались). Для примера с Angular Light нам этого не нужно, — он как бы привносит переменные в DOM, и мы напрямую можем указать чтобы клик по этой кнопке присвоил переменную: al-click="active='win'", т.е. тут по клику просто выполняется код: active='win'.

2. Чтобы отобразить выбранную панель в jQuery, мы опять же должны пометить наши блоки (id=«info_win»), чтобы найти их в коде, далее в коде мы делаем манипуляции в зависимости от того, что нужно отобразить. Так же как и выше, с AL нам не нужно помечать блоки, мы просто укажем условие когда они должны быть видимыми: al-show="active=='win'", т.е. когда переменная active=='win', то текущий блок будет отображаться.

Ну, и конечно же, нужно «активировать» этот блок кода с ид = «dialog»:

alight.bootstrap('#dialog', {
  active: 'win'  // тут я указал начальное значение переменой active
});

Для этого примера потребовалось всего лишь две «команды»: al-click и al-show (пример вы можете увидеть по ссылке выше).

Добавим раскраску кнопок

Примеры: jQuery пример и Angular Light пример
Теперь, например, нам нужно подсветить активную кнопку, я добавил класс «active», наверно самое оптимальное для jQuery примера — это удалить класс для всех кнопок и установать его для нужной кнопки:

    dialog.find('.button').removeClass('active');
    dialog.find('.button[value=' + code + ']').addClass('active');

Хорошо, теперь сделаем для AL. Т.к. для нас доступна переменная active, то ей и воспользуемся.
Поместим на кнопку al-class="active: active=='win'". Этот код добавляет класс active в текущий элемент, когда выполняется условие active=='win', — это все, js кода для данного «эффекта» добавлять не нужно.

Усложняем пример

Примеры: jQuery пример и Angular Light пример
Во многих задачах нам нужен ввод пользовательских данных и их вывод: сделаем пример ввода текста, его вывода и checkbox контрол для отображения/скрытия блока.

Вариант на jQuery — размечаем все элементы в HTML: #name, #visible, #box, #boxtext, далее подписываемся на события и делаем функцию конвертирования, отображения текста и скрытия блока.

Для AL нам понадобится две переменных: name и visible. Чтобы получить текст из input type="text", мы используем команду al-value="name" (она будет присваивать весь введенный текст в переменную name), а чтобы отобразить этот текст, достаточно втавить конструкцию {{name}} в нужное место, но нам нужно конвертировать текст перед выводом, поэтому воспользуемся js — {{ name.toUpperCase() }}

Теперь элемент input type="checkbox" используем «команду» al-checked="visible", она присвоит visible=true или false в зависимости от состояния элемента. Ну а скрытие блока вы уже умеете делать al-show="visible".

(В jQuery-примере идет инициализация элементов из js, т.к. подразумевается, что изначальные значения задаются из js)

Самое «сложное»

Пора узнать про директивы, те самые, которых боятся все Angular.js разработчики. Зачем? Например нужно сделать какую-то свою, хитрую работу над элементом или «вставить» jQuery плагин.
Изначально директивы делаются очень просто, например, сделаем директиву окраски текста в красный цвет.
Для этого «пометим» элемент, например, тегом al-red: text
Ну и сделаем саму директиву, т.е. нужно положить функцию в одноименное тегу место:

alight.directives.al.red = function(scope, element) {
  $(element).css('color', 'red')
};

Эта функция принимает на вход элемент, который мы пометели. Готово, пример тут. Таким образом, вы можете использовать AL из jQuery и jQuery из AL.

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

Ну, и напоследок, реальный пример с Тостера на jQuery, и переделанный на AL (хотя его можно было сделать ещё проще).

Главная идея в том, что не нужно отказываться от jQuery, если вы хотите попробовать MVC/MVVM (Angular Light). Вы можете какие-то элементы делать с использованием Angular Light и получать преимущество от обоих. Angular Light не сильно утяжелит ваш проект: последняя версия весит около 17кб (в сжатом виде, gzipped + minfied); кроме того, Angular Light — одна из самых быстрых MVVM библиотек.

PS: Если вы будете пробовать Angular Light, обратите внимание на версию, в интернете большинство примеров для старого Angular Ligh, а он имеет небольшие отличия.