Пишу про разработку вообще и в частности про: JavaScript, HTML5, CSS3, AngularJS, ReactJS, Agile, Bitcoins

Переход по страницам в ангулар – Angular JS Pagination

Один из самых распространенных вопросов связанных с программирование на Angular – это вопрос перехода по страницам для длинного списка. Вопрос кажется достаточно тривиальным, но если вы уже не первый день программируете, то знаете, что это стандартная проблема, в которой могут храниться неожиданные подводные камни.

В случае с ангуларом есть несколько решений для постраничного перехода. Вот одно из них:

See the Pen Переход по страницам в ангулар – Angular Pagination by Artem Demo (@artemdemo) on CodePen.

Поделиться:

Телефонная книга на ангулар – AngularJS Phonebook

Пример приложения на Angular JS. Телефонная книга – добавление, удаление, редактирование записей.

Полный код можно посмотреть здесь:

See the Pen Телефонная книга на ангулар – AngularJS Phonebook by Artem Demo (@artemdemo) on CodePen.

Поделиться:

Как заставить $http сервис работать идентично jQuery.ajax()

Одна из не очевидных проблем, с который могут столкнуться разработчики на ангулар и PHP – это передача данных через POST. Дело в том, что все, что работало прекрасно с использованием стандартных механизмов jQuery перестанет так же хорошо работать с использованием сервиса $http. Если передача данных через GET работает прекрасно, то POST сервер откажется понимать полностью.

Корень проблемы виден, если внимательно изучить закладку Network в вашем браузере. Будет сразу очевидно, что один и тот же запрос отправляется с совершенно разным синтаксисом. Если jQuery использует Content-Type: x-www-form-urlencoded и передает данные примерно вот так foo=bar&baz=moe, то Angular использует Content-Type: application/json и передает данные вот так: { “foo”: “bar”, “baz”: “moe” }

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

Эту функцию достаточно вложить в основной модуль вашего приложения и все начнет работать без вопросов.

Ссылки по теме:
http://stackoverflow.com/questions/19254029/angularjs-http-post-does-not-send-data/20276775#20276775
http://victorblog.com/2012/12/20/make-angularjs-http-service-behave-like-jquery-ajax/

Поделиться:

Контроллеры в Ангулар – AngularJS Controllers

Вводное видео по использованию контроллеров в ангуларе.

Поделиться:

Как при помощи JavaScript определить мобильное устройство

Очень популярный вопрос в интернете и здесь я его пишу скорее что бы ответ был всегда под боком 🙂

Решение через логическую проверку:

Более продвинутая функция:

Ссылки по теме:
http://detectmobilebrowsers.com/
http://stackoverflow.com/questions/11381673/javascript-solution-to-detect-mobile-browser
http://stackoverflow.com/questions/3514784/what-is-the-best-way-to-detect-a-handheld-device-in-jquery

Поделиться:

Маршрутизация, роутинг на Ангулар – Angular JS Routing

Как использовать роутинг в ангуларе?
Основные файлы для роутинга в ангуларе.
Маршрутизация в ангуларе.
AngularJS Routing

Поделиться:

Заблокировать выделение текста на экране

Зачастую, при разработке веб приложений возникает необходимость заблокировать выделение текста на экране. Дело в том, что браузер в любом случае пытается относиться к полученному html как к обычной странице а это значит, что любой текст может быть выделен. Это идет в разрез с задачами приложения и тем, как оно должно вести себя.

Приведу пример до блокировки и после:

Select-before         Select-after

Однако, это достаточно просто исправить. Достаточно добавить следующий код на тег body:

В разработке мобильный приложений на html, JS и CSS важно помнить, что мы не делаем обычный сайт. У пользователя должно создаться впечатление, что перед ним приложение, а не страница. Это добавляет работы разработчику, как на этапе проектирования, так и и на этапе написания кода. Естаственно, что и ценник у таких заказов должен быть выше 🙂

Поделиться:

Компонент – всплывающее окно сообщения – AngularJS

Зачастую необходимо передать пользователю информацию через всплывающее окно сообщения. “Вы уверены, что хотите выйти?”, “Код введен не верно” и т.д. и т.п. Причем такое сообщение может всплывать практически в любой части программы.

Самый удобный метод реализации этой задачи – это с использованием директивы, которая будет хранить все необходимое управление всплывающем окном. Вот пример реализации подобной задачи:

See the Pen Pop Up Msg Directive by Artem Demo (@artemdemo) on CodePen.

Директива popUpMsg использует тот же скоп, что и контроллер, в котором она находится. Поэтому ей можно “управлять” извне. Изменение ее состояние, будет так же возвращаться в контроллер.

Поделиться:

Click по кнопке не работает после Ajax

Бывает ситуации, когда новый html контент загружается на лету. Часть этого контента могут быть элементы управления. В общем случае кнопка “далее” для прогрузки следующей страницы. Кнопка приходит после Ajax запроса и должна сразу начинать работать.

Проблема в том, что jQuery в обычном виде при этом перестанет работать после первого перехода. То есть слеждующая канструкция не имеет смысла в этом сценарии:

Какое решение можно предложить?

Эту проблему решит следующий код:

Код для page1.php

Код для page2.php

При использовании .on() JavaScript будет “слушать” нажатие, даже тех элементов, которые добавились на лету, тогда как .click() игнорирует новые элементы.

Поделиться:

Как передавать данные между контроллерами в Ангулар

Передавать напрямую данные от контроллера к контроллеру нельзя. У каждого контроллера свой собственный скоп и в него нет доступа из вне (строго говоря доступ есть, но нужно идти на ухищрения, против природы ангулара и это очень плохая практика). То есть данные одного нельзя прочитать из другого.

В связи с этим возникает вопрос – а как тогда поступать в случаях, когда у разных контроллеров должен быть доступ к одному и тому же объекту данных. Живой пример: вам нужно сделать приложение для магазина спортивных товаров. За отображение кассы у вас отвечает один модуль, а за отображение всех товаров другой. Они оба должны иметь доступ к JSON объекту со всеми данными по товарам, который был получен с сервера.

Как передавать данные между контроллерами в Ангулар

В этом случае можно воспользоваться сервисами ангулара. Например создать внешний сервис, который будет хранить нужный объект и давать туда доступ определенным контроллерам.

Приведу пример:

Поделиться: