All TalkersCode Topics

Follow TalkersCode On Social Media

devloprr.com - A Social Media Network for developers Join Now ➔

AngularJS Promise Example

Last Updated : Mar 11, 2024

AngularJS Promise Example

In this article we will show you the solution of angularjs promise example, there is no doubt you have been using promises for a while if you are using AngularJS - regardless of whether you understand them or not.

The promise object now specifies what happens when the request succeeds or fails.

As a reminder, we're passing functions to success or error that will be called later - when the block is finished, we have no idea what to do when we get the name or if we don't get it.

AngularJS' promises implementation is very similar to that proposed in the proposal, but be aware that when promises become standard, AngularJS will likely adapt its promises to behave like native promises.

A promise is exposed by a Deferred object.

The method resolve(), reject(), and notify() are the most commonly used ones. Deferred returns promise object.

When Deferred completes, You call methods either resolve(), reject(), and notify() . It calls callback register to either resolve(), reject(), or notify() according to how it has completed.

Step By Step Guide On AngularJS Promise Example :-

Angularhtml.html
<!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="angular app">
    <form ng-controller="angular controller">
        <h2><label ng-bind="Member"></label></h2>
    </form>
</body>
</html>
angular.js
var angularApp = angular.module('angularApp', []);
angular apppp.controller('angularController', function ($scope, angularFactory) {
    angularFactory.checkValues().then(function (data) {
        var UserType = JSON.parse(data.d);
        if (UserType.Name == "TalkersCode") {
            $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"] = "TalkersCode";
            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);
            });
        }
    }
});
angularscript.js
[WebMethod]
public object Save_Session(List<Object> array)
{
    string text = "";
    try
    {
        foreach (Dictionary<string, object> item in aray)
        {
            text = new JavaScriptSerializer().Serialize(item);
        };
        return text;
    }
    catch (Exception ex)
    {
        return text;
    }
}
  1. In the first step, we write <HTML>, which tells the browser what HTML version we're using. HTML tags are used beginning of HTML documents.
  2. Using the <head> tag, we will explain the project's heading. <title> are open and </title>. Step-by-step tag is used for External style sheets that can be referenced with a full URL or with a path relative to the current web page.
  3. Then AngularJs is a JavaScript framework. It can be added to an HTML page with a <script> tag. The script tag explains the source code we used for the angularjs google API run and the file we used that or the code.
  4. Then the ng-app directive defines the angular js application. As part of the ng-app directive, the "ng-controller" directive specifies the controller for the application.
  5. Then the form is open An angular js application is defined by the ng-app directive. An application's controller is specified by the "ng-controller" directive within the ng-app directive.
  6. Then </form> is close.
  7. After that </body></html> and code should be executed after closed all tags.

Conclusion :-

Promises are not complicated, they’re objects that contain a reference to functions to call when something fails or succeeds.

When you are using a promise, the function you should call is then. then takes two parameters - a callback function for success and a callback function for failure. Taking a look at our original $http example, we can rewrite it to use this function.

You can pass an array of promises to all and you get back a single promise - which is resolved when all of the promises it contains resolve.

This can be useful if you are building complex methods that may have to perform multiple asynchronous tasks - such as multiple ajax calls.

I hope this article on angularjs promise example helps you and the steps and method mentioned above are easy to follow and implement.

Author Image About Amruta

Amruta is an Experienced web developer with 4 years for experience she completed her master's with MCA and passionate about programming Languages for creating technical contents like HTML, CSS, JavaScript, Java, Python, PHP, jQuery.

Follow Amruta On Linkedin 🡪