Angular dan RXJS: Menambah hujung belakang API rehat

Artikel ini adalah Bahagian 3 dari Tutorial SitePoint Angular 2 mengenai cara membuat aplikasi CRUD dengan CLI sudut. Dalam artikel ini, kami akan mengemas kini permohonan kami untuk berkomunikasi dengan API Back End REST.

lebih suka belajar sudut menggunakan kursus video langkah demi langkah? Semak belajar Angular 5 pada premium SitePoint. Di bahagian satu kita belajar bagaimana untuk mendapatkan aplikasi Todo kami dan menjalankan dan menyebarkannya ke halaman GitHub. Ini berfungsi dengan baik tetapi, malangnya, keseluruhan aplikasi telah dipenuhi dengan satu komponen.

Di bahagian dua kita mengkaji seni bina komponen yang lebih modular dan belajar bagaimana untuk memecahkan komponen tunggal ini ke dalam pokok berstruktur komponen yang lebih kecil yang lebih mudah difahami, digunakan semula dan diselenggara.

Bahagian 0 - Panduan Rujukan CLI Angular Ultimate
Bahagian 1 - Mendapatkan versi pertama kami aplikasi Todo Up and Running
Bahagian 2 - Mewujudkan komponen berasingan untuk memaparkan senarai todo dan satu todo
Bahagian 3 - Kemas kini perkhidmatan Todo untuk berkomunikasi dengan API Back End Rest
Bahagian 4 - Gunakan penghala sudut untuk menyelesaikan data
Bahagian 5 - Tambahkan pengesahan untuk melindungi kandungan peribadi
Bahagian 6 - Cara mengemas kini projek sudut ke versi terkini.

Anda tidak perlu mengikuti bahagian satu dan dua tutorial ini untuk tiga untuk masuk akal. Anda hanya boleh merebut salinan repo kami, memeriksa kod dari bahagian dua, dan menggunakannya sebagai titik permulaan. Ini dijelaskan dengan lebih terperinci di bawah.

Takeaways Key

Gunakan HttpClient Angular dengan RXJS untuk mengendalikan permintaan HTTP yang tidak segerak apabila berkomunikasi dengan API REST.
Simpan URL API dalam pembolehubah persekitaran untuk menukar dengan lancar antara persekitaran pembangunan dan pengeluaran tanpa mengubah kod.
Melaksanakan kaedah apiservice seperti getalltodos, createetodo, dan deleteToDo untuk berinteraksi dengan API REST menggunakan kaedah HTTP yang sesuai.
TododataService peralihan dari penyimpanan dalam memori untuk memanfaatkan apiservice untuk operasi data, menyesuaikan diri dengan corak tak segerak dengan pemerhatian.
Kemas kini AppComponent untuk menguruskan pemerhatian yang dikembalikan oleh apiservice, memastikan komponen bertindak balas terhadap perubahan data secara asynchronously.
Memperkenalkan ApimockService untuk ujian unit, yang membolehkan simulasi apiservice tanpa permintaan HTTP sebenar, memastikan kebolehpercayaan ujian dan kemerdekaan.
Konfigurasi persediaan ujian aplikasi sudut untuk memasukkan perkhidmatan yang diperlukan seperti apiservice dan mengendalikan senario ujian asynchronous dengan berkesan.

rekap cepat

inilah yang kelihatan seperti seni bina aplikasi kami pada akhir Bahagian 2:

Pada masa ini, TododataService menyimpan semua data dalam memori. Dalam artikel ketiga ini, kami akan mengemas kini permohonan kami untuk berkomunikasi dengan API Back End REST sebaliknya.

kita akan:

• Buat API Rest API Back End
• Simpan URL API sebagai pemboleh ubah persekitaran
• Buat apiservice untuk berkomunikasi dengan ujung belakang API REST
• Kemas kini TododataService untuk menggunakan apiservice baru
• Kemas kini AppComponent untuk mengendalikan panggilan API Asynchronous
• Buat ApimockService untuk mengelakkan panggilan HTTP sebenar semasa menjalankan ujian unit.

Pada akhir artikel ini, anda akan faham:

bagaimana anda boleh menggunakan pembolehubah persekitaran untuk menyimpan tetapan aplikasi
Bagaimana anda boleh menggunakan klien HTTP sudut untuk melaksanakan permintaan HTTP
bagaimana anda boleh berurusan dengan pemerhatian yang dikembalikan oleh klien http sudut
bagaimana anda boleh mengejek panggilan HTTP untuk mengelakkan membuat permintaan HTTP sebenar semasa menjalankan ujian unit.

Jadi, mari kita mulakan!

dan berjalan

Pastikan anda mempunyai versi terkini CLI sudut yang dipasang. Jika anda tidak, anda boleh memasang ini dengan arahan berikut:

<span>npm install -g @angular/cli@latest
</span>

Jika anda perlu mengeluarkan versi sebelumnya CLI sudut, anda boleh:

npm uninstall -g @angular/cli angular-cli
npm cache clean
<span>npm install -g @angular/cli@latest
</span>

Selepas itu, anda memerlukan salinan kod dari bahagian dua. Ini boleh didapati di GitHub. Setiap artikel dalam siri ini mempunyai tag yang sepadan dalam repositori supaya anda dapat beralih ke antara negeri -negeri yang berlainan aplikasi.

Kod yang kita berakhir dengan bahagian dua dan yang kita mulakan dengan artikel ini ditandakan sebagai bahagian-2. Kod yang kita tamatkan artikel ini dengan ditandakan sebagai bahagian-3.

Anda boleh memikirkan tag seperti alias kepada ID komit tertentu. Anda boleh bertukar di antara mereka menggunakan Git Checkout. Anda boleh membaca lebih lanjut mengenai perkara itu di sini.

jadi, untuk bangun dan berjalan (versi terkini CLI sudut dipasang) kami akan melakukan ini:

<span>git clone git@github.com:sitepoint-editors/angular-todo-app.git
</span><span>cd angular-todo-app
</span><span>git checkout part-2
</span><span>npm install
</span>ng serve

kemudian lawati http: // localhost: 4200/. Sekiranya semuanya baik, anda harus melihat aplikasi Todo yang berfungsi.

Menyediakan API Rest End Back

mari kita gunakan JSON-Server untuk dengan cepat menubuhkan hujung belakang.

dari akar permohonan, jalankan:

<span>npm install json-server --save
</span>

Seterusnya, dalam direktori root aplikasi kami, buat fail yang dipanggil db.json dengan kandungan berikut:

<span>{
</span>  <span>"todos": [
</span>    <span>{
</span>      <span>"id": 1,
</span>      <span>"title": "Read SitePoint article",
</span>      <span>"complete": false
</span>    <span>},
</span>    <span>{
</span>      <span>"id": 2,
</span>      <span>"title": "Clean inbox",
</span>      <span>"complete": false
</span>    <span>},
</span>    <span>{
</span>      <span>"id": 3,
</span>      <span>"title": "Make restaurant reservation",
</span>      <span>"complete": false
</span>    <span>}
</span>  <span>]
</span><span>}
</span>

Akhirnya, tambahkan skrip ke Package.json untuk memulakan hujung belakang kami:

<span>"scripts": {
</span>  <span>...
</span>  <span>"json-server": "json-server --watch db.json"
</span><span>}
</span>

sekarang kita boleh melancarkan akhir API REST kami menggunakan:

<span>npm run json-server
</span>

ini harus memaparkan perkara berikut:

  <span>\{^_^}/ hi!
</span>
  Loading db.json
  Done

  Resources
  http://localhost:3000/todos

  Home
  http://localhost:3000

Itu sahaja! Kami kini mempunyai API Rest End End Mendengarkan di Port 3000.

Untuk mengesahkan bahawa hujung belakang anda berjalan seperti yang diharapkan, anda boleh menavigasi penyemak imbas anda ke http: // localhost: 3000.

titik akhir berikut disokong:

• GET /TODOS: Dapatkan semua todos sedia ada
• Dapatkan /Todos /: Id: Dapatkan Todo
sedia ada
• Post /Todos: Buat todo baru
• meletakkan /todos /: id: Kemas kini todo
sedia ada
• Padam /Todos /: ID: Padam Todo yang sedia ada

Jadi jika anda menavigasi penyemak imbas anda ke http: // localhost: 3000/todos, anda harus melihat respons JSON dengan semua todos dari db.json.

Untuk mengetahui lebih lanjut mengenai JSON-Server, pastikan untuk menyemak API Rest Mock menggunakan JSON-SERVER.

Menyimpan url API

Sekarang kita mempunyai hujung belakang kita, kita mesti menyimpan URLnya dalam aplikasi sudut kita.

Sebaik -baiknya, kita harus dapat ini:

1. simpan URL di satu tempat supaya kita hanya perlu mengubahnya sekali apabila kita perlu menukar nilainya
2. Buat aplikasi kami menyambung ke API pembangunan semasa pembangunan dan menyambung ke API pengeluaran dalam pengeluaran.

bernasib baik, CLI sudut menyokong persekitaran. Secara lalai, terdapat dua persekitaran: pembangunan dan pengeluaran, baik dengan fail persekitaran yang sepadan: SRC/persekitaran/persekitaran.TS dan 'SRC/Environment/Environment.prod.ts.

Mari tambahkan URL API kami ke kedua -dua fail:

<span>npm install -g @angular/cli@latest
</span>

npm uninstall -g @angular/cli angular-cli
npm cache clean
<span>npm install -g @angular/cli@latest
</span>

Ini kemudiannya akan membolehkan kami mendapatkan URL API dari persekitaran kami dalam aplikasi sudut kami dengan melakukan:

<span>git clone git@github.com:sitepoint-editors/angular-todo-app.git
</span><span>cd angular-todo-app
</span><span>git checkout part-2
</span><span>npm install
</span>ng serve

Apabila kita menjalankan ng berkhidmat atau membina, sudut CLI menggunakan nilai yang dinyatakan dalam persekitaran pembangunan (SRC/Environment/Environment.ts).

Tetapi apabila kita menjalankan ng berkhidmat -environment prod atau ng binaan -prodenvironment prod, sudut CLI menggunakan nilai yang dinyatakan dalam src/persekitaran/persekitaran.prod.ts.

Ini adalah apa yang kita perlukan untuk menggunakan URL API yang berbeza untuk pembangunan dan pengeluaran, tanpa perlu menukar kod kita.

Permohonan dalam siri artikel ini tidak dihoskan dalam pengeluaran, jadi kami menentukan URL API yang sama dalam persekitaran pembangunan dan pengeluaran kami. Ini membolehkan kami menjalankan NG Serve -Environment Prod atau NG Build -Environment Prod secara tempatan untuk melihat sama ada semuanya berfungsi seperti yang diharapkan.

anda boleh mencari pemetaan antara dev dan prod dan fail persekitaran yang sepadan dalam .angular-cli.json:

anda juga boleh membuat persekitaran tambahan seperti pementasan dengan menambahkan kunci:

