AngularJS get dashboard settings using $htttp before initializing a dashboard controller

Question

So I am still on a crash course with Angular. I am working on quite a complicated dashboard framework, all written in angular. Before I load the controllers, I need to get a bunch of dashboard settings from the server first using $HTTP. These settings are then used to control the layout of the dashboards. So I read the way angular builds is by first running config methods, then run methods, then the controllers. I can't use $HTTP in a config method, so I have built this in my main.js:

    MetronicApp.run(['$rootScope','$http', function($rootScope,$http) {

  var CUID = Cookies("CUID");
  console.log('portlet settings for '+ CUID);
   $http.get('/myurl/V3_portlet_settings?p_user_id='+CUID)
        .then(function(response) {
            console.log(response.data);
            console.log('portlet status: ' + response.status);
            $rootScope.$broadcast("dashSettings",response.data);
        });

}]);

When I run, this all works happily and I see the data in the console.

Then in my controller:

$scope.$on( "dashSettings", 
function(event,data){
    $scope.dData = data;
     console.log('dash data service identified in dash controller');
     console.log($scope.dData.count);
    } );

Couple of questions:

1. Is this the best way to get settings before initializing the dash. My plan would be to embed the calls that build the dash inside my $scope.$on block. I started looking at how to run a run method synchronously before the controllers initialize, but maybe I don't need to.

2. Any obvious idea why the $scope.$on method does not seem to fire?

Thanks in advance

Answer 1

A different approach would be to place your $http functions in a service or factory and then resolve these in your controller. The key here is the use of promise . Angular documentation describes this as

A service that helps you run functions asynchronously, and use their return values (or exceptions) when they are done processing

First create a service:

app.factory('DataService', function($http) {
  var getValues= function() {
    var url = '/myurl/V3_portlet_settings?p_user_id='+ CUID;
    return $http.jsonp(url) // returns a promise
  };

  return {
    getValues: getValues
  }
});

And then in your controller:

myApp.controller('MyController', function ($scope, DataService) {     
    DataService.getValues().then( // resolve the promise using .then()
    function(data){
      // successcallback
      // you can now safely populate the data in you controller
      console.log(data);
    },
    function(error){
      // errorcallback
      console.log(error);
    })   
});

I think it is a better approach to use data services to handle data operations such as $http requests.
The return of promises allows for chaining of (multiple) promises and better handling of async calls.

You might find John Papa's style guide useful, especially the section about 'Separate Data Calls' (Y060) and 'Return a Promise from Data Calls' (Y061)