Обновить
18.59

Angular *

JavaScript-фреймворк

Сначала показывать
Порог рейтинга
Уровень сложности

Добавлена поддержка «Яндекс.Карты» версии 2.1 в angular.js модуль yaMap

Время на прочтение1 мин
Количество просмотров8K
После публикации статьи «Яндекс.Карты для angular.js утекло немало воды, а также появились новые возможности. В настоящий момент в модуль angular.js для использования карт „Яндекса“ на ваших страницах добавлена поддержка версии 2.1 yandex map api. Не скажу, что суть модуля сильно поменялась, но все же некоторые изменения были внесены. Хотите знать какие, добро пожаловать под кат.
Читать дальше →

Магия AngularJS: никогда не вешайте binding на примитивы

Время на прочтение3 мин
Количество просмотров33K

Магия AngularJS: никогда не вешайте binding на примитивы


Если вы используете AngularJS, скорее всего вы неоднократно сталкивались с правилом «Не вешайте binding на примитивы». В этом посте я подробно разберу пример, в котором использование примитивов создает проблемы: создание списка элементов , в котором каждый из элементов привязан к строке.

Наш пример

Скажем, вы работаете над приложением с книгами, и у каждой книги есть список тегов. Наивным способом предоставления пользователю возможности редактировать теги будет:
<div ng-controller="bookCtrl">
    <div ng-repeat="tag in book.tags">
        <input type="text" ng-model="tag">
    </div>
</div>

Читать дальше →

5 причин использовать AngularJS в вашем корпоративном приложении

Время на прочтение5 мин
Количество просмотров23K

5 причин использовать AngularJS в вашем корпоративном приложении


image

Нынешнюю ситуация в мире корпоративных приложений можно описать одним словом: хаос.

Начиная с устаревшего кода, который в течении N лет переходил от разработчика к разработчику без всякой документации. До слишком сложных интерфейсов, которые слишком усложняют код. До смешивания вместе N технологий в одном единственном приложении. Посмотрим фактам в лицо: когда эти вещи создавались, никто не задумывался об их поддержке. Сегодня мы столкнулись с проблемой – как исправить все эти приложения? С чего начать? Как привнести в них здравый смысл? Как привести их к современному технологическому стеку?
Читать дальше →

Собрание ваших сочинений на Angular.js

Время на прочтение4 мин
Количество просмотров20K
Данный пост будет посвящён вопросу сборки Angularjs приложений. Я рассмотрю возможные пути решения и объясню, почему в итоге решил написать несколько собственных плагинов.

Итак, а как вообще принятно решать проблему сборки в последнее время? Grunt/Gulp плагины, require.js, browserify — самые популярные варианты.

Но есть нюанс. Когда вы имеете дело с Angular-приложением, вы сталкиваетесь с необходимостью декларирования зависимостей между модулями для их правильной сборки. Поясню на примере.

Если у вас простейшее приложение, которое состоит из нескольких файлов:

app.js
controllers.js
services.js
directives.js
filters.js

То никаких проблем нет. Вы можете вручную прописать порядок их подключения в том же Grunt/Gulp.

Но, допустим, если вы захотите реализовать такую архитектуру, при которой каждый отдельный сервис, контроллер, директива и т. д. находятся в отдельных файлах, то есть:

app.js
controllers/
	FirstCtrl.js
	SecondCtrl.js
services/
	FirstSrv.js
	SecondSrv.js

То вы столкнётесь с рядом трудностей. Главным образом, трудности будут с тем, как сшить все файлы так, чтобы при этом Angular работала без ошибок. Итак, что можно сделать?
Читать дальше →

Бесплатный курс по AngularJS от Codeschool

Время на прочтение1 мин
Количество просмотров48K


Всем привет!

