Category Archives: javascript
AngularJS: повтор последних запросов при обрыве соединения
Решил сделать кнопку «обновить», которая показывается при обрыве сетевого соединения и повторяет неудавшиеся запросы. Очень актуально для мобильных приложений.
API уведомлений в браузере
Пока не все поддерживают, ие совсем в пролёте, но тем не менее: http://habrahabr.ru/post/183630/
Cookie — HTTP only
Век живи — век учись. Как-то я упустил эту тему. В общем, бывают куки, которые сервер ставит, и общается с браузером с использованием этих кук, но при этом javascript к ним не имеет доступа даже на чтение. Такие куки выглядят в Chrome так: Как они ставятся в php — http://ru2.php.net/manual/en/function.setcookie.php (параметр $httponly)
Квест о запросах браузеров к внешним ресурсам в разных ситуациях
http://jakearchibald.github.io/request-quest/
AngularJS: Внедрение зависимости от ngLocale
|
1 2 3 4 5 6 |
angular.module('CommonFilters', ['ngLocale']). filter('month_names', ['$locale', function ($locale) { return function month_names() { return $locale.DATETIME_FORMATS.MONTH; } }]). |
AngularJS: одновременное асинхронное выполнение двух сервисов
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
angular.module('MyModule', []). // controllers controller('FolderListCtrl', ['$scope', '$q', 'Async', 'Service1', 'Service2', function FolderListCtrl($scope, $q, Async, Service1, Service2) { $q. all([Async(Service1.query), Async(Service2.get)]). then(function (responses) { $scope.service1Res = responses[0]; $scope.service2Res = responses[1]; }); }]). factory('Async', ['$q', function Async($q) { return function (ResCall, params) { var d = $q.defer(); if (angular.isFunction(ResCall)) { ResCall(params, function(response) { d.resolve(response); }); return d.promise; } throw new Error('wrong invocation with ' + ResCall.toString()); }; }]) |
Можно было бы сделать дополнительные проверки, но мне они показались излишними. По мотивам этого ответа: http://stackoverflow.com/a/15300364/801426
e2e-тестирование AngularJS
Нужно поставить karma (я использовал версию 0.9.1). Вот описание установки и официальная документация по использованию — http://karma-runner.github.io/0.8/index.html (видео достаточно сильно устарело, годится только для того, чтобы понять в общих чертах).
unit-тестирование AngularJS
http://www.yearofmoo.com/2013/01/full-spectrum-testing-with-angularjs-and-testacular.html — эту статью я уже упоминал; теория тестирования AngularJS. http://docs.angularjs.org/guide/dev_guide.unit-testing — небольшая и не слишком полезная официальная документация. http://karma-runner.github.io/0.8/index.html — инструмент для запуски автоматических тестов (как правильно подгружать внешние шаблоны). Примеры: https://github.com/vojtajina/ng-directive-testing https://github.com/angular/angular-seed https://github.com/IgorMinar/foodme/tree/master/test
Отложенная загрузка шаблона в AngularJS
Допустим есть некий шаблон, который нужно показать, только когда пользователь заблокирован. Вот код.
|
1 2 3 |
<section ng-show="showUserBlocked"> <div ng-include="'views/partials/user_blocked.html'"></div> </section> |
Но тогда получится, что блок покажется пользователю только когда будет выставлена переменная showUserBlocked, а внешний шаблон будет подгружаться в любом случае сразу при загрузке страницы. Что неправильно, особенно на мобильных устройствах. Решение этой проблемы — простое:
|
1 2 3 |
<section ng-show="showUserBlocked"> <div ng-include="showUserBlocked && 'views/partials/user_blocked.html'"></div> </section> |
Т.е. пока переменная showUserBlocked …
Javascript: right/bottom offset у элемента
Быстрый способ узнать смещения элемента: https://developer.mozilla.org/en-US/docs/DOM/element.getBoundingClientRect (http://codepen.io/sgospodarets/pen/ybtqk). Можно использовать и для вычисления длины/высоты, если посчитать scrollTop clientTop.