CODEWITHSUNDEEP
javascriptangularjs
Alex Man
Alex Man

Reputation: 4886

execute and load controllers only after finishing a service

I've created an application angular js in which i'm having many number of controllers in a single page as shown below

app.controller('Controller1', function($rootScope, $scope)
{
    :
    :
});

app.controller('Controller2', function($rootScope, $scope)
{
    :
    :
});

app.controller('Controller3', function($rootScope, $scope)
{
    :
    :
});

I've a service which fetches user properties from the rest service. The application works fine but the problem is the before getting the datas from the service all the controllers are getting executed

can anyone tell me how to load all the controllers only after the service for getting the user properties is completely loaded finished, the service is given below

app.factory('userConfig', function($rootScope, appConfig, UserConfig)
{
    $rootScope.userConfig = UserConfig.get(function(data)
    {
        $rootScope.userConfig = _.clone(data.userproperties, true);
        :
        :
    });
});

My script is given below

var app = angular.module('app',[ 'commonServices']);

app.factory('userConfig', function($rootScope, appConfig, UserConfig)
{
    $rootScope.userConfig = UserConfig.get(function(data)
    {
        $rootScope.userConfig = _.clone(data.userproperties, true);
        :
        :
    });
});

app.controller('Controller1', function($rootScope, $scope)
{
    :
    :
});

app.controller('Controller2', function($rootScope, $scope)
{
    :
    :
});

app.controller('Controller3', function($rootScope, $scope)
{
    :
    :
});

Upvotes: 0

Views: 217

Answers (1)

Vlad Gurovich
Vlad Gurovich

Reputation: 8463

You can put the code that uses these controllers behind an ng-if that only gets enabled when some promise gets resolved.

factory:

app.factory('userConfig', function($rootScope, appConfig, UserConfig) {
    UserConfig.get(function(data) {
      $rootScope.userConfig = _.clone(data.userproperties, true);
    });
});

template:

<div ng-if="userConfig">
   <div ng-controller="Controller1">foo1</div>
   <div ng-controller="Controller2">foo2</div>
   <div ng-controller="Controller3">foo3</div>
</div>

Alternatively you can use ui-router 'resolve' attribute: https://github.com/angular-ui/ui-router/wiki#resolve

Upvotes: 1

Related Questions