Angular JSを使用してAPIをアクティブにする

Question

私はこのサービスから気象情報を取得し、AngularJSライブラリを使用して動的データでhtmlを埋めようとしています。

http://api.openweathermap.org/data/2.5/weather?q=Riyadh,ksa&appid=a809c777d6813b6b0905a9a7bf1a8399

私は、スクリプトタグでこのリンクを置くことになっているだろうか？はいの場合は、AngularJSでどのように使用できますか？ apiとAngularJSを使ったのは初めてのことですが、多くのチュートリアルを見ましたが、どれもこのapiリンクに似ていませんでした。

Answer 1

あなたがGETのAPIを使用していると仮定すると、あなたのAPI

<script 
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"> 
    </script> 
    <div ng-app="weatherApp" ng-controller="weatherCtrl"> 
    <button ng-click="GetWeatherInfo()">Get weather data</button> 
    Temperature: {{weatherdata.main.temp}} 
    </div> 

    <script> 
    var app = angular.module('weatherApp', []); 
    app.controller('weatherCtrl', function($scope,$http) { 
     $scope.GetWeatherInfo= function(){ 
      $http.get("http://api.openweathermap.org/data/2.5/weather? 
         q=Riyadh,ksa&appid=a809c777d6813b6b0905a9a7bf1a8399") 
      .then(function(response) { 
       $scope.weatherdata= response.data; 
      }); 
     } 
    }); 
    </script> 

これは、get気象データ]ボタンをクリックであなたのAPIを呼び出します呼び出すために$http.getを使用することができます。 API呼び出しが成功すると、$scope変数を使用してhtmlビュー内のどこにでもアクセスできます。

API呼び出しを動的にする必要がある場合は、要件に応じて関数内でAPI URL文字列を作成できます。私はあなたがthisを読むことをお勧めします。

Answer 2

あなたはこの

app.controller("testController", function($scope,testService){ 
      testService.getData() 
       .then(function (response) { 
        $scope.testData = response.data; 
        // handle valid reponse 

       }, 
       function(error) { 
        //handel error 
       }); 
     } 

必ずエラーを処理するような何かを行う必要があります。

また、あなたがサービス詳細ビューについては

angular.module('myApp') 
    .service('testService', function ($http) { 

    this.getData = function() { 
     var endpoint = "url/"; 
     return $http({ 
     method: 'get', 
     url: endpoint 
     }); 
    }; 

} 

を作成する必要がthis簡単なアプリケーション

Answer 3

を見てみましょうにも、この

$http.get(url) 
.then(function(response) { 
// Request completed successfully 
}, function(x) { 
// Request error 
});