Category Archives: Angular.js

AngularJS: использование фильтра в контроллере

controller('MyCtrl', ['$scope', '$filter', function ChatCtrl($scope, $filter) {
	...
	$scope.msg = $filter('formatTime')($scope.created * 1000);
}]);

controller('MyCtrl', ['$scope', '$filter', function ChatCtrl($scope, $filter) {

...

$scope.msg = $filter('formatTime')($scope.created * 1000);

}]);

AngularJS — MVC or MVVM?

MVC vs MVVM vs MVP. What a controversial topic that many developers can spend hours and hours debating and arguing about. For several years +AngularJS was closer to MVC (or rather one of its client-side variants), but over time and thanks to many refactorings and api improvements, it’s now closer to MVVM – the $scope …

Счётчик от Google Analytics в приложении AngularJS

index.html

<script type="text/javascript">
	// TODO for mamba.ru only
	var _gaq = _gaq || [];
	_gaq.push(['_setAccount', 'UA-...']);
	_gaq.push(['_setDomainName', '...']);

	(function ()
	{
		var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
		ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
		var s = document.getElementsByTagName('script')[0];
		s.parentNode.insertBefore(ga, s);
	})();
</script>

// TODO for mamba.ru only

var _gaq = _gaq || [];

_gaq.push(['_setAccount', 'UA-...']);

_gaq.push(['_setDomainName', '...']);

(function ()

{

var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;

ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';

var s = document.getElementsByTagName('script')[0];

s.parentNode.insertBefore(ga, s);

})();

</script>

app.js

var app = angular.module('my', []).config();
app.run(['$location', function($location) {
	$rootScope.$on('$locationChangeSuccess', function(e, next, current) {
		trackPageView();
	});
	function trackPageView()
	{
		if (window._gaq)
		{
			// it's optional
			window._gaq.push(['_setCustomVar',
				1, // This custom var is set to slot #1.  Required parameter.
				'site_version', // The name acts as a kind of category for the user activity.  Required parameter.
				'my' // This value of the custom variable.  Required parameter.
			]);

			window._gaq.push(['_trackPageview'], $location.url());
		}
	}
}]);

var app = angular.module('my', []).config();

app.run(['$location', function($location) {

$rootScope.$on('$locationChangeSuccess', function(e, next, current) {

trackPageView();

});

function trackPageView()

{

if (window._gaq)

{

// it's optional

window._gaq.push(['_setCustomVar',

1, // This custom var is set to slot #1. Required parameter.

'site_version', // The name acts as a kind of category for the user activity. Required parameter.

'my' // This value of the custom variable. Required parameter.

]);

window._gaq.push(['_trackPageview'], $location.url());

}

}]);

https://developers.google.com/analytics/devguides/collection/gajs/gaTrackingCustomVariables http://davidwalsh.name/ajax-analytics

AngularJS: повтор последних запросов при обрыве соединения

Решил сделать кнопку «обновить», которая показывается при обрыве сетевого соединения и повторяет неудавшиеся запросы. Очень актуально для мобильных приложений.

AngularJS: Внедрение зависимости от ngLocale

angular.module('CommonFilters', ['ngLocale']).
	filter('month_names', ['$locale', function ($locale) {
		return function month_names() {
			return $locale.DATETIME_FORMATS.MONTH;
		}
	}]).

angular.module('CommonFilters', ['ngLocale']).

filter('month_names', ['$locale', function ($locale) {

return function month_names() {

return $locale.DATETIME_FORMATS.MONTH;

}

}]).

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 …

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

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