Promise In AngularJS

Introduction

Promise is like giving some work to someone and he promises you that the work will be complete. Now until the work is done you can prepare yourself for three situations i.e. he'll do it in a perfect manner, he'll do it but it will not be useful for you, and lastly he has not done it due to some reason.

I have created a sample application to explain it.

Step 1

Firstly, I added a HTML page which will be used to call the controller, and show the custom output.

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="angular.js"></script>
<script src="AngularScript.js"></script>
</head>
<body ng-app="angularApp">
<form ng-controller="angularController">
<h2><label ng-bind="Member"></label></h2>
</form>
</body>
</html>

Here, I created a h2 tag which will show the result coming due to response from promise.

Step 2

After creating the HTML, I worked on the Angular part and for this I created a separate JavaScript file.

var angularApp = angular.module('angularApp', []);
angularApp.controller('angularController', function ($scope, angularFactory) {
angularFactory.checkValues().then(function (data) {
var UserType = JSON.parse(data.d);
if (UserType.Name == "Anubhav") {
$scope.Member = "You are Admin";
}
else {
$scope.Member = "You are not Admin";
}
}, function (error) {
});
});
angularApp.factory('angularFactory', function ($http, $q) {
return {
checkValues: function () {
dataArr = [];
dataArr.push(new Object());
dataArr[0]["Name"] = "Anubhav";
return $http({
url: 'WebService1.asmx/Save_Session',
dataType: 'json',
method: 'POST',
data: "{'aray':" + JSON.stringify(dataArr) + "}",
headers: {
"Content-Type": "application/json"
}
}).then(function (resp) {
if (typeof resp.data === 'object') {
return resp.data;
} else {
return $q.reject(response.data);
}
}, function (err) {
return $q.reject(err.data);
});
}
}
});

Here, firstly I created a module and name it "angularApp".

After this I created a controller "angularController" in which factory method is called. Here you can see that I have used ".then;" it works only when our factory method returns something. Inside that first function is the success function and the second one is error function.

After Controller, I created factory where I made a HTTP POST call to WebService Method, I passed some dummy data in an object. Here also you can see that I have used ".then" which clearly means that functions inside "then" will only execute when something is returned from WebService, if object is returned then it is passed to controller, otherwise deferred state is rejected.

Step 3

At the end I created a WebMethod in WebService.

[WebMethod]
public object Save_Session(List<Object> aray)
{
string text = "";
try
{
foreach (Dictionary<string, object> item in aray)
{
text = new JavaScriptSerializer().Serialize(item);
};
return text;
}
catch (Exception ex)
{
return text;
}
}

You can see that from here I am also sending the object, which was needed in the success function. You can modify all the codes according to your needs, it's just a simple method.

Now let's run our application and see the output.

Output

On running the application, just open the console and check that controller is hit.

From controller, the factory method is called and from there sample object is send to the WebService:

Now from Web Service again object is send which is retrieved in first function inside "then"

Now this data is returned to controller and there some conditions are checked for this returned data.

According to the conditions fulfilled data is shown on UI.

9 Comments

Join the conversation! Your thoughts help the community grow.

Santhakumar Munuswamy10y ago
Thanks for nice article
Anubhav Chaudhary10y ago
Thanks All
Nanddeep Nachan10y ago
Thanks for sharing!
Gaurav Gupta10y ago
What is benefit to use service as promise instead of simple service?
- Anubhav Chaudhary10y ago
  You can use it with async call, which will allow your further work to get complete and will definitely return you something.
- Gaurav Gupta10y ago
  Thanks
Arul R10y ago
Nice
Debasis Saha10y ago
Good One..
Mohammed Ibrahim10y ago
nice