web-dev-qa-db-fra.com

Obtenir des données d'un service Web avec Angular.js

J'essaie d'obtenir des données au format Json à partir d'un serveur Web distant en utilisant Angular et j'ai quelques problèmes .. .. Les données proviennent du service Web correctement, mais je ne peux pas les utiliser dans le contrôleur ..__ que? Code angulaire:

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

// get data from the WS
app.run(function ($http) {
    $http.get("https://SOME_API_PATH").success(function (data) {
        booksJson = data;
        console.log(data);  //Working
    });
});

app.controller('booksCtrl', function ($scope) { 
    $scope.data = booksJson;
    console.log($scope.data); //NOT WORKING
});

HTML:

<section ng-controller="booksCtrl">
<h2 ng-repeat="book in data">{{book.name}}</h2>
</section>
angularjsangularjs-scopeangular-http
4
Vandervidi

Vous devriez mettre votre $ http.get dans votre contrôleur. 

En outre, le service Web renvoie un objet, pas un tableau. Donc, votre ng-repeat devrait ressembler à ceci: book in data.books

Voici un exemple de travail:

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

app.controller('booksCtrl', function($scope, $http) {

  $http.get("https://whispering-woodland-9020.herokuapp.com/getAllBooks")
    .then(function(response) {
      $scope.data = response.data;
    });
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<article ng-app="booksInventoryApp">
  <section ng-controller="booksCtrl">
    <h2 ng-repeat="book in data.books">{{book.name}}</h2>    
  </section>
</article>

15
Donal

Au lieu d'utiliser un bloc d'exécution, vous pouvez utiliser votre service $ http à l'intérieur du contrôleur, puis attacher vos données à l'étendue comme d'habitude. N'oubliez pas d'injecter le service $ http dans votre contrôleur.

app.controller('booksCtrl', function ($scope, $http) { 
    $http.get("https://whispering-woodland-9020.herokuapp.com/getAllBooks").success(function (data) {
        $scope.booksJson = data;
    });
});
0
TonalLynx
<!DOCTYPE html>
<html>
<head>
    <title>test your webservice</title>
</head>
<body>


<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<article ng-app="booksInventoryApp">
  <section ng-controller="booksCtrl">
  </section>
</article>
<script type="text/javascript">
    var app = angular.module('booksInventoryApp', []);

app.controller('booksCtrl', function($scope, $http) {



                        //ResponseInvocationAgentRequestDTO 
                        var jsonObject = {
                                      "id":65,
                                      "idUserSender": 5}


                                    console.log("aaaaaaaaaaaaaaaaaaaa");
            $http({
                method: 'put',             
                url: 'yout URI' ,
                data: jsonObject 
            })
            .success(function(data,status){
                console.log('all is good', data);

                })
                .error(function(data,status){
                    console.log('Erreur into url '+data);
                });


});

</script>
</body>
</html>
0
BERGUIGA Mohamed Amine