Эмуляция запросов к серверу в angular.js

Очень удобно, если сначала разрабатывается полностью клиентская часть.

Сначала нужно подключить angular-mocks

index.html

<script src="scripts/vendor/angular.js"></script>
<script src="scripts/vendor/angular-resource.min.js"></script>
<script src="scripts/vendor/test/angular-mocks.js"></script>

Вся магия здесь (обратите внимание на ngMockE2E и .run):

app.js

var staticApp = angular.module('staticApp', ['ngMockE2E', 'trainingService'])
	.config(['$routeProvider', function ($routeProvider) {
		$routeProvider
			.when('/', {
				templateUrl: 'views/main.html',
				controller: 'MainCtrl'
			})

			.when('/training', {
				templateUrl: 'views/trainingList.html',
				controller: 'TrainingListCtrl'
			})

			.when('/training/:id', {
				templateUrl: 'views/training/read.html',
				controller: 'TrainingCtrl'
			})

			.when('/training/:id/edit', {
				templateUrl: 'views/training/edit.html',
				controller: 'TrainingEditCtrl'
			})

			.otherwise({
				redirectTo: '/'
			});
	}])

	// здесь происходит подмена запросов к серверу
	.run(function ($httpBackend) {
		$httpBackend.
			whenGET(/\/trainings\/.*\.json/).
			respond(200, {some: 'any'}, {header: 'one'});

		$httpBackend.
			whenGET(/.*/).
			passThrough();
	});

var staticApp = angular.module('staticApp', ['ngMockE2E', 'trainingService'])

.config(['$routeProvider', function ($routeProvider) {

$routeProvider

.when('/', {

templateUrl: 'views/main.html',

controller: 'MainCtrl'

})

.when('/training', {

templateUrl: 'views/trainingList.html',

controller: 'TrainingListCtrl'

})

.when('/training/:id', {

templateUrl: 'views/training/read.html',

controller: 'TrainingCtrl'

})

.when('/training/:id/edit', {

templateUrl: 'views/training/edit.html',

controller: 'TrainingEditCtrl'

})

.otherwise({

redirectTo: '/'

});

}])

// здесь происходит подмена запросов к серверу

.run(function ($httpBackend) {

$httpBackend.

whenGET(/\/trainings\/.*\.json/).

respond(200, {some: 'any'}, {header: 'one'});

$httpBackend.

whenGET(/.*/).

passThrough();

});

Собственно всё.
Но для полноты картины приведу использование.
Я использую сервис trainingService для REST-запросов на этой странице.

training.js

angular.module('trainingService', ['ngResource']).
	factory('Training', function ($resource) {
		return $resource('/trainings/:id.json', {id: '@id'}, {
			query: {method: 'GET', params: {id: 'all'}, isArray: true}
		});
	});

angular.module('trainingService', ['ngResource']).

factory('Training', function ($resource) {

return $resource('/trainings/:id.json', {id: '@id'}, {

query: {method: 'GET', params: {id: 'all'}, isArray: true}

});

И остался контроллер

staticApp.controller('TrainingEditCtrl', function ($scope, $routeParams, Training) {
	$scope.training = Training.get({id: $routeParams.id}, function (training) {
		if (training.restricted) {
			$scope.restricted = true;
		}
	});

	$scope.saveTraining = function ()
	{
		$scope.training.$save();
	};
	...
});

staticApp.controller('TrainingEditCtrl', function ($scope, $routeParams, Training) {

$scope.training = Training.get({id: $routeParams.id}, function (training) {

if (training.restricted) {

$scope.restricted = true;

}

});

$scope.saveTraining = function ()

{

$scope.training.$save();

};

...

});

Ссылки по теме:
http://docs.angularjs.org/api/ngMockE2E.$httpBackend,
http://docs.angularjs.org/api/ngMock.$httpBackend,
простой пример (правда у меня так и не завёлся его аналог) — http://jsfiddle.net/vojtajina/DQHdk/

Эмуляция запросов к серверу в angular.js

Similar Posts

2 Responses so far.

LEAVE A COMMENT Отменить ответ