Category Archives: Programming

AngularJS: одновременное асинхронное выполнение двух сервисов

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());
		};
	}])

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

05, 27, 2013
bullgare
Angular.js, Testing
Комментарии к записи e2e-тестирование AngularJS отключены

Нужно поставить karma (я использовал версию 0.9.1). Вот описание установки и официальная документация по использованию — http://karma-runner.github.io/0.8/index.html (видео достаточно сильно устарело, годится только для того, чтобы понять в общих чертах).

unit-тестирование AngularJS

05, 23, 2013
bullgare
Angular.js, Testing
Комментарии к записи 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

Допустим есть некий шаблон, который нужно показать, только когда пользователь заблокирован. Вот код.

<section ng-show="showUserBlocked">
	<div ng-include="'views/partials/user_blocked.html'"></div>
</section>

</section>

Но тогда получится, что блок покажется пользователю только когда будет выставлена переменная showUserBlocked, а внешний шаблон будет подгружаться в любом случае сразу при загрузке страницы. Что неправильно, особенно на мобильных устройствах. Решение этой проблемы — простое:

<section ng-show="showUserBlocked">
	<div ng-include="showUserBlocked && 'views/partials/user_blocked.html'"></div>
</section>

</section>

Т.е. пока переменная showUserBlocked …

Javascript: right/bottom offset у элемента

Быстрый способ узнать смещения элемента: https://developer.mozilla.org/en-US/docs/DOM/element.getBoundingClientRect (http://codepen.io/sgospodarets/pen/ybtqk). Можно использовать и для вычисления длины/высоты, если посчитать scrollTop clientTop.

HTML5-видео для чайников

http://www.catswhocode.com/blog/cross-browser-compatible-html5-videos

Тестирование AngularJS-приложения при помощи Testacular (karma)

05, 15, 2013
bullgare
Angular.js, Testing
Комментарии к записи Тестирование AngularJS-приложения при помощи Testacular (karma) отключены

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

Откомментированный исходный код jQuery

04, 29, 2013
bullgare
javascript
Комментарии к записи Откомментированный исходный код jQuery отключены

http://robflaherty.github.io/jquery-annotated-source/

Performance Checklist for the Mobile Web

http://www.youtube.com/watch?v=0UNWi7FA36M Говорится об оптимизации web-приложений под мобильные устройства. 3 составляющих. Сеть 3G имеет теоретическую максимальную пропускную способность в 3Mbps Радиомодуль мобильных устройств (у которого 3 состояния: Active, Pending, Idle) из спящего режима в режим нормальной работы переходит порядка 1-2 секунд. Поэтому желательно подгружать большие пачки данных сразу и потом эмулировать подгрузку по аяксу (к тому …

Restangular

https://github.com/mgonto/restangular Библиотека, расширяющая $resource в Angularjs, для более удобной работы с REST API