Пару дней назад мне на почту пришло письмо от Codeschool.com, в котором очень красочно (как можно заметить из картинки в шапке поста) представлялся новый курс по AngularJS. Т.к. платной подписки у меня сейчас нет, я решил отложить просмотр до лучших времён, а сегодня случайно узнал, что курс оказывается «Sponsored by Google», а соответственно бесплатный. Закончив работу над первым уровнем, я поспешил проверить наличие заметки об этом чудном событии на Хабре, но с удивлением обнаружил, что никто до сих пор не поделился этой новостью. Значит придётся взять всё в свои руки.
Читать дальше →

Легкие контроллеры с AngularJS

Время на прочтение2 мин
Количество просмотров36K
В дополнение к этому посту.

Кто не знает, есть такая штука ui-router. Замена стандартного роутера Ангуляра. Учитывая, что в Ангуляре 2.0 планируют запилить нечто подобное, вскоре этот роутер станет стандартом.

С помощью него можно строить приложение, например, так:
Читать дальше →

Лёгкие контроллеры с Angular Classy

Время на прочтение2 мин
Количество просмотров14K
Нашёл любопытный инструмент для облегчения структуры контроллеров — Angular Classy. Он представляет из себя модуль, размером в 1 килобайт (gzipped and minified), и помимо представления контроллера в виде объекта даёт ряд полезных плюшек, рассказ о которых под катом.

Читать дальше →

В чем разница между factory и provider в AngularJS (на пальцах)

Время на прочтение2 мин
Количество просмотров53K
Как-то давно переводил статью «Понимание типов сервисов в AngularJS (constant, value, factory, service, provider)». На практике, конечно, не всё пригождается, поэтому в рамках понижения порога вхождения в Ангуляр, объясню проще.
Читать дальше →

Правильное использование promise в angular.js

Время на прочтение5 мин
Количество просмотров109K
imageВ процессе использования angular.js трудно обойтись без объекта $q (он же promise/deferred), ведь он лежит в основе всего фреймворка. Deferred механизм является очень простым и мощным инструментом, который позволяет писать лаконичный код. Но чтобы по-настоящему использовать эту мощь, необходимо знать обо всех возможностях данного инструмента.
Вот несколько моментов, о которых вы возможно не знали.
Познать мощь

Вы мне Javascript сломали

Время на прочтение5 мин
Количество просмотров63K
Давным-давно

Раньше все писали много отвратительного JS прямо на страницах, не вдумываясь, и это было очень плохо. Подозреваю, его и до сих пор так пишут, но это делают всё те же люди, которые ни блогов, ни хабра не читают, так что давайте мы не будем о них думать (потом нам, конечно, придётся оказаться с ними в одном проекте и — господи, нет, пожалуйста, только не это)

Самое крутое, классное и волшебное, что было в JS — это то, что никто в больших организациях не хотел с ним иметь дела, оставаясь в своём спокойном мире прекрасно организованных слоёв абстракций из фабрик и волшебных фреймворков инъекций XML.

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

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

Мы достигли расцвета JS

С приходом jQuery наша жизнь стала ещё лучше, и мир вокруг стал собираться из маленьких переиспользуемых плагинов к jQuery. Наконец, мы достигли расцвета, когда пришёл NPM, и мы начали использовать более-менее работоспособную систему модулей для работы с автономными виджетами.

Я представлял себе будущее, где я мог работать с отличными командами над отличным кодом из маленьких модулей и автономных функций и виджетов. Я даже думал, что нам удастся отвоевать контроль над кодом у корпоративных маньяков с их библиотеками, ОРМами, паттернами и практиками, и основанными на них фабриками фабрик сервисов.

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

COLT 2.0 Рекомпиляция DOM по мере изменения директивы

Время на прочтение1 мин
Количество просмотров1.7K
В последнем обновлении COLT 2.0 Beta 7 мы добавили еще одну новую фичу для Angular.js

Теперь когда вы будете менять функцию, описывающую вашу директиву Angular, директива будет обновлен в DOM (заново скомпилирована).

Посмотрите видео-демонстрацию:
Читать дальше →

В новой сборке COLT 2.0 (beta 6) появился расширенный автокомплит для Angular.js проектов — внутри {{}} для Sublime Text (2 и 3)

