Load html template after async http.get call is done - angularjs

Question

I have routing config in my main app.js.
// app.js
angular.module('myApp', ["ngRoute"])
.config(['$routeProvider', function ($routeProvider) {
$routeProvider.when('/', {
templateUrl: '/templates/company-list.html',
controller: 'CompanyListCtrl as companyListCtrl'
}).when(...
Although in the app.js I have a directive that renders an image as a background css element of the template's div.
/app.js
// Directives
angular.module('myApp')
.directive('backImg', function () {
return function (scope, element, attrs) {
var url = attrs.backImg;
element.css({
'background-image': 'url(' + url + ')',
'background-size': 'cover'
});
};
});
CompanyListCtrl controller dependent on an http Service that makes a call to a server and returns data. That data contains 'url' for the directive above.
//controllers.js
angular.module('myApp')
.controller('CompanyListCtrl', ['CompanyService', function (CompanyService) {
var self = this;
self.companies = [];
CompanyService.getCompanies().then(function (response) {
self.companies = response.data;
});
}]);
My 'company-list.html' template with the directive renders before async data is returned. I guess I need to use 'resolve' in the route config however, what is the dependency should be there when $htt.get call is implemented as an external service?

Answer 1

Use the resolve option:
resolve - {Object.=} - An optional map of
dependencies which should be injected into the controller. If any of
these dependencies are promises, the router will wait for them all to
be resolved or one to be rejected before the controller is
instantiated. If all the promises are resolved successfully, the
values of the resolved promises are injected and $routeChangeSuccess
event is fired. If any of the promises are rejected the
$routeChangeError event is fired. The map object is:
key – {string}: a name of a dependency to be injected into the
controller. factory - {string|function}: If string then it is an alias
for a service. Otherwise if function, then it is injected and the
return value is treated as the dependency. If the result is a promise,
it is resolved before its value is injected into the controller. Be
aware that ngRoute.$routeParams will still refer to the previous route
within these resolve functions. Use $route.current.params to access
the new route parameters, instead.
angular.module('myApp', ["ngRoute"])
.config(['$routeProvider', function ($routeProvider) {
$routeProvider.when('/', {
templateUrl: '/templates/company-list.html',
controller: 'CompanyListCtrl as companyListCtrl'
resolve: {
companies: ['CompanyService', '$route', function(CompanyService, $route) {
return CompanyService.getCompanies($route.current.params.companyId).then(function(response) {
return response.data;
}
}]
}
}).when(...
angular.module('myApp')
.controller('CompanyListCtrl', ['companies', function (companies) {
var self = this;
self.companies = companies;
}]);