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

Диалоговое окно при помощи директив в ангулар – Angular JS Directive

Я подготовил новое видео о том, как использовать директивы в ангуларе. Это пример приложения, в котором я использую диалоговое окно для вывода информации. Плюс приложение выполняет разные действия в зависимости от того какая кнопка во всплывающем окне была нажата.

Видео урока:

Код и живой пример:

See the Pen Диалоговое окно при помощи директив в ангулар – Angular JS Directive by Artem Demo (@artemdemo) on CodePen.

Поделиться:

Дайджест полезных ссылок – caniuse.com, CSS фреймворки, JSON генератор, animation CSS

Can I use

http://caniuse.com/

can-i-use

Отличный ресурс для выяснения как поддерживаются современные технологии в различных браузерах – мобильных и десктопных: html5, CSS3, SVG, JS API. Крайне полезно иметь любой хозяйке на своей кухне.

10 CSS фреймворков

http://www.coolwebmasters.com/cssstyle-sheets/4982-10-css-freymvorkov-dlya-veb-razrabotchikov.html

Если вы еще не определились с каким CSS фреймворкам вам удобнее, либо хотите попробовать что-то новое, то эта статья определенно для вас. Сегодня CSS фреймворки пишет каждый желающий, так что можно менять свои предпочтения достаточно часто 🙂

JSON Generator

http://www.json-generator.com/

Screenshot from 2014-08-29 234456

Генератор JSON объектов. прекрасно подходит для случаев когда нужно разработать клиентвоское приложение, а база данных с API еще не готова. Можно быстро на коленке собрать контроллер на серверной части, что бы только выдавал рандомный JSON. прекрасный инструмент.

Animation CSS

http://daneden.github.io/animate.css/

Animation CSS

Отличная библиотек с CSS анимацией. Библиотека дает набор классов, которые уже содержат все настройки анимации. Просто бери и используй.

Поделиться:

Переход по страницам в ангулар – 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 использует тот же скоп, что и контроллер, в котором она находится. Поэтому ей можно “управлять” извне. Изменение ее состояние, будет так же возвращаться в контроллер.

Поделиться: