Структура нашего AngularJS проекта

Буду рад, если этот пост сэкономит кому-то пару-тройку часов.

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

Continue reading

Userscript console++

I’ve created userscript to extend browser console.

Basic options:

  • own console object with all methods to prevent errors in old browsers
  • using console without context (we can pass console.log as a callback, and no “Illegal invocation” error will be shown)
  • production param (debug information only for dev environment )
  • time and timeEnd methods (if they are not exist)
  • log alias for console.log

Download/install console++.

sources of inspiration:

JavaScript тест в eBuddy

Вот такую вот JavaScript задачку подкинула компания eBuddy.

Создать небольшое web-приложение, которое выдаст приблизительное расстояние в километрах от текущего метоположения пользователя до ближайшей достопримечательности по введеному адресу. История последних запросов сохраняется в приложении и пользователь может искать по ней.

Дополнительно:

  •  достаточно, чтобы работало в HTML5-совместимых браузерах и с предпочтительно адаптивным лейаутом
  •  вы можете использовать  Google Geocoding API для конвертации адреса в координаты и обратно

Встроенные сервисы AngularJS

Встроенные сервисы или сервисы основного модуля(ng) AngulartJS.

$window – ссылка на глобальный объект window
$document – jQuery обертка элемента window.document
$location – синхронизация URL с адресной строкой браузера
$timeout(fn[, delay][, invokeApply]) – обертка для метода window.setTimeout
$sniffer, $browser – “приватные” сервисы для внутреннего использования
$q – сервис работы с асинхронными операциями (promise/deferred)
$rootScope – сервис получения доступа к root scope
$http(config) – сервис взаимодействия по протоколу HTTP (XMLHttpRequest/JSONP)
$httpBackend – низкоуровневый аналог $http (может быть использован в тестах)
$route– сервис роутинга – связывания URL и контроллеров приложения
$routeParams – сервис доступа к параметрам из URL
$cacheFactory(cacheId[, options]) – создания и получения доступа к кэш-хранилищам
$templateCache – сервис кеширования шаблонов
$controller(constructor, locals) – вызов контроллера
$anchorScroll – автоматический скрол к конкретному элементу(до сих пор думаю зачем это было вынесено в сервис)
$filter(name) – создание фильтров используемых во вью
$parse(expression) – конвертирует Ангулар-выражение(expression) в функцию
$interpolate(text[, mustHaveExpression]) – обрабатывает текст содержащий выражения(для этого использует $parse)
$compile(element, transclude, maxPriority) – копилирует шаблон, обрабатывает директивы, связывает события. Использует $interpolate
$exceptionHandler(exception[, cause]) – сервис эксепшенов
$log – логирование

AngularJS: $scope.$unwatch и $scope.$off

По непонятной причине в фреймворке не реализованы ни метод $unwatch(), ни метод $off() для снятия прослушивания объекта($watch())/события($on()).

А для случая, когда нам нужно сделать “unbind“, Angular предлагает (исходя из исходников) следующий способ:

var stopWatch = $scope.$watch('someObject', callback);
 stopWatch();

аналогично для $on:

 var stopListen = $scope.$on('someEvent', callback);
 stopListen();

Если необходимо выполнить обработчик только один раз(на подобие jQuery.one()), можно сделать так:

var stopWatch = $scope.$watch('someObject', function(){
 //some code here
 stopWatch();
});

Публичные свойства AngularJS

  • bootstrap(element[, modules]) – используется для старта фреймфорка вручную
  • injector(modules) – создает функцию-инжектор, которая может быть использована для получения сервисов
  • module(name[, requires], configFn) – метод регистрации модулей приложения
  • copy(source, destination) – полное копирование(deep copy) объекта
  • extend(dst, src[,src2[,src3…]]) – расширение объекта
  • equals(o1, o2) – сравнение значений/объектов
  • element(element) – ссылка на jqLite
  • forEach(obj, iterator[, context]) – организация цилка forEach
  • noop() – функция “пустышка”, которую можно использовать как заглушку для колбэков
  • identity(value) – создает функцию, которая вернет значение(используется как обертка для мест, где нужно передавать строго функцию)
  • bind(self, fn, args)карринг для функции fn
  • toJson/fromJson – конвертация в/из JSON
  • isUndefined, isDefined, isString, isFunction, isObject, isNumber, isElement, isArray, isDate – методы проверки принадлежности типу
  • version – версия продукта
  • lowercase/uppercase – перевод в нижний/верхний регистр
  • callbacks – объект-коллекция колбэков для JSONP

AngularJs Batarang

Если вы уже работаете с AngularJS, то наверняка заметили, что стандартные инструменты веб разработчика не предоставляют необходимую функциональность, иногда хочется чего-то более специализированного на конкретных особенностях фреймворка. И нам спешит на помощь расширение для ChromeAngular Batarang.

Инструмент еще достаточно сырой, сами авторы этого не скрывают: “We are releasing this early version because we’d love to get your feedback. Let us know what you think and what we should add or improve in the AngularJS Google Group.” Но все же уже можно начинать пробовать на вкус.

Итак что же нам дает использование Batarang’a?

Continue reading