著者は、 Write forDOnationsプログラムの一環として寄付を受け取るためにNPowerを選択しました。

序章

Angular は、Googleによって構築されたフロントエンドWebフレームワークです。 これにより、開発者は、 model-view-controller （MVC）または model-view-viewmodel （MVVM）ソフトウェアアーキテクチャパターンをモデルにしたシングルページアプリケーションを構築できます。 このアーキテクチャは、アプリケーションを異なるが接続された部分に分割し、並列開発を可能にします。 このパターンに従って、AngularはさまざまなコンポーネントをWebアプリケーションのそれぞれの部分に分割します。 そのコンポーネントは、そのコンポーネントに関連するデータとロジックを管理し、それぞれのビューにデータを表示し、アプリの他の部分から受信するさまざまなメッセージに基づいてビューを適応または制御します。

Bootstrap は、開発者がレスポンシブWebサイト（さまざまなデバイスに適応するサイト）を迅速かつ効果的に構築するのに役立つフロントエンドライブラリです。 各ページを12列に分割するグリッドシステムを利用して、表示されているデバイスに関係なく、ページが正しいサイズとスケールを維持するようにします。

APIXU は、APIを介して全球気象データをユーザーに提供します。 APIXUを使用すると、ユーザーは世界中の任意の場所の最新の天気と将来の天気予報を取得できます。

このチュートリアルでは、Angular、Bootstrap、およびAPIXUAPIを使用して天気アプリを作成します。 検索フォームに場所を入力し、そのフォームを送信すると、アプリに表示されているその場所の現在の天気の詳細を確認できます。 このチュートリアルで使用されるAngularバージョンは7.2.0であり、使用されるBootstrapバージョンは4.2.1です。

前提条件

このチュートリアルを開始する前に、次のものが必要です。

ステップ1—Angularのインストール

アプリの作成を開始する前に、Angularをインストールする必要があります。 ターミナルを開き、次のコマンドを実行して、AngularCLIをマシンにグローバルにインストールします。

  1. npm install -g @angular/cli

Angular CLI は、Angularのコマンドラインインターフェイスです。 これは、新しいAngularプロジェクトと、Angularプロジェクトを構成するさまざまなサブ要素を作成するための主要な方法として機能します。 -g引数を使用すると、グローバルにインストールされます。

しばらくすると、次の出力が表示されます。

Angularのインストールからの出力
...
+ @angular/cli@7.2.2
...

これで、ローカルマシンにAngularがインストールされました。 次に、Angularアプリケーションを作成します。

ステップ2—Angularアプリを作成する

このステップでは、新しいAngularアプリケーションを作成して構成し、BootstrapやjQueryなどのすべての依存関係をインストールしてから、最後にデフォルトのアプリケーションが期待どおりに機能していることを確認します。

まず、ngコマンドを使用してAngularアプリケーションを作成します。これは、端末から実行できます。

注： Windowsを使用している場合、Node.jsとnpmを正しくインストールしていても、コマンドプロンプトからngコマンドを実行しようとすると問題が発生する可能性があります。 たとえば、ng is not recognized as an internal or external commandなどのエラーが発生する場合があります。 これを解決するには、WindowsのNode.jsフォルダーにあるインストール済みのNode.jsコマンドプロンプト内でngコマンドを実行してください。

ngコマンドは、コマンドラインからAngularでアクションを実行するための前提条件です。 たとえば、新しいプロジェクトを作成する場合でも、コンポーネントを作成する場合でも、テストを作成する場合でも、必要な各機能の前にngコマンドを付けます。 このチュートリアルでは、新しいアプリケーションを作成する必要があります。 これは、ng newコマンドを実行することで実現できます。 ng newコマンドは、新しいAngularアプリケーションを作成し、必要なライブラリをインポートして、アプリケーションに必要なすべてのデフォルトのコードスキャフォールディングを作成します。

新しいアプリケーションを作成することから始めます。このチュートリアルでは、weather-appという名前になりますが、必要に応じて名前を変更できます。

  1. ng new weather-app

ng newコマンドは、新しいアプリケーションに追加する機能に関する追加情報の入力を求めます。

Output
Would you like to add Angular routing? (y/N)

Angular routingを使用すると、ルートとコンポーネントを使用して、さまざまなビューでシングルページアプリケーションを構築できます。 先に進み、yと入力するか、ENTERを押してデフォルトを受け入れます。

Output
Which stylesheet format would you like to use? (Use arrow keys)

ENTERを押して、デフォルトのCSSオプションを受け入れます。

アプリは作成プロセスを続行し、しばらくすると次のメッセージが表示されます。

Output
...
CREATE weather-app/e2e/src/app.e2e-spec.ts (623 bytes)
CREATE weather-app/e2e/src/app.po.ts (204 bytes)
...
Successfully initialized git.

次に、テキストエディタでweather-appフォルダを開きます。

ディレクトリの構造を見ると、いくつかの異なるフォルダとファイルがあります。 これらすべてのファイルがここで何をするかについての完全な説明を読むことができますが、このチュートリアルの目的のために、これらは理解するための最も重要なファイルです：

  • package.jsonファイル。 ルートweather-appフォルダーにあり、他のNode.jsアプリケーションと同じように機能し、アプリケーションが使用するすべてのライブラリ、アプリケーションの名前、テスト時に実行するコマンドなどを保持します。 主に、このファイルには、Angularアプリケーションを正しく実行するために必要な外部ライブラリに関する詳細が含まれています。

  • app.module.tsファイル。 このファイルは、weather-app/srcフォルダー内のappフォルダーにあり、アプリケーションのアセンブル方法をAngularに指示し、アプリケーションのコンポーネント、モジュール、プロバイダーに関する詳細を保持します。 importsアレイ内には、インポートされたモジュールBrowserModuleがすでにあります。 BrowserModuleは、アプリケーションに不可欠なサービスとディレクティブを提供し、常にimports配列の最初にインポートされるモジュールである必要があります。

  • angular.jsonファイル。 アプリのルートweather-appフォルダーにあり、これはAngularCLIの構成ファイルです。 このファイルには、Angularアプリケーションの実行に必要なものの内部構成設定が含まれています。 アプリケーション全体のデフォルトを設定し、テスト時に使用する構成ファイル、アプリで使用するグローバルスタイル、ビルドファイルを出力するフォルダーなどのオプションがあります。 これらのオプションの詳細については、公式のAngular-CLIドキュメントを参照してください。

次にBootstrapをインストールするので、今のところこれらのファイルはすべてそのままにしておくことができます。

ブートストラップには、Angularで正しく機能するためにインストールする必要のある2つの依存関係があります— jQueryとpopper.js。 jQueryはクライアント側のスクリプトに焦点を当てたJavaScriptライブラリであり、popper.jsは主にツールチップとポップオーバーを管理するポジショニングライブラリです。

ターミナルで、ルートweather-appディレクトリに移動します。

  1. cd weather-app

次に、次のコマンドを実行してすべての依存関係をインストールし、package.jsonファイルへの参照を保存します。

  1. npm install --save jquery popper.js bootstrap

--saveオプションは、参照をpackage.jsonファイルに自動的にインポートするため、インストール後に手動で追加する必要はありません。

次のように、インストールされたバージョン番号を示す出力が表示されます。

Output
+ [email protected]
+ [email protected]
+ [email protected]
...

これで、Bootstrapとその依存関係が正常にインストールされました。 ただし、これらのライブラリをアプリケーション内に含める必要もあります。 weather-appはこれらのライブラリが必要であることをまだ認識していないため、jquery、popper.js、bootstrap.js、および[ X142X]