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