Angular＆＃x27; s $ httpサービスを使用してAngularjsでAPI呼び出しを行います

この記事では、Angularjsを使用してHTTP要求をリモートAPIに作成し、JSON応答でビューを更新する方法を示しています。 Angularのサービスとデータのバインディングを活用します $http

重要な概念：

• ：クエリ文字列を含むAPIにget requestsを送信するために使用されます。 応答はモデルに保存されています（この例では$http.getおよび）。 details related
with
• ：これにより、モデルの更新（この場合は800ms）を遅らせることにより、過度のAPI呼び出しが防止されます。 ngModelOptionsdebounceサービス：
変更のために
• モニター、データの取得をトリガーします。 $watch約束：search：偏向の代わりに約束を使用した最新のエラー処理
/。エラー（）メソッド。
• .then()プロジェクト構造とコードのハイライト：.success()
プロジェクトでは、モジュラー構造（CSS、JS、Partials、Index.html）を使用します。

検索入力（

およびを含むモデルにバインドされています）と、部分的なビュー（

および

）をロードするためのディレクティブが含まれます。 index.htmlコアロジックはsearch、具体的にはng-modelに存在します。 ng-model-options行は、debounce期間後に検索入力が変更されるたびにng-include関数が呼び出されることを保証します。 main-info.htmlrelated-results.htmlを使用して、2つのAPI呼び出し（1つはメイン映画の詳細、1つは関連する映画用）をOMDB APIに行います。 回答は、

および

に割り当てられます。 関連する映画のタイトルをクリックし、app.jsモデルを更新します。 MovieController部分的なビュー（$watch('search', fetch)およびfetch()）は、Angularのデータバインディングを使用して映画情報を表示します。 fetch()条件論的ロジック（$http.get）が含まれており、ロード状態と欠落しているポスター画像を処理します。 $scope.detailsクリック時に$scope.relatedを使用して関連する映画を繰り返し、update()を呼び出します。 search

改善と更新：

main-info.html related-results.html記事は、2016-01-17で行われた更新を記録します main-info.html ng-ifrelated-results.html/ng-repeatをupdate()debounceおよび

。

に置き換えます プロミスハンドリングにを使用するために更新。

壊れたポスター画像を修正します。

• setTimeoutコードスニペットの例：clearTimeoutng-model-options
  • ng-modelandng-model-optionsinindex.html：

  <input type="text" ng-model="search" ng-model-options="{ debounce: 800 }" placeholder="Enter full movie name" />

  • fetch()app.js：
  の関数

  function fetch() {
    $http.get("http://www.omdbapi.com/?t=" + $scope.search + "&tomatoes=true&plot=full")
      .then(function(response) { $scope.details = response.data; });
  
    $http.get("http://www.omdbapi.com/?s=" + $scope.search)
      .then(function(response) { $scope.related = response.data; });
  }

  • main-info.html：
  での条件付き画像読み込み

  <img  ng-src="{{ details.Poster=='N/A' ? 'http://placehold.it/150x220&text=N/A' : details.Poster }}" / alt="Angular＆＃x27; s $ httpサービスを使用してAngularjsでAPI呼び出しを行います" >

  この記事は、Angularjs HTTPサービスとAPI呼び出しに関するよくある質問のセクションで終了します。 。 Codepenデモもリンクされています

以上がAngular＆＃x27; s $ httpサービスを使用してAngularjsでAPI呼び出しを行いますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。