AngularJS, JavaScript

AngularJS : Using Promise-Part1

In Modern Web (Web 2.0) , We use so many Asynchronous call in our Web Applications . But sometimes , we need that , A Call is depended on another call .That means – After First Method’s Success CallBack another Method should be called . So if both the call occurs asynchronously , It does not fit my requirement .

So We can use AngularJS Promise to do this kind of things .

Lets see an example .

app.controller('PersonCtrl', ['$scope', '$rootScope', '$http', '$q', 'setting', function($scope, $rootScope, $http, $q, setting) {
    
    $scope.personsFromServer = [
        { Id: 1, Name: 'Shahjada' },
        { Id: 2, Name: 'Talukdar' },
        { Id: 3, Name: 'Masoom' }
    ];

    var getPersonPromise = function() {
        var deferred = $q.defer();
        deferred.resolve($scope.personsFromServer);
        return deferred.promise;
    };

    getPersonPromise().then(function(persons) {
        $scope.persons = persons;
        $scope.personId = persons[0].Id;
    }, function (reason) {
        alert('Failed: ' + reason);
    });
    
}]);

I am mocking PersonsFromServer Data in my example (Suppose this is gonna come from Server By an asynchronous call) .Now I am gonna populate a DropDown after successfully returning the data , and am selecting the first Person as selected Item in DropDown .

<div ng-controller="PersonCtrl">
        <select id="Person"
            ng-model="personId"
            ng-options="p.Id as p.Name for p in persons"
            required>
        </select>
    </div>

The Deferred API

A new instance of deferred is constructed by calling $q.defer().

The purpose of the deferred object is to expose the associated Promise instance as well as APIs that can be used for signaling the successful or unsuccessful completion of the task.

The Promise API

A new promise instance is created when a deferred instance is created and can be retrieved by calling deferred.promise.

The purpose of the promise object is to allow for interested parties to get access to the result of the deferred task when it completes.

Hope you got the idea .

Thanks .
In Part2 , I will show Calling API from Server with Resource and of course with Promise .

Cheers

Standard