<span>npm install json-server --save
</span>

dan membuat fail persekitaran yang sepadan.

<span>{
</span>  <span>"todos": [
</span>    <span>{
</span>      <span>"id": 1,
</span>      <span>"title": "Read SitePoint article",
</span>      <span>"complete": false
</span>    <span>},
</span>    <span>{
</span>      <span>"id": 2,
</span>      <span>"title": "Clean inbox",
</span>      <span>"complete": false
</span>    <span>},
</span>    <span>{
</span>      <span>"id": 3,
</span>      <span>"title": "Make restaurant reservation",
</span>      <span>"complete": false
</span>    <span>}
</span>  <span>]
</span><span>}
</span>

Untuk mengetahui lebih lanjut mengenai persekitaran CLI sudut, pastikan untuk menyemak panduan rujukan CLI sudut muktamad.

Sekarang bahawa kami mempunyai URL API kami yang disimpan dalam persekitaran kami, kami boleh membuat perkhidmatan sudut untuk berkomunikasi dengan akhir API REST.

Mewujudkan perkhidmatan untuk berkomunikasi dengan API Back End Rest

mari kita gunakan CLI Angular untuk membuat apiservice untuk berkomunikasi dengan API REST BACK END:

Ini memberikan output berikut:

<span>"scripts": {
</span>  <span>...
</span>  <span>"json-server": "json-server --watch db.json"
</span><span>}
</span>

<span>npm install -g @angular/cli@latest
</span>

opsyen -modul app.module.ts memberitahu CLI sudut bukan sahaja membuat perkhidmatan tetapi juga mendaftarkannya sebagai pembekal dalam modul sudut yang ditakrifkan dalam app.module.ts.

mari kita buka src/app/api.service.ts:

npm uninstall -g @angular/cli angular-cli
npm cache clean
<span>npm install -g @angular/cli@latest
</span>

Seterusnya, kami menyuntik persekitaran HTTP Alam Sekitar dan Sudut:

<span>git clone git@github.com:sitepoint-editors/angular-todo-app.git
</span><span>cd angular-todo-app
</span><span>git checkout part-2
</span><span>npm install
</span>ng serve

Sebelum kita melaksanakan kaedah yang kita perlukan, mari kita lihat perkhidmatan HTTP Angular.

Jika anda tidak dikenali dengan sintaks, mengapa tidak membeli kursus premium kami, memperkenalkan typescript.

Perkhidmatan HTTP Angular

Perkhidmatan HTTP Angular boleh didapati sebagai kelas suntikan dari @angular/http.

Ia dibina di atas XHR/JSONP dan memberi kami pelanggan HTTP yang boleh kami gunakan untuk membuat permintaan HTTP dari dalam aplikasi sudut kami.

Kaedah berikut tersedia untuk melaksanakan permintaan HTTP:

• Padam (URL, Pilihan): Lakukan permintaan padam
• GET (URL, PILIHAN): Lakukan permintaan GET
• kepala (url, pilihan): Lakukan permintaan kepala
• Pilihan (URL, Pilihan): Lakukan permintaan pilihan
• patch (url, badan, pilihan): Lakukan permintaan patch
• pos (url, badan, pilihan): Lakukan permintaan pos
• PUT (URL, BODY, OPTIONS): Lakukan permintaan put.

Setiap kaedah ini mengembalikan RXJS yang boleh dilihat.

Berbeza dengan kaedah perkhidmatan HTTP AngularJS 1.x, yang kembali menjanjikan, kaedah perkhidmatan HTTP sudut mengembalikan Observables.

Jangan risau jika anda belum biasa dengan RXJS Observables. Kami hanya memerlukan asas -asas untuk mendapatkan aplikasi kami dan berjalan. Anda secara beransur -ansur boleh mengetahui lebih lanjut mengenai pengendali yang tersedia apabila aplikasi anda memerlukannya dan laman web Reactivex menawarkan dokumentasi yang hebat.

Jika anda ingin mengetahui lebih lanjut mengenai pemerhatian, ia mungkin juga bernilai memeriksa pengenalan SitePoint untuk pengaturcaraan reaktif berfungsi dengan RXJS.

Melaksanakan kaedah apiservice

Jika kita berfikir kembali dari titik akhir API REST kami mendedahkan:

• GET /TODOS: Dapatkan semua todos sedia ada

• get /todos /: id: Dapatkan todo sedia ada

• pos /todos: Buat todo baru

• Put /todos /: id: Kemas kini todo sedia ada

• padam /todos /: id: Padam todo sedia ada

kita sudah dapat membuat garis besar kaedah yang kita perlukan dan kaedah HTTP sudut yang sepadan:

<span>npm install json-server --save
</span>

mari kita lihat dengan lebih dekat setiap kaedah.

getAllTodos ()

kaedah getAllTodos () membolehkan kita mendapatkan semua todo dari API:

<span>{
</span>  <span>"todos": [
</span>    <span>{
</span>      <span>"id": 1,
</span>      <span>"title": "Read SitePoint article",
</span>      <span>"complete": false
</span>    <span>},
</span>    <span>{
</span>      <span>"id": 2,
</span>      <span>"title": "Clean inbox",
</span>      <span>"complete": false
</span>    <span>},
</span>    <span>{
</span>      <span>"id": 3,
</span>      <span>"title": "Make restaurant reservation",
</span>      <span>"complete": false
</span>    <span>}
</span>  <span>]
</span><span>}
</span>

Pertama, kami membuat permintaan untuk mendapatkan semua todos dari API kami:

<span>"scripts": {
</span>  <span>...
</span>  <span>"json-server": "json-server --watch db.json"
</span><span>}
</span>

ini mengembalikan yang dapat dilihat.

Kami kemudian memanggil kaedah peta () pada yang dapat dilihat untuk mengubah respons dari API ke dalam pelbagai objek Todo:

<span>npm install -g @angular/cli@latest
</span>

Respons HTTP yang masuk adalah rentetan, jadi kami pertama kali memanggil respons.json () untuk menghuraikan rentetan JSON ke nilai JavaScript yang sepadan.

Kami kemudian gelung ke atas todos respons API dan mengembalikan pelbagai contoh Todo. Perhatikan bahawa penggunaan peta kedua () ini menggunakan array.prototype.map (), bukan pengendali RXJS.

Akhirnya, kami melampirkan pengendali ralat untuk log ralat potensial ke konsol:

npm uninstall -g @angular/cli angular-cli
npm cache clean
<span>npm install -g @angular/cli@latest
</span>

kami menentukan pengendali ralat dalam kaedah yang berasingan supaya kami dapat menggunakannya semula dalam kaedah lain:

<span>git clone git@github.com:sitepoint-editors/angular-todo-app.git
</span><span>cd angular-todo-app
</span><span>git checkout part-2
</span><span>npm install
</span>ng serve

Sebelum kita dapat menjalankan kod ini, kita mesti mengimport kebergantungan yang diperlukan dari perpustakaan RXJS:

<span>npm install json-server --save
</span>

Perhatikan bahawa perpustakaan RXJS sangat besar. Daripada mengimport keseluruhan perpustakaan RXJS menggunakan Import * sebagai Rx dari 'RXJS/RX', disarankan untuk mengimport kepingan yang anda perlukan. Ini akan mengurangkan saiz bundle kod yang dihasilkan dengan minimum.

Dalam permohonan kami, kami mengimport kelas yang dapat dilihat:

<span>{
</span>  <span>"todos": [
</span>    <span>{
</span>      <span>"id": 1,
</span>      <span>"title": "Read SitePoint article",
</span>      <span>"complete": false
</span>    <span>},
</span>    <span>{
</span>      <span>"id": 2,
</span>      <span>"title": "Clean inbox",
</span>      <span>"complete": false
</span>    <span>},
</span>    <span>{
</span>      <span>"id": 3,
</span>      <span>"title": "Make restaurant reservation",
</span>      <span>"complete": false
</span>    <span>}
</span>  <span>]
</span><span>}
</span>

Kami mengimport tiga pengendali yang diperlukan oleh kod kami:

<span>"scripts": {
</span>  <span>...
</span>  <span>"json-server": "json-server --watch db.json"
</span><span>}
</span>

Pengimport pengendali memastikan bahawa contoh yang dapat dilihat kami mempunyai kaedah yang sesuai dengan mereka.

Jika kita tidak mempunyai import 'rxjs/add/operator/peta' dalam kod kami, maka yang berikut tidak akan berfungsi:

<span>npm run json-server
</span>

Ini kerana yang dapat dilihat dikembalikan oleh ini.http.get tidak akan mempunyai kaedah peta ().

Kami hanya perlu mengimport pengendali sekali untuk membolehkan kaedah yang boleh dilihat secara global dalam permohonan anda. Walau bagaimanapun, mengimport mereka lebih daripada sekali tidak menjadi masalah dan tidak akan meningkatkan saiz bundle yang dihasilkan.

getToDobyId ()

kaedah gettodobyid () membolehkan kita mendapatkan satu todo:

  <span>\{^_^}/ hi!
</span>
  Loading db.json
  Done

  Resources
  http://localhost:3000/todos

  Home
  http://localhost:3000

Kami tidak memerlukan kaedah ini dalam permohonan kami, tetapi ia termasuk untuk memberi anda idea tentang apa yang akan kelihatan seperti itu.

createToDo ()

Kaedah CreateToDo () membolehkan kita membuat todo baru:

<span>// src/environments/environment.ts
</span><span>// used when we run `ng serve` or `ng build`
</span><span>export const environment = {
</span>  production<span>: false,
</span>
  <span>// URL of development API
</span>  apiUrl<span>: 'http://localhost:3000'
</span><span>};
</span>

kami mula -mula melakukan permintaan pos ke API kami dan lulus dalam data sebagai hujah kedua:

<span>// src/environments/environment.prod.ts
</span><span>// used when we run `ng serve --environment prod` or `ng build --environment prod`
</span><span>export const environment = {
</span>  production<span>: true,
</span>
  <span>// URL of production API
</span>  apiUrl<span>: 'http://localhost:3000'
</span><span>};
</span>

Kami kemudian mengubah respons menjadi objek todo:

<span>import { environment } from 'environments/environment';
</span>
<span>// we can now access environment.apiUrl
</span><span>const API_URL = environment.apiUrl;
</span>

updateToDo ()

kaedah updateToDo () membolehkan kami mengemas kini satu todo:

<span>"environments": {
</span>  <span>"dev": "environments/environment.ts",
</span>  <span>"prod": "environments/environment.prod.ts"
</span><span>}
</span>

kami mula -mula melakukan permintaan untuk API kami dan lulus dalam data sebagai hujah kedua:

<span>"environments": {
</span>  <span>"dev": "environments/environment.ts",
</span>  <span>"staging": "environments/environment.staging.ts",
</span>  <span>"prod": "environments/environment.prod.ts"
</span><span>}
</span>

Kami kemudian mengubah respons menjadi objek todo:

ng generate <span>service Api --module app.module.ts
</span>

deleteToDobyId ()

kaedah deleteToDobyid () membolehkan kami memadam satu todo:

installing <span>service
</span>  create src/app/api.service.spec.ts
  create src/app/api.service.ts
  update src/app/app.module.ts

kami mula -mula melakukan permintaan padam ke API kami:

<span>import { Injectable } from '@angular/core';
</span>
<span><span>@Injectable</span>()
</span><span>export class ApiService {
</span>
  <span>constructor() { }
</span>
<span>}
</span>

kita kemudian mengubah respons ke dalam null:

<span>import { Injectable } from '@angular/core';
</span><span>import { environment } from 'environments/environment';
</span><span>import { Http } from '@angular/http';
</span>
<span>const API_URL = environment.apiUrl;
</span>
<span><span>@Injectable</span>()
</span><span>export class ApiService {
</span>
  <span>constructor(
</span>    <span>private http: Http
</span>  <span>) {
</span>  <span>}
</span>
<span>}
</span>

Kami tidak perlu mengubah respons di sini dan boleh meninggalkan garis ini. Ia hanya termasuk untuk memberi anda idea bagaimana anda boleh memproses respons jika API anda akan mengembalikan data apabila anda melakukan permintaan padam.

inilah kod lengkap untuk apiservice kami:

<span>npm install -g @angular/cli@latest
</span>

Sekarang kita mempunyai apiservice kita di tempat, kita boleh menggunakannya untuk membiarkan tododataService kita berkomunikasi dengan API REST BACK END.

Mengemas kini TododataService

Pada masa ini TododataService menyimpan semua data dalam ingatan:

npm uninstall -g @angular/cli angular-cli
npm cache clean
<span>npm install -g @angular/cli@latest
</span>

Untuk membiarkan tododataService kami berkomunikasi dengan akhir API REST kami, kami mesti menyuntik apiservice baru kami:

<span>git clone git@github.com:sitepoint-editors/angular-todo-app.git
</span><span>cd angular-todo-app
</span><span>git checkout part-2
</span><span>npm install
</span>ng serve

kami juga mengemas kini kaedahnya untuk mewakilkan semua kerja kepada kaedah yang sepadan dalam apiservice:

<span>npm install json-server --save
</span>

pelaksanaan kaedah baru kami kelihatan lebih mudah kerana logik data kini dikendalikan oleh API Back End Rest.

Walau bagaimanapun, terdapat perbezaan yang penting. Kaedah lama mengandungi kod segerak dan segera mengembalikan nilai. Kaedah yang dikemas kini mengandungi kod tak segerak dan mengembalikan yang boleh dilihat.

ini bermakna kita juga perlu mengemas kini kod yang memanggil kaedah tododataService untuk mengendalikan pemerhatian dengan betul.

Mengemas kini AppComponent

Pada masa ini, AppComponent mengharapkan tododataService untuk terus mengembalikan objek dan array JavaScript:

<span>{
</span>  <span>"todos": [
</span>    <span>{
</span>      <span>"id": 1,
</span>      <span>"title": "Read SitePoint article",
</span>      <span>"complete": false
</span>    <span>},
</span>    <span>{
</span>      <span>"id": 2,
</span>      <span>"title": "Clean inbox",
</span>      <span>"complete": false
</span>    <span>},
</span>    <span>{
</span>      <span>"id": 3,
</span>      <span>"title": "Make restaurant reservation",
</span>      <span>"complete": false
</span>    <span>}
</span>  <span>]
</span><span>}
</span>

tetapi kaedah apiservice baru kami kembali Observables.

Sama seperti janji -janji, pemerhati tidak segerak dalam alam, jadi kita perlu mengemas kini kod untuk mengendalikan respons yang dapat dilihat dengan sewajarnya:

Jika kita sedang memanggil kaedah tododataService.getAllTodos () dalam mendapatkan todos ():

<span>"scripts": {
</span>  <span>...
</span>  <span>"json-server": "json-server --watch db.json"
</span><span>}
</span>

kaedah tododataService.getAllTodos () memanggil apiservice.getAllTodos () kaedah:

<span>npm run json-server
</span>

ini, seterusnya, mengarahkan perkhidmatan HTTP sudut untuk melaksanakan permintaan HTTP GET:

  <span>\{^_^}/ hi!
</span>
  Loading db.json
  Done

  Resources
  http://localhost:3000/todos

  Home
  http://localhost:3000

Walau bagaimanapun, ada satu perkara penting yang perlu kita ingat!

selagi kita tidak melanggan yang dapat dilihat oleh:

<span>// src/environments/environment.ts
</span><span>// used when we run `ng serve` or `ng build`
</span><span>export const environment = {
</span>  production<span>: false,
</span>
  <span>// URL of development API
</span>  apiUrl<span>: 'http://localhost:3000'
</span><span>};
</span>

tidak ada permintaan http sebenar yang dibuat.

untuk melanggan yang dapat dilihat, kita boleh menggunakan kaedah langganan (), yang mengambil tiga argumen:

• onnext: Fungsi yang dipanggil apabila yang dapat dilihat memancarkan nilai baru
• onError: Fungsi yang dipanggil apabila yang dapat dilihat melemparkan ralat
• onCompleted: Fungsi yang dipanggil apabila yang dapat dilihat telah ditamatkan dengan anggun.

mari kita menulis semula kod semasa kami:

