{"id":20560,"date":"2015-06-04T02:18:05","date_gmt":"2015-06-03T20:48:05","guid":{"rendered":"http:\/\/www.tothenew.com\/blog\/?p=20560"},"modified":"2017-08-03T14:17:09","modified_gmt":"2017-08-03T08:47:09","slug":"angularjs-deferred-promises-basic-understanding","status":"publish","type":"post","link":"https:\/\/www.tothenew.com\/blog\/angularjs-deferred-promises-basic-understanding\/","title":{"rendered":"AngularJS Deferred &amp; Promises- Basic Understanding"},"content":{"rendered":"<div class=\"container\">\n<div class=\"page-header\">\n<h1 id=\"top-of-page\" class=\"page-header\" style=\"text-align: center;\">AngularJS Deferred &amp; Promises-\u00a0Basic Understanding<\/h1>\n<\/div>\n<h3 style=\"text-align: center;\"><span class=\"glyphicon glyphicon-pencil\">Table of Contents<\/span><\/h3>\n<ul class=\"list-group\">\n<li class=\"list-group-item\"><a title=\"Introduction to Asynchronous AngularJs\" href=\"#intro-to-async-ajs\">1. Introduction to Asynchronous AngularJs<\/a><\/li>\n<li class=\"list-group-item\"><a title=\"callbacks-basic-understand\" href=\"#callbacks-basic-understand\">2. Callbacks- Basic Understanding<\/a><\/li>\n<li class=\"list-group-item\"><a title=\"callback-hell\" href=\"#callback-hell\">3. Callback Hell<\/a><\/li>\n<li class=\"list-group-item\"><a title=\"Promise- A Better way to handle callbacks\" href=\"#promise-start\">4. Promise- A\u00a0Better way of handling callbacks<\/a><\/li>\n<li class=\"list-group-item\"><a title=\"promise-in-angularjs\" href=\"#promise-in-angularjs\">5. Promise In AngularJS- $q Service<\/a><\/li>\n<li class=\"list-group-item\"><a title=\"deferred-api\" href=\"#deferred-api\">6. Deferred API<\/a><\/li>\n<li class=\"list-group-item\"><a title=\"promise-api\" href=\"#promise-api\">7. Promise API<\/a><\/li>\n<li class=\"list-group-item\"><a title=\"other-services\" href=\"#other-services\">8. Some other promise based AngularJs Services<\/a><\/li>\n<li class=\"list-group-item\"><a title=\"other-features\" href=\"#other-features\">9. Some other useful features- $q.all()<\/a><\/li>\n<\/ul>\n<h3 id=\"intro-to-async-ajs\" style=\"text-align: center;\">1. Introduction to Asynchronous AngularJs<\/h3>\n<p><a title=\"Angular development\" href=\"http:\/\/www.tothenew.com\/front-end-angularjs-development\">AngularJs,<\/a> It is the most used front-end MVC framework.\u00a0\u00a0It is mostly used to create single page front-end application. When you have started working on AngularJS. You have to deal with the asynchronous call. In respect ti that you must come to know <strong>$http<\/strong> and <strong>$resource<\/strong> services.\u00a0These both services are used to get server side data\u00a0asynchronously. To handle an asynchronous call, you need to define callbacks. <strong>Deferred-Promises<\/strong> is a design pattern which helps you to deal with these callbacks.<\/p>\n<p>Before starting \u00a0Deferred &amp; Promises in AngularJS, Let&#8217;s understand callback and why we actually need\u00a0Deferred-Promises in AngularJS or any other language.<\/p>\n<h3 id=\"callbacks-basic-understand\" style=\"text-align: center;\">2. Callbacks<\/h3>\n<p>In JavaScript, a function is a special kind of object\/ data type which you can pass as an argument. This is one of the most useful features of JavaScript programming language. When you call a function and you do not know when that function will return required result. Here you can pass a callback, which can be call when the result will come.<\/p>\n<div class=\"list-group\">\n<div class=\"list-group-item active list-group-item-heading\">jQuery:<\/div>\n<div class=\"list-group-item\">\n<p>[js]<br \/>\n(function () {<br \/>\n    var successHandler = function (data) {<br \/>\n        console.info(&#8216;Twitter\\&#8217;s data: %j&#8217;, data)<br \/>\n    };<br \/>\n    var ErrorHandler = function (error) {<br \/>\n        console.info(&#8216;Twitter\\&#8217;s error:&#8217;, error)<br \/>\n    };<br \/>\n    $.ajax({<br \/>\n        url: &#8216;https:\/\/api.twitter.com\/1.1\/search\/tweets.json?q=%23freebandnames&amp;since_id=24012619984051000&amp;max_id=250126199840518145&amp;result_type=mixed&amp;count=4&#8217;,<br \/>\n        data: {<br \/>\n            format: &#8216;json&#8217;<br \/>\n        },<br \/>\n        error: ErrorHandler,<br \/>\n        success: successHandler,<br \/>\n        type: &#8216;GET&#8217;<br \/>\n    });<br \/>\n})()      <\/p>\n<p>      [\/js]<\/p>\n<\/div>\n<\/div>\n<div class=\"list-group\">\n<div class=\"list-group-item active list-group-item-heading\">AngularJS:<\/div>\n<div class=\"list-group-item\">\n<p>[js]<br \/>\n(function () {<br \/>\n    var successHandler = function (response) {<br \/>\n        console.info(&#8216;Twitter\\&#8217;s data: %j&#8217;, response.data)<br \/>\n    };<br \/>\n    var ErrorHandler = function (response) {<br \/>\n        console.info(&#8216;Twitter\\&#8217;s error:&#8217;, response.error)<br \/>\n    };<br \/>\n    $http<br \/>\n        .get(&#8216;https:\/\/api.twitter.com\/1.1\/search\/tweets.json?q=%23freebandnames&amp;since_id=24012619984051000&amp;max_id=250126199840518145&amp;result_type=mixed&amp;count=4&#8217;)<br \/>\n        .success(successHandler);<br \/>\n})()      <\/p>\n<p>  [\/js]<\/p>\n<\/div>\n<\/div>\n<p><span class=\"bg-warning\">Here in above example\u00a0successHandler, ErrorHandler is callbacks which run when success or error event fire accordingly. These are the most basic example I found on the internet. Later on, we will learn how to handle these <a title=\"Intuitive Frontend Interfaces with AngularJS\" href=\"http:\/\/www.tothenew.com\/blog\/building-intuitive-frontend-interfaces-with-angularjs\/\">events efficiently in AngularJS<\/a>.<\/span><\/p>\n<h3 id=\"callback-hell\" style=\"text-align: center;\">3. Callback Hell<\/h3>\n<p>It is not a problem to work with $http\/ $resource. The real problem arise when you have to deal with multiple callbacks which are dependent on each other. The result would be something like this-<\/p>\n<div class=\"list-group\">\n<div class=\"list-group-item active list-group-item-heading\">Example:<\/div>\n<div class=\"list-group-item\">\n<p>[js]<br \/>\n(function () {<br \/>\n    asyncCall(function (err, data1) {<br \/>\n        if (err) return callback(err);<br \/>\n        anotherAsyncCall(function (err2, data2) {<br \/>\n            if (err2) return calllback(err2);<br \/>\n            oneMoreAsyncCall(function (err3, data3) {<br \/>\n                if (err3) return callback(err3);<br \/>\n                \/\/ are we done yet?<br \/>\n            });<br \/>\n        });<br \/>\n    });<br \/>\n})()<\/p>\n<p>      [\/js]<\/p>\n<\/div>\n<\/div>\n<p><span class=\"bg-warning\">This is known as callback hell. It is hard to understand and creates a lot of confusion.<\/span><\/p>\n<h3 id=\"promise-start\" style=\"text-align: center;\">4. Promise- A\u00a0Better way of\u00a0handling callbacks<\/h3>\n<p>By the <a title=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Global_Objects\/Promise\" href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Global_Objects\/Promise\">definition<\/a>, \u00a0Promise is an interface which represents a proxy value. ie. We don&#8217;t know the value at the time it&#8217;s created. This promise will return value like any synchronous function in future. There can be\u00a0several states for a promise.<\/p>\n<ul class=\"list-group\">\n<li class=\"list-group-item alert-warning\"><strong>pending:<\/strong> initial state, not fulfilled\/rejected.<\/li>\n<li class=\"list-group-item alert-warning\"><strong>fulfilled:<\/strong> successful operation<\/li>\n<li class=\"list-group-item alert-warning\"><strong>rejected:<\/strong> failed operation.<\/li>\n<li class=\"list-group-item alert-warning\"><strong>settled:<\/strong> the Promise is either fulfilled or rejected, but not pending.<\/li>\n<\/ul>\n<p>The promise is something like a man ask his son to get a weather\u00a0forecast. And son returns a promise that he will go and get the weather forecast. There could be three possible outcomes:<\/p>\n<ul class=\"list-group\">\n<li class=\"list-group-item alert-warning\">A) Weather forecast retrieved! Sunshine. <small>\/\/ promise fulfilled +ve<\/small><\/li>\n<li class=\"list-group-item alert-warning\">B) Weather forecast retrieved! Cloudy and rain. <small>\/\/ promise fulfilled -ve<\/small><\/li>\n<li class=\"list-group-item alert-warning\">C) Couldn&#8217;t get the weather forecast. <small>\/\/promise was rejected<\/small><\/li>\n<\/ul>\n<div class=\"list-group\">\n<div class=\"list-group-item active list-group-item-heading\">Example:<\/div>\n<div class=\"list-group-item\">\n<p>[js]<br \/>\n(function () {<br \/>\n    \/\/ function somewhere in father-controller.js<br \/>\n    var makePromiseWithSon = function () {<br \/>\n        \/\/ This service&#8217;s function returns a promise, but we&#8217;ll deal with that shortly<br \/>\n        SonService.getWeather()<br \/>\n            \/\/ then() called when son gets back<br \/>\n            .then(function (data) {<br \/>\n                \/\/ promise fulfilled<br \/>\n                if (data.forecast === &#8216;good&#8217;) {<br \/>\n                    prepareFishingTrip();<br \/>\n                } else {<br \/>\n                    prepareSundayRoastDinner();<br \/>\n                }<br \/>\n            }, function (error) {<br \/>\n                \/\/ promise rejected, could log the error with: console.log(&#8216;error&#8217;, error);<br \/>\n                prepareSundayRoastDinner();<br \/>\n            });<br \/>\n    };<br \/>\n})()<\/p>\n<p>      [\/js]<\/p>\n<\/div>\n<\/div>\n<p>For better understanding, you can refer to\u00a0<a title=\"http:\/\/andyshora.com\/promises-angularjs-explained-as-cartoon.html\" href=\"http:\/\/andyshora.com\/promises-angularjs-explained-as-cartoon.html\">promise-as-cartoon<\/a>.<\/p>\n<h3 id=\"promise-in-angularjs\" style=\"text-align: center;\">5. Promise In Angularjs- $q Service<\/h3>\n<p>Promises in AngularJS is provided by <strong><span style=\"color: #800000;\">$q service<\/span>.\u00a0<\/strong>It has reach feature like any other Promise library.\u00a0<span style=\"color: #800000;\"><strong><code>$q<\/code><\/strong><\/span> service is a service that helps you to run your code asynchronously. As its documentation say, this is inspired by Chris Kowal&#8217;s Q library (<a href=\"https:\/\/github.com\/kriskowal\/q\">github.com\/kriskowal\/q<\/a>).<\/p>\n<h4>Deferred Object:<\/h4>\n<p>Deferred is an object which exposes the promise. It has \u00a0mainly three methods\u00a0<span style=\"color: #ff6600;\">resolve()<\/span>, <span style=\"color: #ff6600;\">reject()<\/span>, and <span style=\"color: #ff6600;\">notify()<\/span>.\u00a0Deferred returns promise object. When\u00a0Deferred completes, You call methods either\u00a0<span style=\"color: #ff6600;\">resolve()<\/span>, <span style=\"color: #ff6600;\">reject()<\/span>, and <span style=\"color: #ff6600;\">notify() .\u00a0<\/span>It calls callback register to either\u00a0<span style=\"color: #ff6600;\">resolve()<\/span>, <span style=\"color: #ff6600;\">reject()<\/span>, or\u00a0<span style=\"color: #ff6600;\">notify() <\/span>according to how it has completed.<\/p>\n<div class=\"list-group\">\n<div class=\"list-group-item active list-group-item-heading\">Example:<\/div>\n<div class=\"list-group-item\">\n<p>[js]<br \/>\nfunction sayHelloAsync(name) {<br \/>\n    return function () {<br \/>\n        var defer = $q.defer()<br \/>\n        setTimeout(function() {<br \/>\n            \/\/Greet when your name is &#8216;deepak&#8217;<br \/>\n            if (name == &#8216;deepak&#8217;) {<br \/>\n                defer.resolve(&#8216;Hello, &#8216; + name + &#8216;!&#8217;);<br \/>\n            }<br \/>\n            else {<br \/>\n                defer.reject(&#8216;Greeting &#8216; + name + &#8216; is not allowed.&#8217;);<br \/>\n            }<br \/>\n        }, 1000);<\/p>\n<p>        return defer.promise<br \/>\n    }<br \/>\n}      <\/p>\n<p>      [\/js]<\/p>\n<\/div>\n<\/div>\n<h4>Promise\u00a0Object:<\/h4>\n<p>A promise is an object which is return by a Deferred object. You can register different callbacks for different\u00a0events\u00a0<span style=\"color: #ff6600;\">resolve()<\/span>, <span style=\"color: #ff6600;\">reject()<\/span>, or\u00a0<span style=\"color: #ff6600;\">notify() <\/span>and it will execute when the async function has completed.<\/p>\n<div class=\"list-group\">\n<div class=\"list-group-item active list-group-item-heading\">Example:<\/div>\n<div class=\"list-group-item\">\n<p>[js]<br \/>\nvar helloPromise = sayHelloAsync(&#8216;deepak&#8217;);<\/p>\n<p>helloPromise.then(function (data) {<br \/>\n    console.log(data);<br \/>\n}, function (error) {<br \/>\n    console.error(data);<br \/>\n})      <\/p>\n<p>      [\/js]<\/p>\n<\/div>\n<\/div>\n<div id=\"deferred-api\" class=\"panel panel-default\">\n<div class=\"panel-heading\">Deferred API:<\/div>\n<div class=\"panel-body\">A new instance of defer is created by calling <em><strong>$q.defer()<\/strong><\/em>. It has mainly three methods.<\/div>\n<ul class=\"list-group\">\n<li class=\"list-group-item alert-warning\"><span style=\"color: #ff6600;\">.resolve(value)<\/span>\u00a0&#8211; This method is use to resolve the derive promise ie.\u00a0\/\/ promise fulfilled -ve<\/li>\n<li class=\"list-group-item alert-warning\"><span style=\"color: #ff6600;\">.reject(value)<\/span>\u00a0&#8211; This method is use to reject the derived promise ie.\u00a0<small>\/\/ promise fulfilled -ve<\/small><\/li>\n<li class=\"list-group-item alert-warning\"><span style=\"color: #ff6600;\">.notify(value)<\/span>\u00a0&#8211; This method is used to notify the current state of the\u00a0derived promise<\/li>\n<\/ul>\n<\/div>\n<div class=\"list-group\">\n<div class=\"list-group-item active list-group-item-heading\">Example:<\/div>\n<div class=\"list-group-item\">\n<p>[js]<br \/>\nvar getTodoList = function (url) {<br \/>\n    var deferred = $q.defer();<br \/>\n    var data = [<br \/>\n        {<br \/>\n            &quot;task&quot;: &quot;I wanna to learn Web-Worker&#8230;&quot;,<br \/>\n            &quot;stared&quot;: &quot;nopes!!: (&quot;,<br \/>\n            &quot;estimatedTime&quot;: &quot;Infinity&quot;<br \/>\n        },<br \/>\n        {<br \/>\n            &quot;task&quot;: &quot;I wanna to learn Monkey-Patching&#8230;&quot;,<br \/>\n            &quot;stared&quot;: &quot;Yup!!!&quot;,<br \/>\n            &quot;estimatedTime&quot;: &quot;1day&quot;<br \/>\n        },<br \/>\n        {<br \/>\n            &quot;task&quot;: &quot;I wanna to learn ui-router&quot;,<br \/>\n            &quot;stared&quot;: &quot;nopes!!: (&quot;,<br \/>\n            &quot;estimatedTime&quot;: &quot;99999hr&quot;<br \/>\n        }<br \/>\n    ];<br \/>\n    var percentage = 0;<br \/>\n    var interval = $interval(function () {<br \/>\n        percentage = percentage + 5;<br \/>\n        deferred.notify({percentage: percentage});<br \/>\n        if (percentage &gt; 99) {<br \/>\n            $interval.cancel(interval);<br \/>\n            deferred.resolve(data)<br \/>\n        }<\/p>\n<p>    }, 500)<br \/>\n    return deferred.promise;<br \/>\n}      <\/p>\n<p>      [\/js]<\/p>\n<\/div>\n<\/div>\n<div id=\"deferred-api\" class=\"panel panel-default\">\n<div class=\"panel-heading\">Promise API<\/div>\n<div class=\"panel-body\">A new promise is created when you create a defer. You can get the instance of promise object by defer.promise. It is used to getting the result of the defer when a promise has completed. There are three events where you can bind your listeners.<\/div>\n<ul class=\"list-group\">\n<li class=\"list-group-item alert-warning\"><span style=\"color: #ff6600;\">then(successCallback, errorCallback, notifyCallback)<\/span>&#8211; The Regardless promise is resolved or rejected, it calls one of the success or error callback. Notification callback may be called zero or more than one time.<\/li>\n<li class=\"list-group-item alert-warning\"><span style=\"color: #ff6600;\">catch(errorCallback)<\/span>&#8211; This is the shorthand for the promise.then(null, errorCallback) where success callback is not given.<\/li>\n<li class=\"list-group-item alert-warning\"><span style=\"color: #ff6600;\">finally(callback, notifyCallback)<\/span>&#8211; This allows you to watch every single event of a promise. The callback is called once when either promise is resolved or rejected.<\/li>\n<\/ul>\n<\/div>\n<div class=\"list-group\">\n<div class=\"list-group-item active list-group-item-heading\">Example:<\/div>\n<div class=\"list-group-item\">\n<p>[js]<br \/>\nvar promise = getTodoList();<br \/>\npromise.then(function (data) {<br \/>\n    that.list = data;<br \/>\n    that.isVisible = true;<br \/>\n    that.status = &#8216;DONE&#8217;;<br \/>\n}, function (error \/*Error event should handle here*\/) {<\/p>\n<p>}, function (data \/*Notify event should handle here*\/) {<br \/>\n    that.status = &#8216;PENDING&#8217;;<br \/>\n    that.percentage = data.percentage;<br \/>\n})<\/p>\n<p>      [\/js]<\/p>\n<\/div>\n<\/div>\n<\/div>\n<h3 id=\"other-services\" style=\"text-align: center;\">8. $http &amp; $resource<\/h3>\n<p><span style=\"color: #800000;\">$http<\/span> and <span style=\"color: #800000;\">$resource<\/span> are some of a good example of promise based services. Both these services support promise design patterns. Here using these module\/services you can perform your ajax needs.<\/p>\n<p>Since <span style=\"color: #800000;\">$http<\/span> is an abstraction over $q, it has different callbacks. Instead of .then and .catch, it&#8217;s .success and .error and the arguments you get are different.<\/p>\n<div class=\"list-group\">\n<div class=\"list-group-item active list-group-item-heading\">Example:<\/div>\n<div class=\"list-group-item\">\n<p>[js]<br \/>\n$http.get(&#8216;https:\/\/api.github.com\/users\/deepakshrma\/gists&#8217;)<br \/>\n    .then(function (response) {<br \/>\n        $scope.gists = response.data;<br \/>\n    })<br \/>\n    .catch(function (response) {<br \/>\n        console.error(&#8216;Gists error&#8217;, response.status, response.data);<br \/>\n    })<br \/>\n    .finally(function () {<br \/>\n        console.log(&quot;finally finished gists&quot;);<br \/>\n    });<\/p>\n<p>    [\/js]<\/p>\n<\/div>\n<\/div>\n<p>Similarly, <span style=\"color: #800000;\">$resource<\/span> service returns a promise. It can be retrieve by simply $resource.get(&#8216;somedata&#8217;).$promise.<\/p>\n<div class=\"list-group\">\n<div class=\"list-group-item active list-group-item-heading\">Example:<\/div>\n<div class=\"list-group-item\">\n<p>[js]<br \/>\nvar commentPromise = CommentApi.update({id: comment._id}, comment);<br \/>\ncommentPromise.$promise.then(function () {<br \/>\n    $scope.alerts.addAlert(&quot;Successfully updated approval status!&quot;, &quot;success&quot;);<br \/>\n}, function () {<br \/>\n    $scope.alerts.addAlert(&quot;Something went wrong. Please try again.&quot;, &quot;danger&quot;);<br \/>\n});<br \/>\n\/\/Here in above CommentApi is a resource service<\/p>\n<p>angular.module(&#8216;myapp&#8217;)<br \/>\n    .factory(&#8216;CommentApi&#8217;, function ($resource) {<br \/>\n        return $resource(&#8216;\/v1\/api\/comments\/:id\/:controller&#8217;, {<br \/>\n                id: &#8216;@_id&#8217;<br \/>\n            },<br \/>\n            {<br \/>\n                update: {<br \/>\n                    method: &#8216;POST&#8217;<br \/>\n                },<br \/>\n                list: {<br \/>\n                    method: &#8216;GET&#8217;<br \/>\n                }<br \/>\n            });<br \/>\n    });<\/p>\n<p>    [\/js]<\/p>\n<\/div>\n<\/div>\n<h3 id=\"other-features\" style=\"text-align: center;\">9. Some other useful features- $q.all()<\/h3>\n<p><span style=\"color: #800000;\">$q.all()<\/span> is one of the method that i use more frequently. $q.all accepts array of promises as argument. Once all of the promises get completed. you will get the result in callback function as array of results.<\/p>\n<div class=\"list-group\">\n<div class=\"list-group-item active list-group-item-heading\">Example:<\/div>\n<div class=\"list-group-item\">\n<p>[js]<br \/>\nvar promise1 = $http({method: &#8216;GET&#8217;, url: &#8216;\/api-one-url&#8217;, cache: &#8216;true&#8217;});<br \/>\nvar promise2 = $http({method: &#8216;GET&#8217;, url: &#8216;\/api-two-url&#8217;, cache: &#8216;true&#8217;});<\/p>\n<p>$q.all([promise1, promise2])<br \/>\n    .then(function(data){<br \/>\n        console.log(data[0], data[1]);<br \/>\n    });<\/p>\n<p>    [\/js]<\/p>\n<\/div>\n<\/div>\n<p><a class=\"btn btn-primary btn-lg\" href=\"#top-of-page\">Scroll Top<\/a><\/p>\n<p><span style=\"font-size: 20px; color: blue;\">Read Further on AngularJS Series<\/span><\/p>\n<ul>\n<li><a href=\"http:\/\/www.tothenew.com\/blog\/angularjs-a-write-less-do-more-javascript-framework\/\">AngularJS :\u00a0A \u201cWrite Less Do More\u201d JavaScript Framework<\/a><\/li>\n<li><a href=\"http:\/\/www.tothenew.com\/blog\/angularjs-updating-a-label-dynamically-with-user-input\/\">AngularJS :\u00a0Updating a Label Dynamically with User Input<\/a><\/li>\n<li><a href=\"http:\/\/www.tothenew.com\/blog\/angularjs-adding-items-to-a-javascript-list-and-updating-corresponding-dom-dynamically\/\">AngularJS :\u00a0Adding Items to a JavaScript List and updating corresponding DOM Dynamically<\/a><\/li>\n<li><a href=\"http:\/\/www.tothenew.com\/blog\/angularjs-text-suggestions\/\">AngularJS :\u00a0Text Suggestions<\/a><\/li>\n<li><a href=\"http:\/\/www.tothenew.com\/blog\/angularjs-sorting-objects-on-various-attributes\/\">AngularJS :\u00a0Sorting objects on various attributes<\/a><\/li>\n<li><a href=\"http:\/\/www.tothenew.com\/blog\/angularjs-fetching-data-from-the-server\/\">AngularJS :\u00a0Fetching data from the server<\/a><\/li>\n<li><a href=\"http:\/\/www.tothenew.com\/blog\/angularjs-multiple-views-layout-template-and-routing\/\">AngularJS :\u00a0Multiple Views, Layout\u00a0Template\u00a0and Routing<\/a><\/li>\n<li><a href=\"http:\/\/www.tothenew.com\/blog\/angularjs-implementing-routes-and-multiple-views\/\">AngularJS :\u00a0Implementing Routes And Multiple Views<\/a><\/li>\n<li><a href=\"http:\/\/www.tothenew.com\/blog\/building-intuitive-frontend-interfaces-with-angularjs\/\">Building Intuitive Frontend Interfaces with AngularJS<\/a><\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>AngularJS Deferred &amp; Promises-\u00a0Basic Understanding Table of Contents 1. Introduction to Asynchronous AngularJs 2. Callbacks- Basic Understanding 3. Callback Hell 4. Promise- A\u00a0Better way of handling callbacks 5. Promise In AngularJS- $q Service 6. Deferred API 7. Promise API 8. Some other promise based AngularJs Services 9. Some other useful features- $q.all() 1. Introduction to [&hellip;]<\/p>\n","protected":false},"author":136,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"iawp_total_views":224},"categories":[1439,3429],"tags":[1839,1841,1842,3955,955,4697,1843,1844,1840,1157,1836,495],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/posts\/20560"}],"collection":[{"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/users\/136"}],"replies":[{"embeddable":true,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/comments?post=20560"}],"version-history":[{"count":0,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/posts\/20560\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/media?parent=20560"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/categories?post=20560"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/tags?post=20560"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}