Как стать автором
Обновить
16.76

Angular *

JavaScript-фреймворк

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

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

Время на прочтение4 мин
Количество просмотров67K
Сообществу 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.4K
В этой статье, я хочу поделиться своим подходом в организации клиент-серверного взаимодействия, в одностраничных браузерных приложениях с серверной частью на 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 мин
Количество просмотров9K
Год назад в репозитории 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 пока что):
Читать дальше →

Избавляемся от лишних $watch'еров

Время на прочтение2 мин
Количество просмотров8.3K
Хотел бы поделиться небольшой заметкой о том, как ускорить выполнение $digest() путем замены стандартных директив эквивалентами, которые не вызывают $watch.
Читать дальше →

Отмена изменения пути в AngularJS

Время на прочтение4 мин
Количество просмотров17K
Давно полюбив Angular, я только сейчас добрался до блога автора фреймворка Dan Wahlin. А зря — там можно найти много интересных и нужных каждому приложению мыслей. Одну из них я и перевёл в этой статье. В ней вы узнаете как можно остановить переход на другую страницу в приложении Angular.



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

Загрузка модуля по требованию в AngularJS

Время на прочтение11 мин
Количество просмотров18K
Если вы очень спешите: то да, отложенная загрузка модулей в AngularJS возможна, и код необходимый для этого вы можете видеть ниже.

Неужели AngularJS не поддерживает отложенную загрузку в каким либо способом?


AngularJS является одним из лучших шаблонов для front end разработки, но он все еще молод, и не имеет нескольких важных возможностей (кто сказал хорошего маршрутизатора?).
В то время как большинство из этих возможностей может быть добавлено в виде модулей, которые можно найти в google или на специализированных веб сайтах, есть некоторые функции, которые не получится добавить таким способом.
В настоящее время многим требуется асинхронная загрузка модулей, и кажется Google собирается реализовать ее во второй версии фремворка, но кто знает, когда это будет…
Читать дальше →

Социальные кнопки в проекте на Caché

Время на прочтение5 мин
Количество просмотров7.8K
Одной из задач в проекте Вакансии по технологиям InterSystems, было создание кнопок «поделиться» для основных, на наш взгляд, социальных сетей. А конкретно для каждой вакансии необходимо:
  • внесение её логотипа;
  • название вакансии;
  • краткое описание;
  • знать из какой соц. сети пришел пользователь.

Как ни странно, это оказалось не такой уж и простой задачей при реализации на AngularJS
по следующим причинам:

250 строк кода, распознающих дату на русском языке

Время на прочтение2 мин
Количество просмотров47K
Около года назад мне понадобилось распознавать даты в тексте, который вводят пользователи. Пришлось немного разобраться в регулярных выражениях и написать функцию, на вход которой поступает текстовая строка, а в результате получается распознанная дата.



Пример и код в jsFiddle.
Читать дальше →

Бесконечная прокрутка в веб-приложениях с примерами на AngularJS

Время на прочтение8 мин
Количество просмотров36K
Мишко Хевери, главный разработчик Ангуляра, как-то упомянул, что приложение гарантированно работает без тормозов, если в нем не более 100 активных областей видимости. Такой подход, в общем, применим к любым приложениям. В играх давно не рендерят то, чего игрок не видит и только в вебе пока еще считается нормой отобразить целиком список из нескольких тысяч элементов. С приходом js-фреймворков ситуация должна измениться и лучшим решением станет удаление из DOM того чего нет на экране, нежели отказ от промежуточных тегов, биндингов и других вещей, облегчающих разработку. Поэтому провел небольшой анализ решений для отображения больших списков. Наткнулся на пару статей:

1. The Infinite Path of Scrolling



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

Angular. Почему не работают вложенные инклуды

Время на прочтение2 мин
Количество просмотров11K
Это не статья — скорее заметка. И да, она для новичков в Angular.

Частый вопрос — почему в Angular не работают вложенные инклуды? Работают. Просто Angular — это не php.

Планируя лэйаут, мы обычно представляем что-то такое:
  • Меню сверху,
  • Меню слева,
  • Контент в центре
  • Футер

Первое что пытаемся сделать, так это добавить в главный шаблон ngView, а в шаблоны нижнего уровня добавить ngInclude. Пробуем, у нас не получается, идём читать StackOverFlow (давайте будем честны — сначала StackOverFlow, потом, может быть, если лениво не будет, — документацию).
И там нам говорят что-то в духе, “чувак, используй angular ui-router”, или “зацени, какой я себе костылесипед собрал!”.
Читать дальше →

Подробное руководство по разработке мобильных приложений AngularJS

Время на прочтение14 мин
Количество просмотров47K
Мобильные приложения, это не будущее разработки, это уже настоящее. В настоящее время пользователей мобильных приложений уже 1.2 млрд. человек, и это количество постоянно растет (Wikipedia). Вскоре количество мобильных устройств превзойдет количество людей на планете. Если скорость роста количества мобильных устройств останется неизменной, то к 2017 году ими будут пользоваться 5.1 млрд. человек.
Для нас, как для разработчиков приложений, важно разрабатывать свои приложение с учетом мобильных пользователей, если мы хотим чтобы они были востребованы. В AngularJS реализована поддержка мобильных устройств, написанная как командой AngularJS, так и сообществом.
В этой статье мы будем работать с двумя различными способами, чтобы дать читателям опыт в разработке мобильных приложений.
Читать дальше →

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