<span>// src/environments/environment.prod.ts
</span><span>// used when we run `ng serve --environment prod` or `ng build --environment prod`
</span><span>export const environment = {
</span>  production<span>: true,
</span>
  <span>// URL of production API
</span>  apiUrl<span>: 'http://localhost:3000'
</span><span>};
</span>

ini akan memuatkan todos secara tidak segerak apabila aplikasi aplikasi diasaskan:

<span>import { environment } from 'environments/environment';
</span>
<span>// we can now access environment.apiUrl
</span><span>const API_URL = environment.apiUrl;
</span>

Pertama, kami menentukan harta awam, todos, dan menetapkan nilai awalnya kepada array kosong.

Kami kemudian menggunakan kaedah ngoninit () untuk melanggan ini.tododataService.getAllTodos (), dan apabila nilai masuk, kami memberikannya kepada ini.

Sekarang mari kita mengemas kini kaedah onaddtodo (todo) untuk mengendalikan tindak balas yang boleh dilihat:

<span>"environments": {
</span>  <span>"dev": "environments/environment.ts",
</span>  <span>"prod": "environments/environment.prod.ts"
</span><span>}
</span>

Sekali lagi, kami menggunakan kaedah langganan () untuk melanggan yang dapat dilihat yang dikembalikan oleh ini.tododataService.addtodo (todo), dan apabila respons datang, kami menambah todo yang baru dibuat ke senarai semasa todos.

kami mengulangi latihan yang sama untuk kaedah lain sehingga aplikasi aplikasi kami kelihatan seperti ini:

<span>npm install -g @angular/cli@latest
</span>

itu sahaja; Semua kaedah kini mampu mengendalikan pemerhatian yang dikembalikan oleh kaedah tododataService.

Perhatikan bahawa tidak perlu berhenti berlangganan secara manual apabila anda melanggan yang dapat dilihat yang dikembalikan oleh perkhidmatan HTTP sudut. Sudut akan membersihkan segala -galanya untuk mengelakkan kebocoran memori.

mari kita lihat sama ada semuanya berfungsi seperti yang diharapkan.

mencuba

Buka tetingkap terminal.

Dari akar direktori aplikasi kami, mulakan akhir API REST:

npm uninstall -g @angular/cli angular-cli
npm cache clean
<span>npm install -g @angular/cli@latest
</span>

Buka tetingkap terminal kedua.

sekali lagi, dari akar direktori aplikasi kami, melayani aplikasi sudut:

<span>git clone git@github.com:sitepoint-editors/angular-todo-app.git
</span><span>cd angular-todo-app
</span><span>git checkout part-2
</span><span>npm install
</span>ng serve

Sekarang, navigasi penyemak imbas anda ke http: // localhost: 4200.

jika semuanya berjalan lancar, anda harus melihat ini:

Jika anda melihat ralat, anda boleh membandingkan kod anda dengan versi kerja di GitHub.

hebat! Permohonan kami kini berkomunikasi dengan API Back End REST! ​​

Petua sampingan: Jika anda ingin menjalankan NPM RUN JSON-SERVER dan NG berkhidmat di terminal yang sama, anda boleh menggunakan serentak untuk menjalankan kedua-dua perintah secara serentak tanpa membuka beberapa tingkap atau tab terminal. mari kita jalankan ujian unit kami untuk mengesahkan bahawa semuanya berfungsi seperti yang diharapkan.

menjalankan ujian kami

Buka tetingkap terminal ketiga.

Sekali lagi, dari akar direktori aplikasi anda, jalankan ujian unit:

Nampaknya ujian 11 unit gagal:

<span>npm install json-server --save
</span>

mari kita lihat mengapa ujian kami gagal dan bagaimana kami dapat membetulkannya.

Memperbaiki ujian unit kami

Pertama, mari kita buka src/todo-data.service.spec.ts:

Kebanyakan ujian unit yang gagal berkenaan dengan memeriksa pengendalian data. Ujian ini tidak lagi diperlukan kerana pengendalian data kini dilakukan oleh akhir API REST kami dan bukannya tododataService, jadi mari kita keluarkan ujian usang:

<span>{
</span>  <span>"todos": [
</span>    <span>{
</span>      <span>"id": 1,
</span>      <span>"title": "Read SitePoint article",
</span>      <span>"complete": false
</span>    <span>},
</span>    <span>{
</span>      <span>"id": 2,
</span>      <span>"title": "Clean inbox",
</span>      <span>"complete": false
</span>    <span>},
</span>    <span>{
</span>      <span>"id": 3,
</span>      <span>"title": "Make restaurant reservation",
</span>      <span>"complete": false
</span>    <span>}
</span>  <span>]
</span><span>}
</span>

Jika kita kini menjalankan ujian unit, kita mendapat ralat:

<span>"scripts": {
</span>  <span>...
</span>  <span>"json-server": "json-server --watch db.json"
</span><span>}
</span>

Ralat dilemparkan kerana testbed.configureTestingModule () mencipta modul sementara untuk ujian dan penyuntik modul sementara tidak mengetahui apa -apa apiservice.

<span>npm run json-server
</span>

Untuk membuat penyuntik menyedari apiservice, kita perlu mendaftarkannya dengan modul sementara dengan menyenaraikan apiservice sebagai pembekal dalam objek konfigurasi yang diserahkan kepada testbed.configureTestingModule ():

Walau bagaimanapun, jika kami melakukan ini, ujian unit kami akan menggunakan apiservice sebenar kami, yang menghubungkan ke hujung API REST kami.

Kami tidak mahu pelari ujian kami menyambung ke API sebenar apabila menjalankan ujian unit kami, jadi mari buat ApimockService untuk mengejek apiservice sebenar dalam ujian unit.

  <span>\{^_^}/ hi!
</span>
  Loading db.json
  Done

  Resources
  http://localhost:3000/todos

  Home
  http://localhost:3000

Membuat ApimockService

mari kita gunakan CLI Angular untuk menghasilkan ApimockService baru:

<span>npm install -g @angular/cli@latest
</span>

Ini menunjukkan perkara berikut:

npm uninstall -g @angular/cli angular-cli
npm cache clean
<span>npm install -g @angular/cli@latest
</span>

Seterusnya, kami melaksanakan kaedah yang sama seperti apiservice, tetapi kami membiarkan kaedah mengembalikan data mock dan bukannya membuat permintaan HTTP:

<span>git clone git@github.com:sitepoint-editors/angular-todo-app.git
</span><span>cd angular-todo-app
</span><span>git checkout part-2
</span><span>npm install
</span>ng serve

Perhatikan bagaimana setiap kaedah mengembalikan data mock baru yang segar. Ini mungkin kelihatan agak berulang, tetapi ia adalah amalan yang baik. Jika satu ujian unit akan mengubah data mengejek, perubahan tidak dapat menjejaskan data dalam ujian unit lain.

Sekarang kita mempunyai perkhidmatan ApimockService, kita boleh menggantikan apiservice dalam ujian unit kami dengan ApimockService.

mari kita buka src/todo-data.service.spec.ts lagi.

Dalam pelbagai pembekal, kami memberitahu penyuntik untuk menyediakan ApimockService apabila apiservice diminta:

<span>npm install json-server --save
</span>

Jika kita kini menjalankan semula ujian unit, ralat hilang. Hebat!

kami masih mempunyai dua ujian yang gagal, walaupun:

<span>{
</span>  <span>"todos": [
</span>    <span>{
</span>      <span>"id": 1,
</span>      <span>"title": "Read SitePoint article",
</span>      <span>"complete": false
</span>    <span>},
</span>    <span>{
</span>      <span>"id": 2,
</span>      <span>"title": "Clean inbox",
</span>      <span>"complete": false
</span>    <span>},
</span>    <span>{
</span>      <span>"id": 3,
</span>      <span>"title": "Make restaurant reservation",
</span>      <span>"complete": false
</span>    <span>}
</span>  <span>]
</span><span>}
</span>

kesilapannya sama dengan yang kita tetap.

Untuk memperbaiki ralat pertama, mari kita buka src/api.service.spec.ts:

<span>"scripts": {
</span>  <span>...
</span>  <span>"json-server": "json-server --watch db.json"
</span><span>}
</span>

Ujian gagal dengan mesej Tiada pembekal untuk http!, Menunjukkan bahawa kita perlu menambah pembekal untuk http.

Sekali lagi, kami tidak mahu perkhidmatan HTTP menghantar permintaan HTTP sebenar, jadi kami memberi instantiat perkhidmatan HTTP yang menggunakan MockBackend Angular:

<span>npm run json-server
</span>

Jangan risau jika mengkonfigurasi modul ujian kelihatan sedikit menggembirakan.

anda boleh mengetahui lebih lanjut mengenai menubuhkan ujian unit dalam dokumentasi rasmi untuk menguji aplikasi sudut.

untuk memperbaiki ralat akhir:

  <span>\{^_^}/ hi!
</span>
  Loading db.json
  Done

  Resources
  http://localhost:3000/todos

  Home
  http://localhost:3000

mari kita buka src/app.component.spec.ts:

<span>// src/environments/environment.ts
</span><span>// used when we run `ng serve` or `ng build`
</span><span>export const environment = {
</span>  production<span>: false,
</span>
  <span>// URL of development API
</span>  apiUrl<span>: 'http://localhost:3000'
</span><span>};
</span>

kemudian berikan penyuntik dengan Apiservice Mock kami:

<span>// src/environments/environment.prod.ts
</span><span>// used when we run `ng serve --environment prod` or `ng build --environment prod`
</span><span>export const environment = {
</span>  production<span>: true,
</span>
  <span>// URL of production API
</span>  apiUrl<span>: 'http://localhost:3000'
</span><span>};
</span>

hurray! Semua ujian kami berlalu:

kami telah berjaya menghubungkan aplikasi sudut kami ke hujung API REST kami.

Untuk menggunakan aplikasi kami ke persekitaran pengeluaran, kini kami boleh menjalankan:

<span>import { environment } from 'environments/environment';
</span>
<span>// we can now access environment.apiUrl
</span><span>const API_URL = environment.apiUrl;
</span>

Kami juga memuat naik direktori Dist yang dihasilkan ke pelayan hosting kami. Betapa manisnya itu?

mari kita rekap apa yang telah kita pelajari.

Ringkasan

Dalam artikel pertama, kami belajar bagaimana:

Inisialisasi aplikasi Todo kami menggunakan sudut CLI
Buat kelas todo untuk mewakili todos individu
Buat perkhidmatan tododataService untuk membuat, mengemas kini dan mengeluarkan todos
Gunakan komponen AppComponent untuk memaparkan antara muka pengguna
menggunakan aplikasi kami ke halaman github.

Dalam artikel kedua, kami refactored AppComponent untuk mewakilkan sebahagian besar karyanya untuk:

TodolistComponent untuk memaparkan senarai todos
todolistitemcomponent untuk memaparkan todo tunggal
todolistheadercomponent untuk membuat todo baru
todolistfootercomponent untuk menunjukkan berapa banyak todos yang tersisa.

Dalam artikel ketiga ini, kita:

• mencipta ujung belakang API Rest Mock
• disimpan URL API sebagai pemboleh ubah persekitaran
• mencipta apiservice untuk berkomunikasi dengan end belakang API REST
• mengemas kini tododataService untuk menggunakan apiservice baru
• mengemas kini aplikasi aplikasi untuk mengendalikan panggilan API asynchronous
• mencipta ApimockService untuk mengelakkan panggilan HTTP sebenar semasa menjalankan ujian unit.

Dalam proses, kami belajar:

• cara menggunakan pembolehubah persekitaran untuk menyimpan tetapan aplikasi
• cara menggunakan klien HTTP sudut untuk melaksanakan permintaan HTTP
• bagaimana menangani pemerhatian yang dikembalikan oleh klien http sudut
• bagaimana untuk mengejek panggilan http untuk mengelakkan permintaan HTTP sebenar semasa menjalankan ujian unit.

Semua kod dari artikel ini boleh didapati di GitHub.

Dalam bahagian empat, kami akan memperkenalkan router dan refactor AppComponent untuk menggunakan penghala untuk mengambil todos dari hujung belakang.

Dalam bahagian lima, kami akan melaksanakan pengesahan untuk mengelakkan akses yang tidak dibenarkan ke aplikasi kami.

Artikel ini dikaji semula oleh Vildan Softic. Terima kasih kepada semua pengulas rakan sebaya SitePoint untuk membuat kandungan SitePoint yang terbaik boleh!

Soalan Lazim (Soalan Lazim) Mengenai Perkhidmatan API Angular dan RXJS dengan Backend Rest

Apakah peranan RXJS dalam perkhidmatan API sudut? kod. Dalam konteks perkhidmatan API sudut, RXJS memainkan peranan penting dalam mengendalikan operasi tak segerak. Ia menyediakan cara untuk membuat dan bekerja dengan pemerhatian yang memungkinkan untuk menguruskan pelbagai operasi asynchronous, mengendalikan kesilapan, dan juga membatalkan operasi. Ini menjadikannya alat yang berkuasa untuk bekerja dengan permintaan HTTP, yang secara semula jadi tidak segerak. Modul ini menyediakan API mudah untuk fungsi HTTP. Ia membolehkan Angular membuat permintaan HTTP ke pelayan, menghantar data pengguna, atau mengambil data dari pelayan. Modul HTTPClient juga termasuk kaedah untuk permintaan seperti Get, Post, Put, Delete, yang sesuai dengan kaedah HTTP yang digunakan dalam API RESTFUL. > Pengendalian ralat adalah bahagian penting dari sebarang permohonan. Dalam perkhidmatan API Angular, anda boleh mengendalikan kesilapan menggunakan pengendali penangkapan dari RXJS. Pengendali ini menangkap kesilapan pada yang dapat dilihat, dan membolehkan anda mengendalikannya atau mengembalikan yang dapat dilihat baru. Anda boleh menggunakannya dalam kaedah paip yang dapat dilihat, selepas kaedah yang mungkin membuang kesilapan.

Bagaimana saya boleh membatalkan permintaan dalam perkhidmatan API Angular?

Dalam perkhidmatan API Angular, anda boleh membatalkan permintaan menggunakan kaedah berhenti berlangganan objek langganan. Apabila anda melanggan yang dapat dilihat, ia mengembalikan objek langganan. Objek ini mempunyai kaedah berhenti berlangganan yang boleh anda panggil untuk membatalkan langganan, dan akibatnya, permintaan HTTP. , anda boleh mencuba semula permintaan yang gagal menggunakan pengendali semula atau cuba semula apabila pengendali dari RXJS. Pengendali semula semula menyerahkan semula kepada permintaan HTTP yang dapat dilihat, dengan berkesan. Operator RetryWhen membolehkan anda menentukan syarat untuk mencuba semula permintaan. Fungsi dari RXJS. Fungsi ini mengambil pelbagai pemerhatian dan mengembalikan yang dapat dilihat baru yang memancarkan pelbagai hasil pemerhatian input, apabila mereka semua selesai.

Dalam perkhidmatan API sudut, anda boleh mengubah data tindak balas menggunakan pengendali peta dari RXJS. Pengendali ini menggunakan fungsi yang diberikan kepada setiap item yang dipancarkan oleh yang dapat dilihat, dan mengembalikan yang boleh diperhatikan baru yang memancarkan hasilnya. Perkhidmatan API Angular, anda boleh menghantar data ke pelayan menggunakan kaedah pos modul HTTPClient. Kaedah ini mengambil URL pelayan dan data untuk dihantar sebagai parameter, dan mengembalikan yang dapat dilihat yang anda boleh melanggan. > Dalam perkhidmatan API Angular, anda boleh mengemas kini data pada pelayan menggunakan kaedah PUT modul HTTPCLIENT. Kaedah ini mengambil URL pelayan, data untuk dikemas kini, dan secara pilihan, pilihan untuk permintaan sebagai parameter, dan mengembalikan yang dapat dilihat yang anda boleh melanggan. Perkhidmatan API Angular?

Dalam perkhidmatan API Angular, anda boleh memadam data dari pelayan menggunakan kaedah padam modul httpclient. Kaedah ini mengambil URL pelayan dan secara pilihan, pilihan untuk permintaan sebagai parameter, dan mengembalikan yang dapat dilihat yang anda boleh melanggan.

Atas ialah kandungan terperinci Angular dan RXJS: Menambah hujung belakang API rehat. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!