Membuat Panggilan API di Angularjs Menggunakan Perkhidmatan Angular ' S $ HTTP

Artikel ini menunjukkan cara menggunakan AngularJS untuk membuat permintaan HTTP ke API jauh dan mengemas kini paparan dengan respons JSON. Ia memanfaatkan angular $http perkhidmatan dan pengikatan data.

Konsep Utama:

• $http.get: Digunakan untuk menghantar permintaan ke API, termasuk rentetan pertanyaan. Respons disimpan dalam model (details dan related dalam contoh ini).
• dengan ngModelOptions: debounce Ini menghalang panggilan API yang berlebihan dengan melambatkan kemas kini model (800ms dalam kes ini).
• Perkhidmatan: $watch memantau model untuk perubahan, mencetuskan pengambilan data. search
• Janji dengan : .then() pengendalian ralat moden menggunakan janji -janji dan bukannya error /. .success()

Struktur Projek & Kod Highlights:

Projek ini menggunakan struktur modular (CSS, JS, partials, index.html).

Termasuk input carian (terikat kepada model

dengan index.html dan search), dan ng-model arahan untuk memuatkan pandangan separa (ng-model-options dan ng-include). main-info.html related-results.html Logik teras berada di

, khususnya

. Baris app.js memastikan bahawa fungsi MovieController dipanggil apabila input carian berubah selepas tempoh debounce. $watch('search', fetch) Menggunakan fetch() untuk membuat dua panggilan API (satu untuk butiran filem utama, satu untuk filem yang berkaitan) ke API OMDB. Respons kemudiannya ditugaskan untuk fetch() dan $http.get. Fungsi $scope.details mengendalikan klik pada tajuk filem yang berkaitan, mengemas kini model $scope.related. update() search Pandangan separa (

dan

) menggunakan data Angular yang mengikat untuk memaparkan maklumat filem. main-info.html Termasuk logik bersyarat (related-results.html) untuk mengendalikan keadaan pemuatan dan imej poster yang hilang. main-info.html melangkah melalui filem berkaitan dengan menggunakan ng-if dan panggilan related-results.html pada klik. ng-repeat update()

Penambahbaikan & Kemas Kini:

Kemas kini nota artikel yang dibuat pada 2016-01-17, termasuk:

menggantikan

/
• dengan setTimeout debounce dan clearTimeout. ng-model-options $watch mengemas kini untuk menggunakan
untuk pengendalian janji.
• .then() Memperbaiki imej poster yang rosak.

Contoh coretan kod:

3
• ng-model ng-model-options index.html fungsi dalam
:

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

• fetch() app.js pemuatan imej bersyarat dalam :

<code class="language-javascript">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; });
}</code>

• artikel ini disimpulkan dengan seksyen mengenai soalan yang sering ditanya mengenai perkhidmatan HTTP dan panggilan API AngularJS, yang meliputi pengendalian ralat, pembatalan permintaan, penghantaran data, tetapan header, jsonp, transformasi permintaan/tindak balas, permintaan, permintaan segerak, dan pengendalian kesilapan global . Demo codepen juga dikaitkan.

Atas ialah kandungan terperinci Membuat Panggilan API di Angularjs Menggunakan Perkhidmatan Angular ' S $ HTTP. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!