Время на прочтение1 мин
Количество просмотров3.6K


Раньше автокомлит работал только в JS — в запущенном приложении COLT находил нужный объект и смотрел его структуру. Теперь внутри {{}} и атрибутах директив в списке автокомплита появился выбор всех поля и методов из текущего $scope.
Читать дальше →

Конфигурирование директивы Angular на лету с помощью COLT и Emmet

Время на прочтение1 мин
Количество просмотров1.9K


У Emmet есть классная команда — инкрементировать значение в JS/HTML/CSS с шагом 1, 0.1, 10.
При запуске livecoding сессии COLT и новой фичей рекомпиляциии Angular директив на лету, получается настоящий визуальный редактор прямо в браузере.
Читать дальше →

Ближайшие события

Разработка приложения для Firefox OS на реальном примере

Время на прочтение9 мин
Количество просмотров12K
imageМобильные приложения созданные с помощью веб-технологий понемногу захватывают мир. Но создание таких приложений, под популярные платформы, связанны с кучей проблем — от неизвестных истории багов, зоопарка размеров экрана, до проблем с производительностью, которые не решаются просто переписыванием тонких мест.

Но к счастью, этот топик не будет наполнен обыденной трагедией разработки, подобных приложений. Поскольку сегодня, я покажу на реальном примере, как разрабатывать приложения под Firefox OS, которая поддерживает большую часть современных веб-технологий, и вообще говоря создана для них и благодаря им.

Читать дальше →

Делегирование событий в AngularJS. Попытка разобраться

Время на прочтение2 мин
Количество просмотров15K
Евгений Гришковец, спектакль 'Как я съел собаку'Гришковец как бы говорит нам «А давайте разберемся»

В комментариях к статье мною был задан вопрос о делегировании в AngularJS в контексте того, что привычный многим императивный способ назначения обработчика для группы элементов аля

