Introduction
This article introduces the $httpBackend Service in AngularJS.
We can do two types of testing using AngularJS, the first is Unit Testing and the second is End to End testing, in other words E2E testing.
During Unit Testing Angular isolates the code and checks each part of code but in End to End all the code is checked by running the entire code.
Here I will show a small example of how E2E testing will work.
Step 1
First of all you need to add two external files to your application, they are:
- angular.min.js
- angular-mocks.js
For this you can go to the AngularJS official site or can download my source code and then fetch these or you can click on this link to download it: ANGULARJS.
After downloading the external file you need to add this file to the head section of your application.
<head runat="server">
<title></title>
<script src="angular.min.js"></script>
<script src="http://code.angularjs.org/1.0.3/angular-mocks.js"></script>
</head>
Step 2
Now after adding the external JS file the first thing you need to do is to add ng-app in the <HTML> Tag otherwise your application will not run.
<html ng-app xmlns="http://www.w3.org/1999/xhtml">
Now I will create a simple application where this service along with it's supportive services will be used.
First I will work on the JavaScript function. Write this code in the head section of your application:
<script>
var app = angular.module('mod', ['ngMockE2E']);
app.run(function($httpBackend) {
$httpBackend.whenGET('/change').respond("hello");
});
app.controller('x', function($scope, $http) {
$scope.doGet = function() {
$http.get('/change').success(function(data) {
$scope.clicked = data;
});
};
});
</script>
Here I created an object for the angular.module in which "mod" and "['ngMockE2E']" are defined. mod is a variable that will be used to bind the application using the ng-app. ngMockE2E shows that it will be an End to End Testing type.
After this $httpBackend is defined that will check for getting the value from the user, if it does get something from the user then it will respond with a massage such as "hello".
After this a controller is created in which the function "x" is defined, in this function a variable is used with service $scope, this variable will hold the output provided through $httpBackend.
Our work on JavaScript is completed and we can move to the design part.
Step 3
Write this code in the body section:
<form id="form1" runat="server">
<div ng-controller="x">
<input type="button" ng-click="doGet()" value="click"/>
<div ng-bind="clicked || 'You Have not Clicked Yet'">?</div>
</div>
</form>
Here I bound the first Div with the function "x" using the ng-controller.
In this Div I took a Button and a Label, the button click is bound to the doGet() function and the label is bound to the variable clicked.
Now our application is created and can be executed.
Output
On running the application you will get an output like this one:
![$httpbackend Service in AngularJS]()
Here you can see that a button and that value is shown that was in the "or" section of Div.
Now if I click on the button then that will be shown that was provided in the default value at the JavaScript section as in the following:
![$httpbackend Service in AngularJS]()
The complete code of this application is as follows:
<html ng-app="mod" xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script src="angular.min.js"></script>
<script src="http://code.angularjs.org/1.0.3/angular-mocks.js"></script>
<script>
var app = angular.module('mod', ['ngMockE2E']);
app.run(function($httpBackend) {
$httpBackend.whenGET('/change').respond("hello");
});
app.controller('x', function($scope, $http) {
$scope.doGet = function() {
$http.get('/change').success(function(data) {
$scope.clicked = data;
});
};
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div ng-controller="x">
<input type="button" ng-click="doGet()" value="click"/>
<div ng-bind="clicked || 'You Have not Clicked Yet'">?</div>
</div>
</form>
</body>
</html>