AngularおよびRXJS：REST APIのバックエンドの追加

この記事は、Angular CLIを使用してCRUDアプリを作成する方法に関するSitePoint Angular 2チュートリアルのパート3です。この記事では、アプリケーションを更新して、REST APIのバックエンドと通信します。

ステップバイステップのビデオコースを使用してAngularを学ぶことを好みますか？ SitePoint PremiumでAngular 5を学ぶをご覧ください パート1では、TODOアプリケーションを稼働させてgithubページに展開する方法を学びました。これはうまくいきましたが、残念ながら、アプリ全体が単一のコンポーネントに詰め込まれました。 パート2では、よりモジュール式コンポーネントアーキテクチャを検討し、この単一のコンポーネントを理解し、再利用し、維持しやすい小さなコンポーネントの構造化されたツリーに分割する方法を学びました。 パート0 - 究極のAngular CLIリファレンスガイド

パート1 - TODOアプリケーションの最初のバージョンを起動して実行している

パート2 - Todosと単一のTodo

のリストを表示するための個別のコンポーネントを作成する

パート3 - TODOサービスを更新して、REST APIバックエンドと通信します
パート4 - Angularルーターを使用してデータを解決します
2. パート5 - 認証を追加してプライベートコンテンツを保護します
3. パート6 - Angularプロジェクトを最新バージョンに更新する方法。
4. このチュートリアルのパート1と2つのパートに従って、3つを意味する必要はありません。単にリポジトリのコピーをつかみ、パート2からコードをチェックアウトし、それを出発点として使用することができます。これについては、以下で詳しく説明しています。
キーテイクアウト
7. RXJSを使用してAngularのHTTPClientを利用して、REST APIと通信するときに非同期HTTP要求を効果的に処理します。
環境変数にAPI URLを保存して、コードを変更せずに開発環境と生産環境をシームレスに切り替えます。

適切なHTTPメソッドを使用してREST APIと対話するために、getalltodos、createTodo、deletetodoなどのAPISERVICEメソッドを実装してください。

遷移dodataservice in-memoryストレージからデータ操作のためにapiserviceの活用を活用し、観測可能性を使用して非同期パターンに適応します。

AppComponentを更新して、Apiserviceによって返された観測可能性を管理し、コンポーネントがデータの変更に非同期に反応するようにします。 単体テストのためにApimockServiceを導入し、実際のHTTP要求なしでApiServiceのシミュレーションを許可し、テストの信頼性と独立性を確保します。

Angularアプリケーションテストセットアップを構成して、Apiserviceなどの必要なサービスを含め、非同期テストシナリオを効果的に処理します。

クイック要約
パート2の終わりにアプリケーションアーキテクチャがどのように見えるかは次のとおりです。

• 現在、TododataServiceはすべてのデータをメモリに保存しています。この3番目の記事では、代わりにREST APIのバックエンドと通信するようにアプリケーションを更新します。

  ：
  モックレストAPIバックエンドを作成します
  API URLを環境変数として保存します
  APISERVICEを作成して、REST APIバックエンドと通信します
  TododataServiceを更新して、新しいApiservice
  • を使用します
  AppComponentを更新して、非同期API呼び出しを処理します
  ユニットテストを実行するときに実際のHTTP呼び出しを避けるためにApimockServiceを作成します。

  この記事の終わりまでに、あなたは理解するでしょう：

  環境変数を使用してアプリケーション設定を保存する方法

  Angular HTTPクライアントを使用してHTTPリクエストを実行する方法
  角度HTTPクライアントによって返される観測可能性に対処する方法
  ユニットテストを実行するときに実際のhttpリクエストを行わないようにHTTPコールをmockする方法。
  それでは、始めましょう！
  angular CLIの最新バージョンがインストールされていることを確認してください。そうでない場合は、次のコマンドでこれをインストールできます。
  以前のバージョンのAngular CLIを削除する必要がある場合は、次のことができます。

  その後、パート2からコードのコピーが必要になります。これはGitHubで利用できます。このシリーズの各記事には、リポジトリに対応するタグがあるため、アプリケーションの異なる状態を前後に切り替えることができます。

  パート2で終了し、この記事で始めたコードは、パート2としてタグ付けされています。この記事を終了するコードは、パート3としてタグ付けされています。

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

  特定のコミットIDのエイリアスのようなタグを考えることができます。 Git Checkoutを使用してそれらを切り替えることができます。詳細については、こちらをご覧ください

  だから、起き上がって実行するには（角度CLIの最新バージョンインストール）これを行います。

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

  その後、http：// localhost：4200/にアクセスしてください。すべてが順調であれば、動作するTODOアプリが表示されるはずです。

  REST APIバックエンドのセットアップ

  json-serverを使用して、モックバックエンドをすばやくセットアップしましょう。 アプリケーションのルートから実行：

  次に、アプリケーションのルートディレクトリで、次の内容を持つdb.jsonというファイルを作成します。

  <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
  

  最後に、パッケージにスクリプトを追加して、バックエンドを開始するために：

  これで、REST APIのバックエンドを起動できます：

  これは次のものを表示する必要があります

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

  それだけです！ポート3000で聴いているレストAPIバックエンドがあります。
  バックエンドが予想どおりに実行されていることを確認するには、ブラウザをhttp：// localhost：3000に移動できます。

  <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>

  次のエンドポイントがサポートされています：

  • get /todos：既存のすべてを取得します
  • get /todos /：id：既存のtodo
  を取得します
  • post /todos：新しいtodo
  を作成します
  • put /todos /：id：既存のtodo
  を更新します
  • delete /todos /：id：既存のtodo
  を削除します

  したがって、ブラウザをhttp：// localhost：3000/todosにナビゲートすると、db.jsonのすべてのtodosでJSON応答が表示されます。

  JSON-Serverの詳細については、JSON-Serverを使用してMock Rest APIをチェックしてください。 API URLの保存

  バックエンドを所定の位置に置いたので、AngularアプリケーションにURLを保存する必要があります。

  理想的には、これができるはずです：

  URLを1つの場所に保存して、その値を変更する必要がある場合に1回だけ変更する必要があるように

  開発中にアプリケーションを開発中に開発APIに接続し、生産中の生産APIに接続します。
  幸いなことに、Angular CLIは環境をサポートします。デフォルトでは、2つの環境があります。両方とも、対応する環境ファイルの両方を備えています：SRC/環境/環境と 'SRC/環境/環境。
  2. API URLを両方のファイルに追加しましょう：
  これにより、後で角度アプリケーションで環境からAPI URLを取得することができます。
  ng serveまたはng buildを実行すると、Angular Cliは開発環境で指定された値（SRC/Environments/Environment.ts）を使用します。

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

  しかし、ng serve -environment prodまたはng build -environment prodを実行すると、角度はsrc/環境/環境で指定された値を使用します。

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

  これは、コードを変更することなく、開発と生産に異なるAPI URLを使用するために必要なものです。
  この記事シリーズのアプリケーションは生産でホストされていないため、開発と生産環境で同じAPI URLを指定します。これにより、すべてが予想どおりに機能するかどうかを確認するために、ng serve -environment prodまたはng build -environment製品をローカルに実行できます。

  <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
  

  .Angular-cli.jsonでDEVとPRODとそれらの対応する環境ファイルの間のマッピングを見つけることができます：

  キーを追加することでステージングなどの追加の環境を作成することもできます。

  および対応する環境ファイルの作成。

  Angular CLI環境の詳細については、究極のAngular CLIリファレンスガイドを確認してください。 環境にAPI URLが保存されているので、REST APIのバックエンドと通信するための角度サービスを作成できます。 REST APIバックエンドと通信するためのサービスを作成

  Angular CLIを使用してApiServiceを作成して、REST APIバックエンドと通信しましょう。

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

  これにより、次の出力が得られます

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

  - module app.module.tsオプションは、Angular CLIにサービスを作成するだけでなく、app.module.ts。

  で定義されたAngularモジュールのプロバイダーとして登録するように指示します。 を開きましょう

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

  次に、環境とAngularの組み込みの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
  

  必要な方法を実装する前に、AngularのHTTPサービスを見てみましょう。
  構文に不慣れな場合は、プレミアムコースを購入して、タイプスクリプトを紹介してみませんか。

  角度HTTPサービス Angular HTTPサービスは、 @angular/httpから注入可能なクラスとして利用できます。

  HTTPリクエストを実行するには、次のメソッドが利用可能です

  delete（url、options）：削除要求を実行します

  get（url、options）：get request

  を実行します

  head（url、options）：ヘッドリクエストを実行します

  オプション（url、options）：オプションリクエストを実行します
  patch（url、body、options）：パッチリクエストを実行します
  post（url、body、options）：post request
  • を実行します
  put（url、body、options）：put requestを実行します
  • これらのメソッドのそれぞれは、rxjsの観測可能なものを返します。
  • Angularjs 1.x HTTPサービスメソッドとは対照的に、約束を返しましたが、Angular HTTPサービスメソッドは観測品を返します。
  RXJS Observablesにまだ馴染みがない場合でも心配しないでください。アプリケーションを稼働させるためには基本が必要です。アプリケーションがそれらを必要とし、ReactivexのWebサイトが素晴らしいドキュメントを提供するときに、利用可能なオペレーターについて徐々に詳しく知ることができます。
  • 観測可能性について詳しく知りたい場合は、RXJを使用した機能的リアクティブプログラミングの紹介をチェックする価値があるかもしれません。
  • Apiserviceメソッドの実装
  エンドポイントを振り返ると、REST APIのバックエンドが公開されます：
  get /todos：既存のすべてを取得します

  get /todos /：id：既存のtodo

  を取得します
  post /todos：新しいtodo
  を作成します
  • put /todos /：id：既存のtodo
    を更新します
  • delete /todos /：id：既存のtodoを削除します

  • 必要なメソッドとそれらの対応する角度HTTPメソッドの大まかなアウトラインを既に作成できます：

  各メソッドを詳しく見てみましょう。

  • getalltodos（）

  getAlltodos（）メソッドにより、APIからすべてのTODOを取得できます：

  • 最初に、APIからすべてのTODOを取得するためにGETリクエストを行います：

  これにより、観察可能なものが返されます。

  次に、APIからの応答をTODOオブジェクトの配列に変換するために、観察可能なマップ（）メソッドを呼び出します。

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

  着信HTTP応答は文字列であるため、最初にresponse.json（）を呼び出して、JSON文字列を対応するJavaScript値に解析します。

  次に、API応答のTODOの上にループし、TODOインスタンスの配列を返します。 MAP（）のこの2回目の使用は、RXJSオペレーターではなく、array.prototype.map（）を使用していることに注意してください。

  最後に、エラーハンドラーを添付して、潜在的なエラーをコンソールにログに記録します。
  他の方法で再利用できるように、エラーハンドラーを別の方法で定義します。

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

  このコードを実行する前に、RXJSライブラリから必要な依存関係をインポートする必要があります。
  RXJSライブラリは巨大であることに注意してください。 'rxjs/rx'からrxとしてインポート *を使用してRXJSライブラリ全体をインポートする代わりに、必要なピースのみをインポートすることをお勧めします。これにより、結果のコードバンドルのサイズが最小限に抑えられます。

  <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
  

  アプリケーションでは、観察可能なクラスをインポートします：

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

  コードが必要とする3つの演算子をインポートします：

  オペレーターのインポートにより、観察可能なインスタンスが対応するメソッドが付属していることを保証します。

  コードに「rxjs/add/operator/map」をインポートしていない場合、次のものは機能しません。

  <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>

  これは、this.http.getによって返される観測可能なものがmap（）メソッドを持っていないためです。

  アプリケーションで対応する観測可能な方法をグローバルに有効にするために、オペレーターを1回インポートする必要があります。ただし、それらを複数回インポートすることは問題ではなく、結果のバンドルサイズが増加しません。

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

  gettodobyid（）
  gettodobyid（）メソッドを使用すると、単一のtodoを取得できます。
  アプリケーションではこの方法は必要ありませんが、それがどのように見えるかを示すために含まれています。

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

  createTodo（）
  createTodo（）メソッドを使用すると、新しいtodoを作成できます。
  最初にAPIへのPOSTリクエストを実行し、2番目の引数としてデータを渡します：

  次に、応答をTODOオブジェクトに変換します：

    <span>\{^_^}/ hi!
  </span>
    Loading db.json
    Done
  
    Resources
    http://localhost:3000/todos
  
    Home
    http://localhost:3000
  

  updateTodo（）

  updateTodo（）メソッドを使用すると、単一のtodoを更新できます。

  最初にAPIにプットリクエストを実行し、2番目の引数としてデータを渡す

  <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>

  次に、応答をTODOオブジェクトに変換します：

  <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>

  deletetodobyid（）
  deletetodobyid（）メソッドを使用すると、単一のtodoを削除できます。

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

  最初にAPIへの削除要求を実行します：

  次に、応答をnull：

  に変換します

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

  ここで応答を変換する必要はなく、このラインを除外する可能性があります。削除リクエストを実行したときにAPIがデータを返す場合、応答を処理する方法をアイデアするだけで含まれています。

  APIServiceの完全なコード：

  <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>

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

  apiserviceが整ったので、それを使用して、TododataServiceをREST APIのバックエンドと通信させることができます。

  dododataserviceの更新
  現在、私たちのTododataServiceはすべてのデータをメモリに保存しています：

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

  dododataserviceをレストAPIのバックエンドと通信させるには、新しいapiserviceを注入する必要があります。

  また、その方法を更新して、すべての作業をAPIServiceの対応するメソッドに委任します。

  <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
  

  データロジックが残りのAPIバックエンドによって処理されるため、新しいメソッドの実装はよりシンプルに見えます。

  ただし、重要な違いがあります。古い方法には同期コードが含まれており、すぐに値を返しました。更新された方法には非同期コードが含まれており、観察可能なものを返します。

  これは、観測可能性を正しく処理するためにTododataServiceメソッドを呼び出すコードを更新する必要があることを意味します。

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

  appComponentの更新
  現在、AppComponentは、TododataServiceがJavaScriptオブジェクトと配列を直接返すことを期待しています。
  しかし、私たちの新しいapiserviceメソッドは、observablesを返します

  約束と同様に、観測可能性は本質的に非同期であるため、それに応じて観察可能な応答を処理するためにコードを更新する必要があります。

  現在tododataservice.getalltodos（）メソッドをget dodos（）に呼び出す場合：

  tododataservice.getalltodos（）メソッドは、対応するapiservice.getalltodos（）メソッドを呼び出します

  <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>

  これは、Angular HTTPサービスにHTTP Get Requestを実行するように指示します。
  しかし、覚えておくべき重要なことは1つあります！
  返された観測可能なものを購読しない限り：

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

  実際のhttpリクエストは行われていません。
  観測可能なものを購読するには、subscribe（）メソッドを使用できます。

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

  onnext：観察可能なものが新しい値を発するときに呼び出される関数

    <span>\{^_^}/ hi!
  </span>
    Loading db.json
    Done
  
    Resources
    http://localhost:3000/todos
  
    Home
    http://localhost:3000
  

  onerror：観察可能なときにエラーをスローするときに呼び出される関数
  oncompleted：観察可能なものが優雅に終了したときに呼び出される関数。
  現在のコードを書き直してみましょう：

  <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>

  これにより、AppComponentが初期化されたときにTodosが非同期にロードされます。
  最初に、公共財産を定義し、その初期値を空の配列に設定します。 次に、Ngoninit（）メソッドを使用してthis.tododataservice.getAlltodos（）を購読し、値が入っている場合は、これに割り当てて、空の配列の初期値を上書きします。
  ここで、OnAddTodo（TODO）メソッドを更新して、観察可能な応答も処理します。
  • 再び、subscribe（）メソッドを使用して、this.tododataservice.addtodo（todo）によって返された観測可能なものをサブスクライブし、応答が入ったときに、新しく作成されたtodoをTodosの現在のリストに追加します。 >

    AppComponentが次のようになるまで、他の方法で同じ演習を繰り返します。

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

    それだけです。すべての方法は、Tododataserviceメソッドによって返される観測可能性を処理できるようになりました。
    Angular HTTPサービスによって返される観察可能なものを購読するときに手動で登録する必要はないことに注意してください。 Angularは、メモリリークを防ぐためにすべてをクリーンアップします。

    すべてが期待どおりに機能しているかどうかを見てみましょう。 試してみてください

    端子ウィンドウを開きます。

    アプリケーションディレクトリのルートから、REST APIのバックエンドを開始します：

    2番目の端子ウィンドウを開きます。

    再び、アプリケーションディレクトリのルートから、Angularアプリケーションを提供してください：

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

    さあ、ブラウザをhttp：// localhost：4200。

    に移動します

    すべてがうまくいった場合、これを見る必要があります：

    <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
    

    エラーが表示された場合は、コードをGitHubの作業バージョンと比較できます。

    すごい！私たちのアプリケーションは現在、REST APIバックエンドと通信しています！

    サイドヒント：NPMを実行する場合は、JSON-ServerとNGサーブを同じ端末で実行します。複数の端末ウィンドウまたはタブを開くことなく、両方のコマンドを同時に実行することができます。 ユニットテストを実行して、すべてが期待どおりに機能していることを確認しましょう。

    テストを実行してください
    3番目の端子ウィンドウを開きます 再び、アプリケーションディレクトリのルートから、ユニットテストを実行してください：

    11個のユニットテストが失敗しているようです： なぜ私たちのテストが失敗しているのか、どのように修正できるかを見てみましょう。

    単体テストの修正

    最初に、src/todo-data.service.spec.tsを開きましょう

    障害のある単体テストのほとんどは、データ処理のチェックに関係しています。これらのテストは、データ処理がTododataServiceの代わりにREST APIバックエンドによって実行されるため、もはや必要ありません。したがって、時代遅れのテストを削除しましょう。

    ユニットテストを実行した場合、エラーが発生します：

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

    testbed.configuretestingModule（）がテスト用の一時モジュールを作成し、一時モジュールのインジェクターがApiserviceを認識していないため、エラーがスローされます。

    インジェクターにApiserviceを認識させるには、testbed.configuretestingmodule（）：

    > configuretestingmoduleに渡される構成オブジェクトのプロバイダーとしてApiserviceをリストすることにより、一時モジュールに登録する必要があります。
    ただし、これを行うと、ユニットテストでは、REST APIのバックエンドに接続する実際のApiserviceが使用されます。

    ユニットテストを実行するときにテストランナーを実際のAPIに接続したくないので、ユニットテストで実際のAPIServiceをock笑するApimockServiceを作成しましょう。

    apimockserviceの作成
    Angular CLIを使用して、新しいApimockService：

    <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>

    を生成しましょう

    <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>

    次に、Apiserviceと同じ方法を実装しますが、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
    

    各メソッドが新鮮な新しいモックデータを返す方法に注目してください。これは少し反復的に思えるかもしれませんが、それは良い習慣です。あるユニットテストがモックデータを変更する場合、変更は別の単位テストでデータに影響を与えることはありません。

    ApimockServiceサービスができたので、ユニットテストのApiserviceをApimockServiceに置き換えることができます。

    プロバイダーアレイでは、Apiserviceが要求されるたびにApimockServiceを提供するようインジェクターに指示します。

    ユニットテストを再実行すると、エラーがなくなります。素晴らしい！

    ただし、さらに2つの失敗したテストがあります。

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

    エラーは、修正したばかりのエラーに似ています。 を開いてみましょう

    テストは、http！のプロバイダーなしでメッセージで失敗します。http。 再び、HTTPサービスが実際のHTTPリクエストを送信することは望ましくないため、Angularのモックバックエンドを使用する模擬HTTPサービスをインスタンス化します：

    <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>

    テストモジュールを構成しても少し圧倒的に見えても心配しないでください。

    角度アプリケーションをテストするための公式ドキュメントでユニットテストのセットアップについて詳しく知ることができます。 最終エラーを修正するには、

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

    を開いてみましょう

    次に、インジェクターにモックアピスサービスを提供します：

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

    hurray！私たちのすべてのテストが渡されています：

      <span>\{^_^}/ hi!
    </span>
      Loading db.json
      Done
    
      Resources
      http://localhost:3000/todos
    
      Home
      http://localhost:3000
    

    角度アプリケーションをREST APIのバックエンドに正常に接続しました。

    アプリケーションを生産環境に展開するには、今すぐ実行できます：

    <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>

    また、生成されたdistディレクトリをホスティングサーバーにアップロードします。それはどれほど甘いですか？
    学んだことを要約しましょう。

    <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>

    要約

    最初の記事では、次の方法を学びました

    Angular Cli

    を使用してTODOアプリケーションを初期化します

    個々のTODOを表すためにTODOクラスを作成します
    TododataServiceサービスを作成して、todos

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

    を作成、更新、削除します

    AppComponentコンポーネントを使用して、ユーザーインターフェイスを表示

    に表示します

    アプリケーションをgithubページに展開します。

    2番目の記事では、AppComponentをリファクタリングして、その作業のほとんどを次のように委任します。
    Todolistcomponent
    のリストを表示します
    • 単一のtodo
    を表示するtodolistitemcomponent
    • 新しいtodo
    を作成するdolistheadeadercomponent
    • Todolistfootercomponentが残っているのかを示します
    • この3番目の記事では、
    • ock rest api back end
    を作成しました
    • API URLを環境変数として保存しました
    • 残りのAPIバックエンドと通信するためにAPIServiceを作成しました
    • TododataServiceを更新して、新しいApiservice
    を使用しました
    • AppComponentを更新して、非同期API呼び出しを処理します
    • ユニットテストを実行するときに実際のHTTP呼び出しを避けるためにApimockServiceを作成しました。
    プロセスでは、

    を学びました

    環境変数を使用してアプリケーション設定を保存する方法
    Angular HTTPクライアントを使用してHTTPリクエストを実行する方法
    角度HTTPクライアントによって返される観測可能性に対処する方法
    単位テストを実行するときに実際のHTTPリクエストを回避するためにHTTPコールを模倣する方法。
    • この記事のすべてのコードは、githubで入手できます。
    パート4では、ルーターとリファクタルAppComponentを導入して、ルーターを使用してバックエンドからTODOを取得します。
    パート5では、アプリケーションへの不正アクセスを防ぐための認証を実装します。
    この記事は、Vildan Softicによってピアレビューされました。 SetePointコンテンツを最高にするためにSitePointのピアレビュアーのすべてに感謝します！

    angularおよびrxjs APIサービスに関するよくある質問（FAQ） Angular APIサービスにおけるRXJSの役割は何ですか？

    ​​

    RXJSは、JavaScriptのリアクティブな拡張機能の略であり、観測可能性を使用するリアクティブプログラミングのライブラリであり、非同期またはコールバックベースの構成を容易にします。コード。 Angular APIサービスのコンテキストでは、RXJSは非同期操作の処理において重要な役割を果たします。これは、複数の非同期操作を管理し、エラーを処理し、さらには操作をキャンセルすることを可能にする観測可能性を作成して作業する方法を提供します。これにより、HTTPリクエストを操作するための強力なツールになります。これは、本質的に非同期です。エラー処理は、あらゆるアプリケーションの重要な部分です。 Angular APIサービスでは、RXJSのCatcherRorオペレーターを使用してエラーを処理できます。このオペレーターは、観察可能なエラーをキャッチし、それを処理するか、新しい観測可能なものを返すことができます。エラーをスローする可能性のある方法の後、観察可能なパイプ方法で使用できます。

    Angular APIサービスでリクエストをキャンセルするにはどうすればよいですか？

    Angular APIサービスでは、サブスクリプションオブジェクトの登録解除メソッドを使用してリクエストをキャンセルできます。 Observableを購読すると、サブスクリプションオブジェクトを返します。このオブジェクトには、サブスクリプションをキャンセルするために呼び出すことができる登録解除メソッドがあり、その結果、HTTPリクエスト。 、RXJSからのオペレーターを再試行または再試行して、失敗した要求を再試行できます。 Retryオペレーターは、HTTP要求を効果的に繰り返し、Observableに再サブスクライブします。 Retryのオペレーターを使用すると、リクエストを再試行するための条件を定義できます。 RXJSからの関数。この関数は、観測可能性の配列を取得し、入力観測器の結果の配列を放出する新しい観測可能なものを返します。 Angular APIサービスでは、RXJSのマップ演算子を使用して応答データを変換できます。このオペレーターは、観察可能なものによって放出される各アイテムに特定の関数を適用し、結果を発する新しい観測可能なものを返します。 Angular APIサービスでは、HTTPClientモジュールのPOSTメソッドを使用してデータをサーバーに送信できます。このメソッドは、サーバーのURLとデータをパラメーターとして送信するようにし、登録できる観測可能を返します。 > Angular APIサービスでは、HTTPClientモジュールのPUTメソッドを使用してサーバー上のデータを更新できます。このメソッドは、サーバーのURL、更新するデータ、およびオプションでリクエストのオプションをパラメーターとして使用し、サブスクライブできる観測可能なものを返します。 Angular API Service？

以上がAngularおよびRXJS：REST APIのバックエンドの追加の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。