AngularJS code in a

Question

I am new to AngularJS and managed to get this to work. Can I get some feedback if this is done in an "Angular way?"

The DataResults Service just fetches some JSON data and will eventually have more methods that will process it. The part I am most curious about is the controller. It waits for the service to complete and then and then brings the data in scope. The HTML does some stuff with it, but is not relevant for this.

Thanks for your time

var myApp = angular.module("myApp ", []);
myApp.factory("DataResults",function($http) {
  var data = [];

  var promise = $http.get("/js/data.json").
    success(function(d, status, headers, config) {
      data= _.compact(d);
    }).
    error(function(d, status, headers, config) {
      return "Error!";
    });

  promise.getData= function() {
    return data;
  };
  /* More methods */

  return promise;
});

/* Controllers */
myApp.controller("DataSearchCtrl", ["$scope", "DataResults", function($scope, DataResults) {
  DataResults.then(function() {
    $scope.data = DataResults.getData();
  });
}]);

Edit: I can't comment. Yes it does work.

Answer 1

Yep this is the Angular way! However, I'd like to suggest some modifications.

With your current implementation, each time you inject "DataResults" into a controller, you will be making the $http.get request, on page load. What happens when you need to add different $http.get functions?
I would inject the $q service into your "DataResults" factory, which will allow you greater flexibility. Using the $q service with the Deferred API, you not only return a promise, but the promise is resolved with the value itself.

Updated factory:

var myApp = angular.module("myApp ", []);
myApp.factory("DataResults",function($http,$q) {

return {  
  getJsonData: function(){ 
    var deferred = $q.defer();
    $http.get("/js/data.json").
      success(function(d, status, headers, config) {
        deferred.resolve(_.compact(d));
      }).
      error(function(d, status, headers, config) {
        deferred.reject(d);
      }); 
    return deferred.promise;
  },
  getSomeOtherData: function(){
    var deferred = $q.defer();
    $http.get("/js/data.json").
      success(function(d, status, headers, config) {
        deferred.resolve(_.compact(d));
      }).
      error(function(d, status, headers, config) {
        deferred.reject(d);
      }); 
    return deferred.promise;
  }  
};

});

updated Controller:

myApp.controller("DataSearchCtrl", ["$scope", "DataResults", 
 function($scope, DataResults) {

  $scope.initializePage = function(){
    DataResults.getJsonData().then(function(jsonData) {
      $scope.data = jsonData;
    });
  };

  $scope.loadTheOtherData = function(){
    DataResults.getSomeOtherData().then(function(someOtherData){
        $scope.otherData = someOtherData;
    });
  }; 
}]);