Coleção AngularJs Meetup South London | Este artigo
Prototipagem angular
Um dos grandes benefícios do Angular é que você pode criar um protótipo de aplicativo ou ideia muito rapidamente enquanto usa o código de produção.
Neste protip, irei fornecer um esqueleto básico para começar a fazer simulações do angular, para que você saiba como simular solicitações do angular feitas com $ http.
Recursos mostrados neste protocolo:
- setting up angular-mocks
- deciding which $http requests are mocked or not
- being able to use a basic mocked user api
Um código de trabalho será incluído no final.
1) Adicionar dependência simulada
Primeiro você precisa incluir o 'angular-mocks.js'
arquivo de script em seu projeto. Você pode ir ao site angular para descobrir a versão correta. Angular
Feito isso, você precisará adicionar a dependência ao seu aplicativo.
angular.module("myapp", ['ngMockE2E'])
2) Configurar rotas simuladas de $ http
Estaremos exibindo uma lista simples de usuários, portanto, chamaremos o back-end com "api/users"
. Para fornecer a lista real, usaremos um serviço.
.run(function($httpBackend, Users) {
//mock users api
$httpBackend.whenGET('/api/users')
.respond( Users.get() );
//you can mock GET, POST, HEAD, PUT, DELETE, PATCH, JSONP. See $httpBackend help.
// allow other requests to use $http. Eg: templates
$httpBackend.whenGET(/.tpl.html$/).passThrough();
})
3) Faça a solicitação usando $ http
Ao usar o angular-mocks , podemos fazer chamadas regulares para $ http, já que a chamada estava sendo feita para o backend real.
$http({method: 'GET', url: '/api/Users'}).
success(function(data, status, headers, config) {
// this callback will be called asynchronously
// when the response is available
$scope.users = data;
}).
error(function(data, status, headers, config) {
// called asynchronously if an error occurs
// or server returns response with an error status.
});
Conclusão
Com esta configuração básica, você pode se concentrar em um recurso de cada vez, sem depender de uma API de back-end totalmente desenvolvida. Este método também pode ser usado com ngResource, visto que internamente também depende de $ http.
Recursos
ngMockE2E
$ httpBackend
ngResource
Código de demonstração: link