Angular — Quick prototyping using angular-mocks

Gerard Sans
AngularZone Community
2 min readNov 21, 2014

Angular prototyping

One of the huge benefits of Angular is that you can very quickly prototype anapplication or idea while still using production code.

In this protip I will provide a basic skeleton to get started with angular-mocks so youwill know how to mock angular requests done with $http.

Features shown in this protip:

  • setting up angular-mocks
  • deciding which $http requests are mocked or not
  • being able to use a basic mocked user api

A working code will be included at the end.

1) Add mock dependency

First you need to include ‘angular-mocks.js’ script file in your project.

You can go to the angular site to find out the right version. Angular

Once that is done, you will need to add the dependency to your app.

2) Setup mock $http routes

We will be displaying a simple list of users so we will be calling the backend with ”api/users”. In order to provide the actual list we will use a service.

3) Make request using $http

While using angular-mocks we can do the regular calls to $http as if the call was being made to the real backend.

Conclusion

With this basic setup you can concentrate in one feature at a time while not depending on a full fledged backend api. This method can also be used with ngResource as internally it relies also on $http.

Resources

ngMockE2E $httpBackend ngResource

Demo code: link

More

For a full guide to Unit Testing with Jasmine continue reading this post

--

--

Gerard Sans
AngularZone Community

Helping Devs to succeed #AI #web3 / ex @AWSCloud / Just be AWSome / MC Speaker Trainer Community Leader @web3_london / @ReactEurope @ReactiveConf @ngcruise