Angular promise resolve: example 1

Angular promise resolve example 1

by william jiang

HTML

<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.min.js"></script>
<script type="text/ng-template" id="/editor-tpl.html">
    Editor Template {{datasets}}
</script>
<div ng-view>
</div>
<script type="text/ng-template" id="/editor-tpl-1.html">
    Contents of fiddle.jshell.net:
    <br/>
    <br/>
    {{datasets}}
</script>

JavaScript

//http://stackoverflow.com/questions/11972026/delaying-angularjs-route-change-until-model-loaded-to-prevent-flicker
function MyCtrl($scope, datasets) {    
    $scope.datasets = datasets;
}

MyCtrl.resolve = {
    datasets : function($q, $http) {
        var deferred = $q.defer();
        
        $http({method: 'GET', url: '/someUrl'})
            .success(function(data) {
                deferred.resolve(data)
            })
            .error(function(data){
                //actually you'd want deffered.reject(data) here
                //but to show what would happen on success..
                deferred.resolve("error value");
            });
        
        return deferred.promise;
    }
};

var myApp = angular.module('myApp', [], function($routeProvider) {
    $routeProvider.when('/', {
        templateUrl: '/editor-tpl.html',
        controller: MyCtrl,
        resolve: MyCtrl.resolve
    });
});

//Since $http() already returns a promise (aka deferred), we actually don't need to create our own. So we can simplify MyCtrl. resolve to:
function MyCtrl($scope, datasets) {
    // the result of $http() contains
    // .data, .status, .headers, .config
    $scope.datasets = datasets.data;
}

MyCtrl.resolve = {
    datasets : function($http) {
        return $http({
            method: 'GET', 
            url: 'http://fiddle.jshell.net/'
        });
    }
};

var myApp = angular.module('myApp', [], function($routeProvider) {
    $routeProvider.when('/', {
        templateUrl: '/editor-tpl-1.html',
        controller: MyCtrl,
        resolve: MyCtrl.resolve
    });
});