Category Archives: Angular.js

AngularJS-приложение на TypeScript

Большую часть видео рассказывают о том, что вообще такое TypeScript, а примеры с AngularJS начинаются на 16-17 минуте. https://youtu.be/U7NYTKgkZgo В конце видео есть ссылки на код на гитхабе. Вот они: https://github.com/DanWahlin/AngularIn20TypeScript https://github.com/DanWahlin/AngularIn20JavaScript https://github.com/DanWahlin/AngularTypeScript

Benchpress: автоматическое тестирование производительности AngularJS-компонент

Использование для своего приложения https://youtu.be/e6J_JZaIOAQ Что это такое и как используется для разработки AngularJS core https://youtu.be/x1PJn5qMUT4

AngularJS: как следить за изменением значения произвольных функций

Иногда бывает нужно следить за значением, возвращаемым из функции, не привязанной к $scope (т.е. не являющейся его методом). Допустим, есть некая сложная функция:

function getParams()
{
	if (! map) {
		return false;
	}
	var center = map.getCenter(),
		size = map.getSize(),
		markersList = exportMarkers();

	return {
		zoom: map.getZoom(),
		lat: roundCoord(center.lat),
		lng: roundCoord(center.lng),
		minZoom: 3,
		maxZoom: 18,
		mapWidth: size.x,
		mapHeight: size.y,
		markers: markersList
	};
}

function getParams()

{

if (! map) {

return false;

}

var center = map.getCenter(),

size = map.getSize(),

markersList = exportMarkers();

return {

zoom: map.getZoom(),

lat: roundCoord(center.lat),

lng: roundCoord(center.lng),

minZoom: 3,

maxZoom: 18,

mapWidth: size.x,

mapHeight: size.y,

markers: markersList

};

}

Для того, чтобы отслеживать её изменения, нужно сделать так:

var scope = $rootScope.$new(true);
scope.$watch(function (scope) { return getParams();}, function () {
	// do anything. for instance:
	// $rootScope.$broadcast('params_changed');
}, true);

var scope = $rootScope.$new(true);

scope.$watch(function (scope) { return getParams();}, function () {

// do anything. for instance:

// $rootScope.$broadcast('params_changed');

}, true);

Продолжить чтение: http://www.bennadel.com/blog/2658-using-scope-watch-to-watch-functions-in-angularjs.htm

Маршрутизация в AngularJS 1.4

Сделали бэк-порт из второй версии: http://blog.thoughtram.io/angularjs/2015/02/19/futuristic-routing-in-angular.html. Интересно, надо будет попробовать.

AngularJS Styleguide

Тонна полезностей (best practices) по архитектуре AngularJS-приложения: https://github.com/johnpapa/angularjs-styleguide

Внедрение e2e- и unit-тестов в сборку AngularJS-приложения: Protractor, Karma и gulp

Допустим, у нас уже есть сборка проекта на gulp. И нужно добавить в процедуру сборки релиза e2e-тесты на protractor.

phridge — phantomjs bridge к node.js для высокой скорости

Основная фишка — в том, что между запросами PhantomJs не убивается, а используется повторно. Учитывая, что запуск процесса занимает примерно секунду, производительность должна сильно вырасти. https://github.com/peerigon/phridge/blob/master/README.md Ну а нужно это для генерации на бэкенде страниц для поисковиков для одностраничных приложений.

Тестирование AngularJS с помощью Protractor

http://teamgaslight.com/blog/getting-started-with-protractor-and-page-objects-for-angularjs-e2e-testing Protractor — замена karma.js, который замена testacular

AngularJS: сервис компиляции (интерполяции) шаблонов

Нужно было сделать объектов через шаблоны и отдавать дальше, не в AngularJS. Сделал для этого службу

AngularJS: таймеры и одностраничные приложения

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