The initial setup:
<div>
<ng-view></ng-view>
</div>
var app = angular.module('app', []);
app.config(function ($routeProvider) {
$routeProvider
.when('/',
{
templateUrl: "app.html",
controller: "AppCtrl"
}
)
});
app.controller("AppCtrl", function ($scope) {
$scope.model = {
message: "I'm a great app!"
}
});
<h1>{{ model.message }}</h1>
The resolve property is a list of promises - things that need to happen before the controller instantiates and the view loads.
Setting up a resolve:
app.config(function ($routeProvider) {
$routeProvider
.when('/',
{
templateUrl: "app.html",
controller: "AppCtrl"
resolve: {
app: function ($q) {
var defer = $q.defer();
return defer.promise;
}
}
}
)
});
The app in the resolve maps to the app module. The resolve setup here simply assigns a defer object and returns its promise.
If this is run in the browser, the page will not render, as the promise was never fulfilled. This is fixed by invoking resolve().
resolve: {
app: function ($q) {
var defer = $q.defer();
defer.resolve();
return defer.promise;
}
}
This works normally.
It is also possible to add a timeout to the promise, delaying its resolution, which in turns delays the loading of the controller and rendering of the page:
resolve: {
app: function ($q, $timeout) {
var defer = $q.defer();
$timeout(function () {
defer.resolve();
}, 2000);
return defer.promise;
}
}
There's more to learn!