$('ul').on('click', 'li', function(){ // обработчик ....

не совсем приемлем в декларативном AngularJS. Собственно, последовал совет использовать свою директиву, решающую проблему делегирования. На самом деле, на ум мне ничего толкового не пришло, и я решил погуглить, наткнулся на такой вариант: создаем директиву, которую необходимо установить на родительский для группы нужных нам элементов узел, который регистрирует слушателя.
Вот демо.
А вот 2 интересующие нас части кода:
html
<ul bn-delegate="li a | selectFriend( friend )">
 
        <li ng-repeat="friend in friends">
 
            <!-- Delegate target. -->
            <a href="#">{{ friend.name }}</a>
            <!-- Delegate target. -->
 
        </li>
 
    </ul>


//js
                    element.on(
                        "click.bnDelegate",
                        selector,
                        function( event ) {
 
                            // Prevent the default behavior - this is
                            // not a "real" link.
                            event.preventDefault();
 
                            // Find the scope most local to the target
                            // of the click event.
                            var localScope = $( event.target ).scope();
 
                            // Invoke the expression in the local scope
                            // context to make sure we adhere to the
                            // proper scope chain prototypal inheritance.
                            localScope.$apply(
                                function() {
 
                                    expressionHandler( localScope );
 
                                }
                            );
 
                        }
                    );


Но подождите. В зависимостях получается jQuery (можно обойтись без него, но тем не менее), но это пол беды. В дебрях директивы все тот же императивный подход. Собственно, в этот момент я решил опубликовать пост, с попыткой разобраться в подходах к делегированию в Angular, в комментарии призываются все, кому есть что сказать по этому поводу.
Читать дальше →

Разделение приложения AngularJS на изолированные модули

Время на прочтение3 мин
Количество просмотров14K
При разработке достаточно большого приложения неизбежно возникает момент, когда приложение наконец-то становится достаточно большим чтобы тормозить. Для AngularJS существует множество методик позволяющих добиться нужной производительности: bindonce, фильтрация списков, использование $digest вместо $apply, ng-if вместо ng-show (или наоборот), и другие. Но все они позволяют делать только локальные улучшения, не помогая в глобальном плане: избавиться полностью от вызовов $rootScope.$digest не получается, а проверка состояния всего приложения может идти очень долго.

В этой статье я хочу предложить архитектурное решение: разбиение приложения на несколько несвязанных с точки зрения фреймворка частей и самостоятельная реализация связей между ними.
За подробностями прошу под кат

Использование директив ngShow и ngHide в AngularJS

Уровень сложностиПростой
Время на прочтение3 мин
Количество просмотров52K
Сегодня мы посмотрим на то, как можно использовать директивы ngShow и ngHide в Angularjs.

Зачем они нужны


ngShow и ngHide позволяют отображать или скрывать различные элементы. Это помогает при создании Angular-приложений, так как наши SPA, скорее всего, будут иметь много частей, которые, в зависимости от состояния нашего приложения необходимо скрывать или показывать.

Большим преимуществом этих директив является то, что нам нет необходимости скрывать или показывать элементы при помощи CSS или JavaScript. Это все обрабатывает старый добрый Angular.

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


Чтобы использовать ngShow или ngHide, нужно просто добавить директиву к элементу, который вы хотите показать или скрыть.
Читать дальше →

Расширение и компоновка директив

Время на прочтение4 мин
Количество просмотров18K
Про директивы много написано, но мало о том как писать их правильно. Поделюсь опытом.

Хорошо написанная директива должна
  • решать одну задачу
  • легко расширяться
  • не конфликтовать с другими директивами


Разберем каждый пункт на примере поля для ввода пароля (думаю, всем знакомо поле с глазиком)

image

<input ng-model="user.password"
       ng-minlength="6"
       form-password
       form-error="Не менее 6 символов">


Сколько директив используется?
Читать дальше →

Вышел COLT 2.0 с поддержкой Angular.js, node-webkit

Время на прочтение4 мин
Количество просмотров7.3K
Сегодня мы выпускаем новую версию нашего продукта. COLT 2.0.
Данный релиз будет интересен JavaScript разработчикам.

Главные новости. Коротко


Поддержка node-webkit, поддержка работы с удаленными или локальными серверами (live-proxy). Консольная версия COLT (запуск без UI на сервере). Поддержка Angular. Новый механизм HTML доставки. Улучшение работы с Sublime Text (JSDocs и другое). Улучшение производительности. Новый интерфейс на node-webkit. Улучшена поддержка Linux. Новый демо режим (как в Sublime). Значительное уменьшение размера дистрибьютива.
Читать дальше →

FormStamp − библиотека виджетов для AngularJS

Время на прочтение7 мин
Количество просмотров14K
AngularJS − это стремительно набирающий популярность JS-фреймворк, упрощающий разработку сложных и динамичных веб-приложений. Наша команда использует AngularJS в ряде проектов со сложным пользовательским интерфейсом, и в процессе работы мы остро ощутили нехватку хорошей библиотеки, предоставляющей набор единообразных виджетов, таких как datetime picker, select, multiple select и так далее. Конечно, нам было известно о проекте Angular UI, но некоторых виджетов, которые нам были нужны, AngularUI не предоставлял.

Кроме того, мы хотели иметь аналог рельсового form builder-а, но на фронтенде. Form builder позволяет программисту описать форму декларативно, беря на себя генерацию разметки и вывод ошибок.

Решением этих проблем стала разработанная нами библиотека FormStamp, которая предоставляет:
  • Form Builder − наивысший уровень для работы с формами, созданный по аналогии с генераторами форм из экосистемы Ruby on Rails;
  • набор виджетов, покрывающих 80% задач, встречающихся при работе с формами и не решаемых стандартными элементами HTML5;
  • низкоуровневые компоненты, позволяющие собирать новые виджеты.

При разработке в библиотеку были заложены следующие принципы:
  • все виджеты написаны с нуля с использованием директив AngularJS, что позволяет сократить код и сделать его более читаемым;
  • полная интеграция с AngularJS (поддержка ngModel, ngRequired...);
  • стилизация по умолчанию с помощью Bootstrap.

Читать дальше →