Load html template after async http.get call is done

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?

Joe Enzminger · Accepted Answer · 2015-03-03 04:06:43Z

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;


        }]);

if I have $routeParams.companyId that I want to add to CompanyService.getCompanies($routeParams.companyId) do I need to add dependency like companies: ['$routeParams', 'CompanyService' ... and controller logic similar to the original ansver?
Inject $route and use $route.current.params.companyId. I will update the answer

Collectives™ on Stack Overflow

Load html template after async http.get call is done

1 Answer 1

2 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Related