Обновить
10.07

Angular *

JavaScript-фреймворк

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

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

Время на прочтение1 мин
Охват и читатели3.7K


Раньше автокомлит работал только в 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 мин
Охват и читатели53K
Сегодня мы посмотрим на то, как можно использовать директивы 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.4K
Сегодня мы выпускаем новую версию нашего продукта. 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.

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

AngularJS — разделение приложения на модули и загрузка компонентов с помощью RequireJS

Время на прочтение4 мин
Охват и читатели34K
Использование AngularJS в паре с RequireJS — достаточно популярный подход к разработке веб приложений в последнее время. И один из основных вопросов — структура приложения. Существует достаточно известный seed для такого приложения tnajdek/angular-requirejs-seed, но мне это не походит, так как при увеличении функционала приложения — данная структура просто будет засоряться кучей файлов, не будет никакого логического разделения скриптов и достаточно сложно будет их менеджить.

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

Как быстро подготовить кроссплатформенное мобильное приложение. Часть 1: Adobe Phonegap + AngularJS

Время на прочтение9 мин
Охват и читатели51K
Каждый, кто встречался с девушкой (-ами), знает, как эти прекрасные создания любят комплименты в свой адрес. А у нас, мужского населения планеты Земля, не всегда хватает слов, чтобы выразить свои чувства или просто сказать что-то красивое. Понимание этой проблемы натолкнуло нас на создание очередного генератора комплиментов… самого простого, в идеале с одной кнопкой и текстом на весь экран.
В первой части я расскажу о целях, которые мы поставили (концепт приложения), и средствах достижения этих целей, которые мы избрали (Phonegap + Ionic + Restangular + Phonegap Plugin Magic). Этот пост будет полезен как начинающим, так и опытным разработчикам мобильного ПО.
Читать дальше →

AngularJS и ReactJS или как сделать ваше приложение быстрее

Время на прочтение4 мин
Охват и читатели52K
Современный мир программирования, а особенно веб и javascript уже давно не тот и имеет очень большое количество инструментов для той или иной задачи. В сегодняшнем посте я хотел бы рассказать как скрестить мощь AngularJS и молниеносность отображения view – Facebook React.

Всем известно, что когда мы генерируем коллекцию во view через Angular, то каждый элемент этой коллекции становится observable. Я конечно понимаю и знаю что есть определенный набор библиотек и решений как это обойти, но сегодня речь не об этом. Что же дает нам React? Ну одно из его преимуществ, это jsx синтаксис, который есть не что иным как html в javascript. Также есть возможность создавать reusable компоненты, наследовать их и использовать всю мощь что позволяет делать эта библиотека. Что же приступим.
Читать дальше →

Планируете писать приложение на AngularJS? Пост вам в помощь

Время на прочтение6 мин
Охват и читатели38K
Самые непристойные и отвратительные наши поступки, выходящие за всякие нормы морали и принципов, обычно начианаются со слов «А почему бы и нет?».

В данном посте я затрону вопросы проектирования приложения на AngularJS, философии, его архитектуры, сборки, пройдусь по разным полезным библиотекам и готовым архитектурным шаблонам. В довершение устрою небольшую Angular+Require.js+Grunt+Yeoman оргию, которую я назвал Angular-Super-Seed или чуть более скромно ASS-генератор.

Так что, если вы планируете писать приложение на Angular, то почему бы и нет?

Мотивация


  • «Поступай с людьми так, как хотел бы, чтобы поступили с тобой». Вдруг кому-то пригодится
  • Узнать что-нибудь новенькое как о себе, так и о разработке в комментариях.
  • Попиарить свой генератор приложения ASS.

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

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

Концепт AngularJS service для именованных соединений socket.io

Время на прочтение5 мин
Охват и читатели13K
Доброго времени суток, друзья!

В процессе работы над одним сервисом, фронтенд которого построен на AngularJS, возникла необходимость общаться с сервером socket.io по разным логическим каналам. При этом было желание обойтись всего одним реальным физическим соединением с сервером и иметь в коде приложения отдельные объекты подключений для каждого канала. Что из этого получилось, можно посмотреть под катом.


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

Разделяй и властвуй или как сделать ваше приложение структурированным

Время на прочтение3 мин
Охват и читатели12K
Как говорится в древней пословице – сколько людей столько и стилей написания кода. В сегодняшней статье я хотел бы расскрыть все особенности правильной настройки структуры AngularJS.
Как в любом приложении у нас должна быть точка входа, начальная точка откуда будет стартовать наше приложение. За частую я использую просто app. В этом файле, который не плохо было бы назвать main.js мы напишем такой код:
Читать дальше →