Сделай свой AngularJS: Часть 1 — Scope и Digest

Время на прочтение34 мин
Количество просмотров89K
Angular — зрелый и мощный JavaScript-фреймворк. Он довольно большой и основан на множестве новых концепций, которые необходимо освоить, чтобы работать с ним эффективно. Большинство разработчиков, знакомясь с Angular, сталкиваются с одними и теми же трудностями. Что конкретно делает функция digest? Какие существуют способы создания директив? Чем отличается сервис от провайдера?

Несмотря на то, что у Angular довольно хорошая документация, и существует куча сторонних ресурсов, нет лучшего способа изучить технологию, чем разобрать ее по кусочкам и вскрыть ее магию.

В этой серии статей я собираюсь воссоздать AngularJS с нуля. Мы сделаем это вместе шаг за шагом, в процессе чего, вы намного глубже поймете внутреннее устройство Angular.
Сделаем Angular вместе

AngularJS 1.2.0: Своевременная доставка

Время на прочтение1 мин
Количество просмотров14K
Долгожданный выпуск AngularJS 1.2.0 готов. Ущипните себя, это не сон.

В AngularJS 1.2.0 исправлено множество проблем, найденных в 1.2.0-RC3, и введено несколько новых функций.

Со времени последнего стабильного релиза, наиболее заметными изменениями являются:
Читать дальше →

Порционное получение данных в Sharepoint 2010

Время на прочтение3 мин
Количество просмотров4K
Понадобилось мне как то раз, сделать порционную загрузку данных на страницу без PostBack запроса, причем с данные должны были браться из списка Sharepoint. Обратившись к великому Google пришел к выводу, что у меня есть только один вариант: REST Interface.
Client Object Model не рассматривался ввиду громоздкости получившегося бы кода.
Для биндинга получаемых данных было решено использовать Angular JS
Читать дальше →

Вариант условного роутинга в AngularJS

Время на прочтение6 мин
Количество просмотров25K
Я новичок в AngularJS, совсем недавно решил его использовать в своем хобби-проекте. Довольно быстро передо мной встала задача настроить роутинг по определенным условиям, самое простое и очевидное из таких условий — авторизован пользователь или нет. Приложение содержит страницы, открытые любому пользователю, и страницы, куда можно зайти только авторизовавшись. Если авторизации нет, нужно попробовать ее получить прозрачно для пользователя, если это не удалось — средиректить на страницу логина.

На сколько я понимаю, это задача достаточно распространенная, тем не менее я не нашел простого готового способа сделать это из коробки. Потратив изрядное количество времени на гугление, чтение документации и эксперименты, я в итоге нашел достаточно элегантное решение для моего случая. Спешу поделиться своим велосипедом, надеюсь, это поможет сэкономить время таким же начинающим пользователям AngularJS. Возможно, найдется гуру, который укажет на то самое стандартное решение, которое я почему-то не нашел. Я, например, еще не разбирался с ui-router.
Читать дальше →

Оптимизация производительности длинных списков в AngularJS

Время на прочтение7 мин
Количество просмотров20K
AnglarJS это здорово! Но при работе с большими списками, содержащими сложной структуры данных, он может начать работать очень медленно! Мы столкнулись с этой проблемой при переносе нашей административной панели на AngularJS. Она должна была работать без задержек при отображении около 500 строк. Но на первое отображение уходило до 7 секунд. Ужасно!
Мы обнаружили два узких места в нашей реализации. Одно было связано с директивой ng-repeat, а другое с применением фильтров.
Эта статья рассказывает о результатах наших опытов с различными подходами по решению, или смягчению, возникшей проблемы с производительностью. Это даст вам идеи и советы, куда вы можете приложить свои силы, а какие подходы все-таки не стоит использовать.
Читать дальше →

Разработка директив angularjs — это просто

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

AngularJS директивы – это клево


AngularJS является каркасом (фреймворком) для построения web приложений, который позволяет создавать сложные приложения достаточно просто. Одна из его лучших возможностей, это создание директив, которые являются повторно используемыми web компонентами. Это дает возможность создавать новые HTML теги и атрибуты, которые могут динамично отображать контент в ответ на изменение данных, и обновлять сами данные, в случае необходимости.
Это очень высокопроизводительный подход, поскольку он позволяет вам оборачивать сложное взаимодействие с DOM в повторно используемые пакеты кода.
Читать дальше →

Кэш для фильтров AngularJS с помощью Lo-Dash

Время на прочтение4 мин
Количество просмотров7.2K
AngularJS как быстрый тигр ^.^

Пишу диплом где решаю одну из задач — реализация анонимного быстрого веб чата. Быстрого во всех смыслах — загрузка, работа приложения, использование (прочь авторизацию). Выбор остановил на связке: Node.js фреймворк SocketStream и AngularJS на стороне клиента. В процессе работы столкнулся с проблемой — повторные расчёты производимые фильтрами на одной и той же модели. Детали проблемы и решение под катом.
Читать дальше →