Сегодня разобрался с тем, что же такое директивы и как они работают в AngularJS. Учитывая, что не все статьи на хабре мне понятны, предприму собственную попытку донести свое открытие до масс.
Итак, что такое директива AngularJS?
В двух словах — это тег или атрибут тега в документе HTML, плюс немного магии.
Магия заключается в том, что директива может содержать в себе как шаблон отображения данных, так и контроллер для их обработки.
Читать полностью »
Приветствую, читатель.
Сегодня я прочитал статью-перевод, которая меня слегка разочаровала. Во-первых, содержанием (нет, я не виню переводчика). Во-вторых, тем, что я не увидел тех трюков, которые я хотел бы увидеть.
Поэтому, хочу поделиться с вами теми возможностями $parse, которые я знаю.
Читать полностью »
Когда возникает идея создать что-либо, обычно хочется сделать прототип или версию 1.0 как можно скорее. Для кого-то, видеть быстрый результат — это хорошая мотивация, чтобы развивать идею дальше; для других — главное «начать», ведь известно, что доделывать/переделывать готовое намного легче, чем писать с нуля. Итак, в процессе очередного чаепития и обсуждения финансовых рынков, у нас появилась идея создания легкого сервиса для обмена и определения текущей ситуации на фынансовых рынках (т.н. тренды) — ведь зная тренды, можно более эффективно торговать.
В требованиях были: веб сервис, мобильная версия (желательно app), легкая коллективная админ-часть, и простой интерфейс.
Первый вопрос, который нужно было решить — на чем писать сервер.
Читать полностью »
Не так давно я уже писал про поведение ng-if директивы, но тогда я столкнулся с проверкой условия, но сегодня возникла другая проблема.
В проекте достаточно много таких элементов как tooltip, popover, modal windows и так далее. Думаю, все вы понимаете, что это за элементы и рассказывать про них я не буду. Для многих из них используется абсолютное позиционирование. Если бы мы не использовали кастомные директивы, то проблем бы не было — все модальные окна лежали бы в конце body и показывались бы когда нужно. Но так, как все эти элементы объявлены как директивы, возникает проблема с позиционированием, так как у директивы может быть родитель с относительным позиционированием и так далее.
<div style="position: relative; overflow:hidden">
<button ng-click="visible = true">Greeting</button>
<modal visible="visible">
Hello, Habr!
</modal>
</div>
После публикации статьи «Яндекс.Карты для angular.js утекло немало воды, а также появились новые возможности. В настоящий момент в модуль angular.js для использования карт „Яндекса“ на ваших страницах добавлена поддержка версии 2.1 yandex map api. Не скажу, что суть модуля сильно поменялась, но все же некоторые изменения были внесены. Хотите знать какие, добро пожаловать под кат.
Читать полностью »
Всем привет!
Пару дней назад мне на почту пришло письмо от Codeschool.com, в котором очень красочно (как можно заметить из картинки в шапке поста) представлялся новый курс по AngularJS. Т.к. платной подписки у меня сейчас нет, я решил отложить просмотр до лучших времён, а сегодня случайно узнал, что курс оказывается «Sponsored by Google», а соответственно бесплатный. Закончив работу над первым уровнем, я поспешил проверить наличие заметки об этом чудном событии на Хабре, но с удивлением обнаружил, что никто до сих пор не поделился этой новостью. Значит придётся взять всё в свои руки.
Читать полностью »
В последнем обновлении COLT 2.0 Beta 7 мы добавили еще одну новую фичу для Angular.js
Теперь когда вы будете менять функцию, описывающую вашу директиву Angular, директива будет обновлен в DOM (заново скомпилирована).
Посмотрите видео-демонстрацию:
Читать полностью »
У Emmet есть классная команда — инкрементировать значение в JS/HTML/CSS с шагом 1, 0.1, 10.
При запуске livecoding сессии COLT и новой фичей рекомпиляциии Angular директив на лету, получается настоящий визуальный редактор прямо в браузере.
Читать полностью »
Про директивы много написано, но мало о том как писать их правильно. Поделюсь опытом.
Хорошо написанная директива должна
Разберем каждый пункт на примере поля для ввода пароля (думаю, всем знакомо поле с глазиком)
<input ng-model="user.password"
ng-minlength="6"
form-password
form-error="Не менее 6 символов">
Сколько директив используется?Читать полностью »
Хочу поделиться своим билдером для Angular.js приложения.
Вкратце суть.
Есть файл, в котором объявляется наш главный модуль /app.js:
angular.module('App',['/some_path/my_module.js']);
В качестве требуемого модуля у него указан путь к другому файлу /some_path/my_module.js
angular.module('MyModule',[]);
Обращаемся к билдеру
ngbuild app.js app.build.js
И смотрим в файл /app.build.js
angular.module('MyModule',[]);
angular.module('App',['MyModule']);
Под катом будет еще несколько примеров использования и интеграции с gulp и grunt.