AngularJs Resolve

Intro To promise library $q in angular

by Varun Nath

HTML

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/foundation/5.1.1/css/foundation.min.css">
<script src="http://code.angularjs.org/1.2.1/angular-route.min.js"></script>
<body ng-app="myApp">
    <ng-view></ng-view>

JavaScript

//angular-route is loaded in the external resources 

var app = angular.module('myApp', ['ngRoute']);

app.config(function ($routeProvider) {

    $routeProvider.when('/', {

        template: '<h1 class="panel">This is my app</h1>',
        controller: 'AppCtrl',
        //resolve is a set of properties/functions that need to be executed before the template or controller is instatiated 
        //unless the promise is resolved the rest of the code won't execute
        resolve: {
            app: function ($q, $timeout) {
                var defer = $q.defer();
                //example : the controller and template will only load after 2 seconds, as the promise will be resolved after 2 seconds 
                $timeout(function () {
                    defer.resolve();
                }, 2000);
                return defer.promise;
            }
        }
    });
})
    .controller('AppCtrl', function () {
    console.log('This is the app controller');
});