How to Rescue JSON External Data

Question

I’m learning Angularjs from Apigility. I’m having some doubts and I think I can only understand by asking...

I have this code here:

App.controller('ListaCtrl', ['$scope', function($scope){
  $scope.id     = 1;
  $scope.dealer = "Teste";
  $scope.stars  = "5 Estrelas";
}]);

How do I rescue an external JSON from an API ?

I’m seeing this code here:

var noticias = $http.get("http://localhost:8888/dealers")
    .then(function(response) {
        console.log(response);
     });

But I’m not getting it to work. I’m putting inside the App.controller('ListaCtrl'). I don’t know if it’s right.

Answer 1

To use inside the controller, you need to pass the service of $http which is being used, as follows:

App.controller('ListaCtrl', ['$scope', '$http', function($scope, $http){
  $scope.id     = 1;
  $scope.dealer = "Teste";
  $scope.stars  = "5 Estrelas";

  /* Seu $http */
  var noticias = $http.get("http://localhost:8888/dealers")
      .then(function(response) {
          console.log(response);
      });
}]);

It’s the same logic as the use of $scope, to be able to use the service, you need to reference it in the controller to be used.

Complementing the answer, the ideal would be for you to use this $http in a service, be it a service or factory. Of course this evades your initial question, but it is the best practice. Keep this little trick in mind:

• Controller -> O controller need to use the data, but no matter to the controller how they will be obtained, it only matters to receive the data.
• Service -> You must provide the data for the controller, what will be done next doesn’t matter, it just matters that he provided the data.

---

Example of using Factory to receive data in the controller:

/* Sua Factory */
App.factory('minhaFactory', ['$http', function($http) {
    var factory = {
        obterDados: _obterDados
    }

    function _obterDados() {
        $http.get("http://localhost:8888/dealers").then(
            function(response) {return response;}
        );
    }

    return factory;
}]);

/* Seu Controller */
App.controller('ListaCtrl', ['$scope', 'minhaFactory', function($scope, minhaFactory){
    $scope.id     = 1;
    $scope.dealer = "Teste";
    $scope.stars  = "5 Estrelas";

    /* Seu $http */
    var noticias = minhaFactory.obterDados();
}]);