Controller loading order in angularjs

Question

I have angularjs web application with following routing:

App.config(function($routeProvider) {
    $routeProvider.
        when('/', {templateUrl: 'Home.html', controller: HomeCtrl}).
        when('/app/:app/model/:model', {templateUrl: 'detail.html', controller: ModelDetailCtrl}).
});

If user typed /app/some_app/model/some_model at the start, there is ModelDetailCtrl loads, it's right, but i need to load and execute HomeCtrl everytime before ModelDetailCtrl how to be with it?

Thank you.

Answer 1

I had a different issue but my solution might be helpful in your case as well.

What if you will traffic all your routing to a single controller (let's call it 'RouteController'). As a template use a div with "ng-include" which will load a template + a controller for each "$routeParams" you have, only after your long task ended.

It will look something like:

    $routeProvider.when('/', {
        template: '<div ng-include src="templateUrl"></div>',
        controller: 'RouteController'
    });

    $routeProvider.when('/app/:app/model/:model', {
        template: '<div ng-include src="templateUrl"></div>',
        controller: 'RouteController'
    });

Now, inside "RouteController" you can do your "HomeCtrl" long task and when done add your "$scope.templateUrl" logic according to what you have inside "$routeProvider". In your case an empty '$routeProvider' parameters will set to 'Home.html' and all other to 'detail.html':

$scope.templateUrl = 'detail.html';//Or 'Home.html' if no $routeProvider params 

The only thing missing to close the loop is setting the controller for each template, inside the template itself, as 'ng-controller'. For example, inside 'Home.html' use:

<div ng-controller="HomeCtrl"></div>

I hope my solution is clear and can be helpful in your case...