Пример приложения — телефонной книги на AngularJS + Bootstrap v3

Время на прочтение4 мин
Охват и читатели68K
Сообществу Angular требуются свежие туториалы и учебники с простыми примерами на последних версиях библиотек. Правила, которые работали в Angular v0.X, уже не все действуют, в чём легко убедиться, а хочется разобрать что-то более сложное, чем фильтр из учебника на сайте и TODO-лист из примеров реализации (как, например, найденный для v1.0.3: jsfiddle.net/dakra/U3pVM ). Когда такие примеры покажутся слишком простыми, хочется посмотреть на развитие постановки задачи и приближенное к реальности приложение с некоторым оформлением стилей.

Предлагается вниманию пример приложения — работы с телефонной книгой в 2 списках: основного и «spam». Каждый из списков подвержен фильтрации (ну это — самое простое и встроенное в фреймворк), редактированию элементов, добавлению новых и удалению имеющихся. Одним кликом переносятся элементы из одного списка в другой, а подсветки элементов сделаны в стиле Bootstrap v.3.
Читать дальше →

Angular boilerplate. Простота — тренд молодежи

Время на прочтение4 мин
Охват и читатели23K
Любая физическая система стремится к состоянию с наименьшей потенциальной энергией. И программисты не исключение. Поэтому речь пойдет о том, как упростить себе жизнь при разработке на angular.js, используя при этом сервисы, которые сейчас в тренде. Главным образом, я буду ненавязчиво пиарить свое архитектурное решение angular-boilerplate, а на закуску предложу поделиться своим опытом и идеями в комментариях.

Мотивация


Свести рутину к минимуму, создать интуитивно понятную архитектуру и собрать вместе то, что называется best practices.
Читать дальше →

Простой вызов удалённых сервисных методов в одностраничных приложениях

Время на прочтение3 мин
Охват и читатели9.6K
В этой статье, я хочу поделиться своим подходом в организации клиент-серверного взаимодействия, в одностраничных браузерных приложениях с серверной частью на Java.

Сокращённо, я называю этот подход «Json Remote Service Procedure Call» — JRSPC. (Не очень благозвучно, возможно, но из песни слова не выкинешь.)

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

Например, на сервере, определение бизнес-метода выглядит так:

@Component("testService")
public class TestService{
    @Remote
    public String testMethod(Long userId, String role, boolean test,
            List<User> users, User user){    
            ...
           return "ok"; 
    }   
}    


а его вызов на клиенте — так:

var params = [userId, role, true, [{id:1, login:"111"},  {id:2, login:"222"} ], {id:3, login:"333"}]
Server.call("testService", "testMethod",   params,  sucessCallback, errorCallback, controlWhichWillDisabledUntilResponse);	


Больше, при определении метода, нигде, никакого кода не пишется.

Как это работает

Polyfill для обхода проблемы с браузерным автозаполнением форм

Время на прочтение1 мин
Охват и читатели9.2K
Год назад в репозитории AngularJS был создан issue #1460 «Form model doesn't update on autocomplete».

Браузер, при автозаполнении формы ранее сохраненными данными (например, вводим email — браузер заполняет пароль автоматически) никак не извещает javascript о новых данных в поле.
Читать дальше →

Дросселирование ввода на AngularJS с помощью debounce

Время на прочтение3 мин
Охват и читатели15K
Существуют различные сценарии для использования дросселирования (throttling) ввода так, что пересчет значений фильтра будет происходить не каждый раз при изменении значения, а реже. Более подходящий термин — это «устранение дребезга» (debounce), так как в сущности вы ожидаете стабилизации значения на каком-либо постоянном уровне перед вызовом функции, чтобы не вызвать «дребезг» постоянных запросов к серверу. Канонический случай такого рода — это пользователь, вводящий текст в поле ввода для фильтрации списка элементов. Если логика вашего фильтра включает некоторый оверхед (например, фильтрация происходит через REST-ресурс, который выполняет запрос на базе данных бекенда), то вы точно не захотите все время перезапускать и перезагружать результаты запроса в то время, как пользователь пишет текст в поле. Более правильным будет вместо этого подождать, пока он закончит, и уже после этого выполнить запрос один раз.

Простое решение этой проблемы находится тут: jsfiddle.net/nZdgm

Представим, что у вас есть список ($scope.list), который вы публикуете как фильтрованный список ($scope.filteredList) на основе чего-либо содержащего текст из поля $scope.searchText. Ваша форма выглядела бы примерно следующим образом (не обращайте внимание на чекбокс throttle пока что):
Читать дальше →