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

Контроллеры в Ангулар – 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 объекту со всеми данными по товарам, который был получен с сервера.

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

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

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

Поделиться:

Подобрка фонов для веб приложений и на все случаи жизни

CSS3 Patterns Gallery

http://lea.verou.me/css3patterns/

CSS3 Patterns Gallery

Интересный набор CSS стилей для оформления фона. CSS3 позволяет создавать очень интересные паттерны, которые хорошо смотрятся на разных экранах.

Noise Texture Generator

http://www.noisetexturegenerator.com/

Noise Texture Generator

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

Ultimate CSS Gradient Generator

http://www.colorzilla.com/gradient-editor/

Ultimate CSS Gradient Generator

Удобный генератор CSS градиента. Выглядит как инструмент фотошопа. Я им пользуюсь постоянно и пока нареканий нет.

Background Image Generator

http://bg.siteorigin.com/

Background Image Generator

Генератор текстур для фона. На выходе вы получаете паттерн в виде картинки. Крайне простой интерфейс.

Поделиться:

Быстрое создание REST API сервера на Slim фреймворк

Не буду объяснять причину необходимости API сервера, тем более что если вам знакомы такие слова как REST и Slim фреймворк, то вы абсолютно точно знаете зачем вам API.

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

  • Powerful router
  • Template rendering with custom views
  • Flash messages
  • Secure cookies with AES-256 encryption
  • HTTP caching
  • Logging with custom log writers
  • Error handling and debugging
  • Middleware and hook architecture
  • Simple configuration

При этом разумеется, что все недостающие модули можно будет прикрутить позже. Я только хотел сказать, что они не входят в стандартную коробку Slim.

Если вам нужно более комплексное решение, то настоятельно рекомендую посмотреть в сторону laravel framework – это потрясающий фреймворк, который удобен практически во всем. Мне он очень нравится и я определенно буду о нем еще не раз писать.

Для того, чтобы начать зайдем на официальный сайт Slim и скачаем последний релиз. Установить Slim можно как через композер, так и просто скачав дистрибутив с гит-хаба. Для простоты скачаем версию с гит-хаба, об установке и использовании композера поговорим в другой раз. После скачивания Slim сразу готов к работе, достаточно просто открыть директорию в которую вы распаковали фреймворк на вашем сервере (локальном или удаленном).

Важно – проверьте, что у вас установлен и работает rewrite_mod, без него будет не то.

Основные элементы файла index.php, который запускает фреймворк:

Теперь немного изменим раутинг. Я хочу сделать API сервис, который умел бы выполнять следующие команды:

  1. Принимать код верификации со стороны клиента, проверять его и выдавать ответ.
  2. Выдавать список товаров для отображения в приложении.
  3. Выдавать ответ открыта ли еще сессия.
  4. Принимать заказанные товары и выдавать ответ обработан ли заказ.

В этой статье я не буду уделять внимание верификации запроса, уделим этому внимание в следующий раз.

Вот и все – серверная часть готова к тестированию.

Ссылки по теме:
http://www.slimframework.com/
REpresentational State Transfer
Status Code Definitions

Поделиться:

Проблема картинок в мобильных веб приложениях.

Практика показала, что использование картинок в мобильных веб приложениях чревато неожиданными проблемами. Дело прежде всего в том, что мобильные смартфоны имеют настолько разные экраны, что просто хоть стой хоть падай. Разрешение варьируется от 320 до 1300 пикселей по горизонтали и это порой не предел. Из этого вытекают сложности с подбором картинок. Слишком маленькие картинки на больших экранах будут ужасно смотреться, а слишком большие будут “кушать” лишний траффик.

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

Приведу пример проблемы, с которой пришлось столкнуться:

Слева PNG картинка в разрешении 320 пикселей справа та же картинка, как она бы выглядела в более высоком разрешении.

SVG-example-png SVG-example-png-bad

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

SVG-support-2014-Aug-29

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

Ссылки по теме:
SVG support on Android, current status

Поделиться: