AngularJS: Serviceaufruf API und Rückgabe JSON

Question

Ich muss einen Wert aus einem Eingabefeld in der Ansicht über einen Dienst übergeben. Der Dienst sollte meine WebAPI2 anrufen und erhält dann eine gültige JSON als Antwort.

Ich bekomme jedoch entweder ein Versprechen-Objekt, das ich nicht lösen kann (auch mit ""), oder wenn ich eine Fabrik verwende, wird es nicht kompilieren, da es die Methode $get nicht zu implementieren scheint.

Das Objekt JSON, das ich zurückgebe, ist ebenfalls gültig.

Ausblick:

<div class="input" ng-controller="InputController as ctrl"> 
<input ng-model="inputdata" /> {{inputdata}} 
    <button ng-click="ctrl.gibDaten(inputdata)">Senden</button> 
    {{cooledaten}} 
</div> 

Controller:

module GoogleMapsApp { 
myApp.myAppModule.controller("InputController", 
    ["$scope", "mapsServiceCustom", 
     function ($scope, mapsServiceCustom) { 
      $scope.lEingabedaten = $scope.inputdata; 
      this.gibDaten = function() { 
       $scope.cooledaten = mapsServiceCustom.gibDaten().then(); 
       console.log($scope.cooledaten); 
      } 
}]); 

}

Service:

module GoogleMapsApp { 
myApp.myAppModule.service("mapsServiceCustom", 
    ["$http", 
     function ($http) { 
      this.gibDaten = function (lEingabe) { 
       console.log(lEingabe); 
       console.log($http.get("api/getDistanceData/" + lEingabe + "/Cologne") 
        .then(function(data) { 
         return data; 

Controller:})); return $ http.get ("api/getDistanceData /" + lEingabe + "/ Köln") .dann (Funktion (Daten) { Rückgabedaten; }); // return $ http.get ("api/getDistanceData /" + lEingabedaten1 + "/ Köln"); } } ]);

}

Konsolenprotokoll:

Object { $$state: Object }maps.serviceCustom.js:14:17

Object { $$state: Object }InputController.js:8:17

Wenn ich den $$ Zustand überprüfen: Object es enthält genau die gewünschten Daten.

eine Fabrik Verwendung führt mich zu dem folgenden Fehler:

https://docs.angularjs.org/error/$injector/undef?p0=mapsServiceCustom

Also, was mache ich falsch? Wie würde ich meine Absicht umsetzen?

Answer 1

Sie müssen dann einen Teil, um eine Funktion zu übergeben ... So setzen nur dann Funktion in Ihrem Controller und stellen Sie Antwort auf Ihre Variable Rückkehr ...

myApp.myAppModule.controller("InputController", 
    ["$scope", "mapsServiceCustom", 
     function ($scope, mapsServiceCustom) { 
      $scope.lEingabedaten = $scope.inputdata; 
      this.gibDaten = function() { 
       mapsServiceCustom.gibDaten().then(function(response){ 
        // set response to your variable 
        $scope.cooledaten = response; 
       }); 
      } 

}]); 

Answer 2

Sie haben den Dienst nicht ordnungsgemäß umgesetzt. gehen Sie bitte über den folgenden Link (AngularJS offizielle Dokumentation) https://docs.angularjs.org/guide/services

Sie benötigen eine API entlarven, indem sie ein js Objekt zurück. (Die gleiche Sache ist in Ihrem Fehler Link angezeigt. zu, dass siehe auch)

module GoogleMapsApp { 
myApp.myAppModule.service("mapsServiceCustom", 
    ["$http", function ($http) { 
      this.gibDaten = function (lEingabe) { 
       console.log(lEingabe); 
       console.log($http.get("api/getDistanceData/" + lEingabe + "/Cologne") 
        .then(function(data) { 
         return data; 
        } 
      } 

      return { gibDaten: this.gibDaten}; 
    }]); 
} 

Hier können Sie mehr über lernen bekommen $ Methode https://docs.angularjs.org/guide/providers