AngularCLIを使用したAngular入門

著者は、 Open Internet / Free Speech Fund を選択して、 Write forDOnationsプログラムの一環として寄付を受け取りました。

序章

Angular は、インタラクティブなWeb、モバイル、およびデスクトップアプリケーションを作成する人気のあるJavaScriptフレームワークです。 関心の分離、ファーストクラスのTypeScriptサポート、および堅牢なコマンドラインインターフェイス（CLI）により、Angularは最新のエンタープライズアプリケーションの最上位の選択肢になっています。

Angular CLIは、Angularの使用を開始するプロセスを簡素化します。 CLIは、コード生成、本番ビルド、および依存関係の管理も行います。

このチュートリアルを終了すると、AngularCLIを使用してAngularアプリケーションが作成されます。 CLIを使用して新しいアプリを作成し、ブラウザーで実行して、本番用にビルドします。

また、Angularがプレゼンテーション、スタイリング、ビジネス上の懸念を個別のユニットに分割する方法についても説明します。 これには、HTML、CSS、およびTypeScriptレイヤーが相互に作用する方法を練習することが含まれます。

前提条件

記事をフォローするには、次のものが必要です。

• ターミナルまたはコマンドラインインターフェイスの基本的な知識。 詳細については、Linuxターミナルの概要ガイドをお読みください。
• TypeScriptの知識は役に立ちますが、必須ではありません。 TypeScriptを確認するには、TypeScriptでコーディングする方法シリーズを確認してください。
• CSSおよびHTMLに精通していること、およびJavaScriptでコーディングする方法シリーズをフォローすることで習得できるJavaScriptの基本的な知識。
• Node.jsバージョン8.9以降。 Nodeは、 Webサイトからダウンロードするか、 Node VersionManagerを使用してNodeのインストールを管理することでインストールできます。

ステップ1—AngularCLIをインストールして最初のアプリケーションを作成する

このステップでは、ローカルコンピューターにAngular CLIをインストールし、Angularアプリケーションを構築します。 まず、Angular CLIをダウンロードして、次の3つの目標を達成します。

• 新しいAngularプロジェクトを作成する

• ローカル開発サーバーを実行します

• このアプリケーションを本番用にビルドする

ターミナルで次のコマンドを実行して、AngularCLIをダウンロードします。

npm install -g @angular/cli

インストールが成功したことを確認するには、ターミナルで次のコマンドを実行します。

ng version

Angular CLIは、現在のバージョンと周囲の環境をターミナルに出力します。

Output
Angular CLI: 12.1.4
Node: 14.17.4
Package Manager: npm 6.14.14
OS: darwin x64

Angularでの作業を開始するには、CLIを使用して最初のワークスペースを作成します。 my-first-angular-app. Angularのプロジェクトはworkspacesとして知られています。

ターミナルで次を実行します。

ng new my-first-angular-app

このコマンドは、ワークスペースの構成に使用されるいくつかの初期化の質問をします。

Output
? Would you like to add Angular routing? (y/N) N
? Which stylesheet format would you like to use?
❯ CSS
 SCSS   [ https://sass-lang.com/documentation/syntax#scss                ]
 Sass   [ https://sass-lang.com/documentation/syntax#the-indented-syntax ]
 Less   [ http://lesscss.org

最初の質問には、次のように入力します N このプロジェクトではAngularルーティングを使用しないためです。 あなたの ENTER また RETURN 鍵。

2番目の質問で、 CSS スタイルシート形式として。

あなたの ENTER また Return プロジェクトを初期化するためのキー。

これで、Angularワークスペースという名前が付けられます my-first-angular-app. Angular CLIは、プロジェクトの作成に必要な依存関係をインストールします。 Angular CLIとワークスペースの作成の詳細については、Angularドキュメントを確認してください。

Angular CLIをダウンロードし、新しいAngularワークスペースを作成したので、ブラウザーでアプリケーションを実行する方法を見てみましょう。

ステップ2—ブラウザでAngularアプリケーションを実行する

このステップでは、CLIを使用してブラウザーでアプリケーションを実行します。 Angularのローカル開発サーバーは、ファイルシステムが変更されるたびにブラウザーを更新します。 フィードバックサイクルが速いため、変更の結果をできるだけ早く確認できます。

Angularのローカル開発サーバーには、次の利点があります。

• 選択したポートでローカルWebサーバーを起動します。
• ファイルの変更を監視し、変更時にブラウザをリロードします。
• TypeScriptのコンパイルとバンドルを管理します。

あなたがにいることを確認してください my-first-angular-app 端末で次のコマンドを実行してディレクトリを作成します。

cd my-first-angular-app

次に、ターミナルで次のコマンドを実行してWebサーバーを起動します。

ng serve -o

Angularは開発アプリケーションを構築し、ローカルWebサーバーに公開します。 http://localhost:4200. 追加したため、アプリケーションはWebブラウザで開きます -o フラグを立てる ng serve.

端末の出力を調べることにより、これが成功したことを確認できます。

Output
✔ browser application bundle generation complete.

Initial Chunk Files | Names         |      Size
vendor.js           | vendor        |   2.08 MB
polyfills.js        | polyfills     | 128.57 kB
main.js             | main          |  10.81 kB
runtime.js          | runtime       |   6.59 kB
styles.css          | styles        | 179 bytes

                    | Initial Total |   2.22 MB

Build at: 2021-08-01T23:30:14.012Z - Hash: 3302767a539a29a592de - Time: 7433ms
** Angular Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ **

✔ Compiled successfully.

他の構成オプションをに渡すことができます ng serve 環境をカスタマイズします。 構成オプションの完全なリストはここで確認できます。

これで、Angularアプリケーションが画面に表示されます。 に限って ng serve が実行されている場合、ファイルシステムに変更を加えると、ブラウザが新しいコンテンツで更新されます。 保つ ng serve アプリケーションの開発プロセス全体で実行されます。

このステップでは、を使用してブラウザでAngularアプリケーションを実行しました ng serve. `ng serve-o’などの構成オプションをCLIコマンドに渡しました。

次に、Angularコンポーネントに変更を加え、その変更が画面に反映されることを確認します。

ステップ3—ホームページテンプレートを更新する

このステップでは、HTMLを編集して画面にコンテンツを表示します。 HTMLテンプレートは、Angularコンポーネントのviewとも呼ばれます。 このステップを終了するまでに、スターターテンプレートをコンテンツで更新する方法を学習しました。

あなたはあなたのためのHTMLを見つけることができます AppComponent で src/app/app.component.html. 選択したテキストエディタでこれを開き、内容を削除します。 マークアップを書き込む準備ができている空白のHTMLドキュメントが必要です。

以下のHTMLコピーを src/app/app.component.html:

<div>
 <article>
  <header>
    <h1>I'm learning Angular at DigitalOcean</h1>
  </header>
  <section>
    <p>Here's what I've learned so far:</p>
    <ul>
      <li>
        Angular allows us to create performant web applications using TypeScript.
      </li>
      <li>
        I can use the Angular CLI to create/interact with my Angular workspace.
      </li>
      <li>
        Making changes will automatically be shown on screen, thanks to the local development server!
      </li>
    </ul>
  </section>
 </article>
</div>

追加しました <div> ヘッダーと、順序付けされていないリストを含むセクションが含まれています。 順序付けされていないリストは箇条書きで表示され、タイトルは大きなフォントで表示されます。 <h1> 鬼ごっこ。

ドキュメントを保存するとすぐにアプリコンポーネントが更新されることに注意してください。 自由に自分の追加を試して、リアルタイムでそれらを目撃してください。

これで、ベースアプリコンポーネントのHTMLテンプレートが更新されました。 これは、Angularアプリケーションのエントリコンポーネントです。 次のステップでは、CSSを使用してコンテンツのスタイルを設定します。

ステップ4—ホームページのスタイリングを更新する

このステップでは、CSSを使用してアプリケーションのスタイルを設定します。 Angularを使用すると、スコープスタイルとグローバルスタイルの両方で作業できます。 CSSをコンポーネントにスコープする機能により、設計を妨げることなく柔軟性が得られます。

まず、編集してアプリケーションのデフォルトのグローバルスタイルを設定します。 src/styles.css:

body {
 background-color: #fce7f3;
 display: flex;
 align-items: center;
 justify-content: center;
 height: 100vh;
 font-size: 2rem;
}

これらのスタイルは、すべてのコンテンツを画面の中央に配置し、暖かい背景色を設定します。 グローバルに加えられた変更に注意してください styles.css 今後、すべてのコンポーネントに表示されます。 成功すると、ブラウザに次の情報が表示されます。

AngularCLIは追加します styles.css に styles の配列 build あなたのビルダー angular.json ファイル。 に参照を手動で追加する必要はありません styles.css に index.html.

{
 "projects": {
 "my-first-angular-app": {
 ...
 "architect": {
 "build": {
 "builder": "@angular-devkit/build-angular:browser",
 "options": {
 ...
 "styles": ["src/styles.css"]
          }
        }
      }
    }
  }
}

ステップ6でAngularビルドプロセスの詳細を確認します。

次に、アプリコンポーネントのスタイルを設定しましょう。 コンポーネントに追加されたスタイルは、アプリケーションの他の部分には表示されません。 スタイルスコーピングの詳細については、Angularドキュメントをお読みください。

に向かいます src/app/app.component.css そして、グローバルスタイルの下に次のCSSを追加します。

...
[label src/app/app.component.css] article {
 background-color: #fbcfe8;
 padding: 2rem 4rem;
 color: #1f2937;
 font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
 box-shadow: 20px 20px 0px #db2777;
 border: 6px solid #831843;
 border-radius: 2rem;
}

header {
 text-decoration: underline;
}

ul {
 list-style: square;
}

あなたのスタイルがコンテンツに表示されます <article> ブラウザのタグ：

スタイリングが整ったら、ユーザーインターフェイスを動的に変更する方法を見ていきましょう。

ステップ5—ホームページTypeScriptを更新する

このステップでは、AngularアプリケーションでTypeScriptを使用します。 src/app/app.component.ts. Angularはデコレータを使用して、コンポーネントを動的にスタイル設定します ngStyle と ngClass.

AngularコンポーネントはJavaScriptを使用します class 構文。 このクラスがコンポーネントであることをAngularに伝えるには、 @Component(...) クラスのデコレータ。

TypeScriptおよびAngularのデコレータは、クラスまたは関数の宣言に関するメタデータを提供します。 Angularでは、依存性注入システムとコンパイラーにメタデータを提供するために特に使用されます。 これにより、クラスまたは関数の実行前、実行中、実行後に任意のコードを実行できます。 次に、Angularはコンポーネントに接続するファイルを関連付けます。 デコレータの詳細については、TypeScriptここを参照してください。

あなたはこれが実際に動作しているのを見ることができます AppComponent CLIで作成されます。 開ける src/app/app.component.ts そして、次のことを守ってください。

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
 ...
}

に注意してください styleUrls プロパティは、1つの値を持つ配列です。 それの訳は app-root 1つのCSSスタイルシートが含まれています。 さらにスタイルシートを追加することができます styleUrls 配列、およびAngularはそれらを一緒にバンドルします。

The selector このコンポーネントを識別するCSSセレクターです。 これはHTMLテンプレートのコンポーネントの名前になり、内部で確認できます。 index.html:

<!doctype html>
  <html lang="en">
    <head>
      ...
    </head>
    <body>
      <app-root></app-root>
    </body>
</html>

Angularを使用すると、内部で定義されたアプリケーションの状態をバインドできます src/app/app.component.ts でそのHTMLテンプレートにファイル src/app/app.component.html.

以内 AppComponent、という名前の新しい変数を作成します myNextProject それに値を割り当てます a porfolio website:

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  myNextProject = 'a portfolio website.';
}

これで、変数をバインダーとして使用できます。 src/app/app.component.html TypeScriptで定義されたデータをHTMLテンプレートに接続します。 Angularは、変数を二重中括弧で囲むことにより、HTMLでTypeScript変数を定義します。

{{ myNextProject }}

内部 src/app/app.component.html、テキスト内の変数を追加します <footer> 鬼ごっこ：

<article>
  <header>
    <h1>I'm learning Angular at DigitalOcean</h1>
  </header>
  <section>
    <p>Here's what I've learned so far:</p>
    <ul>
    <li>
      Angular allows you to create performant web applications using TypeScript.
    </li>
    <li>
      I can use the Angular CLI to create/interact with my Angular workspace.
    </li>
    <li>
      Making changes will automatically be shown on screen, thanks to the local development server!
    </li>
  </ul>
 </section>
 <footer>
    <p>For my next project, I'll be making {{ myNextProject }}</p>
 </footer>
</article>

内のコンテンツ <p> タグは次のようにレンダリングされます For my next project, I'll be making a portfolio website. ブラウザで：

ここで実行するように、テンプレートの値をバインドすると、動的コンテンツをユーザーに提供できます。

TypeScriptファイル内の関数を使用して、出力を決定することもできます。 あなたの中で src/app/app.component.ts、新しい変数を定義します showPurpleBoxShadow と getBoxShadow() 関数：

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  myNextProject = 'a portfolio website.';

  showPurpleBoxShadow = true;

 get boxShadow() {
 if (this.showPurpleBoxShadow) return '20px 20px 0px #bdb2ff';

 return '20px 20px 0px #DB2777';
  }
}

に移動します src/app/app.component.html ファイルを挿入し、 [ngStyle] あなたの内の指令 <article> 鬼ごっこ：

<article [ngStyle]="{'box-shadow': boxShadow}">...</article>

ngStyle アプリケーションの状態をCSSスタイルにバインドするAngularディレクティブです。 Angularでは、ディレクティブはDOM要素の「マーカー」です。 [ngStyle]. その後、AngularはDOM要素に機能をアタッチできるようになります。

このシナリオでは、異なるものを適用しています box-shadow の値に応じたスタイル showPurpleBoxShadow. を使用して同じ結果を達成することもできます ngClass 指令。 CSSスタイルを適用する代わりに、これは条件付きでCSSクラスを適用します。

開ける src/app/app.component.css 次のCSSクラスを追加します。

.purple-box-shadow {
 box-shadow: 20px 20px 0px #bdb2ff;
}

.pink-box-shadow {
 box-shadow: 20px 20px 0px #db2777;
}

次に、 src/app/app.component.ts、更新します boxShadow 代わりにクラス名を返すゲッター：

export class AppComponent {
 ...

 get boxShadow() {
 if (this.showPurpleBoxShadow) return 'purple-box-shadow';

 return 'pink-box-shadow';
  }
}

その後、を使用することができます ngClass 条件付きで適用するディレクティブ purple-box-shadow クラスへ <article> 鬼ごっこ：

<article [ngClass]="boxShadow">
...
</article>

成功すると、ブラウザに次の情報が表示されます。

これで、変更のたびに再デプロイすることなく、デザインマニフェストを画面に表示できます。 開発と本番用にAngularアプリケーションを構築する方法を見てみましょう。

ステップ6—本番環境の構築

このステップでは、Angular CLIを使用して、Angularプロジェクトの本番ビルドを生成します。 AngularはWebpackを使用します。これを使用して、ファイルをバンドルし、サイトを本番用に最適化します。

Webpack は、JavaScriptアプリケーション用のオープンソースモジュールバンドラーです。 コード/アセットをオンデマンドでロードする機能を提供します。 サーバーから必要なすべてのアセットをフェッチするために必要なリクエストの数を最小限に抑える強力な最適化システムを提供します。

カスタムWebpack構成ファイルを作成するには、記事AngularCLIビルダーでカスタムWebpack構成を使用する方法を確認してください。

デフォルトでは、AngularCLIは2種類のビルドを提供します。

発達

最適化されていないバージョンのコードには、ソースマップとランタイムチェックが含まれており、アプリを開発する前に本番環境にデプロイする際に問題を検出して調査するのに役立ちます。

コマンドを実行すると、AngularCLIは最適化されていないバージョンのコードを生成します ng serve. 開発ビルドを本番環境にデプロイすることは避けてください。 開発ビルドには、高速で本番環境に対応したアプリケーションに必要な最適化は含まれていません。

あなたはであなたのプロジェクトを構築することができます development 端末で次のコマンドを実行して構成します。

ng build --configuration development

製造

を使用してプロジェクトを構築する production 構成により、最適化されたコードが生成され、次のような利点が得られます。

• アプリケーションのサイズを小さくするためのコードの縮小とバンドル。
• インポートされたモジュールの未使用部分を最終ビルドから除外するためのツリーシェイク。機能に悪影響を与えることなく帯域幅を節約します。
• ソースマップ、コンパイラエラー、およびバンドルサイズが小さい場合の警告はありません。

ページ速度と配信時間は検索エンジンとユーザーにとって重要な指標であるため、本番環境のビルドは公開アプリケーションに不可欠です。 ページ速度と配信時間の最適化の詳細については、ここをクリックをクリックしてください。

本番ビルドを生成するには、 ng build プロジェクトフォルダから。 CLIはコードをリントし、アプリケーションの最適化された縮小バージョンを生成します。

成功すると、バンドルに関する統計が提供されます。

Output
✔ browser application bundle generation complete.
✔ Copying assets complete.
✔ Index html generation complete.

Initial Chunk Files        | Names     |   Size
main.0deeec3d31917b111ae5.js   | main     | 104.77 kB
polyfills.313e64a67eb403254da5.js | polyfills   | 35.96 kB
runtime.284ffbeed756735f6289.js  | runtime    |  1.02 kB
styles.e5294562d7aae78a8725.css  | styles    | 113 bytes

| Initial Total | 141.86 kB

ファイル名の名前の後に一意のハッシュがあることに注意してください。 Angularはこれを追加して、「キャッシュバスティング」を可能にします。 ビルドごとにハッシュが変更されるため、ブラウザはサイトに再度アクセスしたときにキャッシュをリセットできます。

ファイルに変更を加えると、ハッシュが変更され、ブラウザが新しいファイルをリロードします。 それ以外の場合、ブラウザはキャッシュされたバージョンを使用します。

Angular CLIは、バンドルサイズが大きすぎる場合、この段階で警告を表示することもできます。 アプリケーションが大きくなるにつれて、バンドルサイズを引き続き確認する必要があります。

次のようなAngularCLIコマンドに対応する構成オプションを見つけることができます。 ng build と ng serve、 の中に angular.json ファイル。 をナビゲートします configurations に設定されたオプションを表示するためのキー production と development ビルドします。 これらの制限は、ビルドごとに構成できます。

{
 ...
 "projects": {
 "my-first-angular-app": {
 "architect": {
 "build": {
 ...
 "configurations": {
 "production": {
 "budgets": [
 {
  "type": "initial",
  "maximumWarning": "500kb",
  "maximumError": "1mb"
 },
 {
  "type": "anyComponentStyle",
  "maximumWarning": "2kb",
  "maximumError": "4kb"
 }
],
            }
          }
        }
      }
    }
  }
}

The ng build コマンドはこれらをに出力します dist/my-first-angular-app 展開用にビルドされたファイルにアクセスするためのフォルダー。 これらのファイルを使用して、アプリケーションをサーバーまたはCDNにデプロイできます。 詳細については、AngularCLIのドキュメントを参照してください。

このステップでは、AngularCLIを使用して開発および本番ビルドを作成する方法を学習しました。 また、バンドルサイズなど、パフォーマンスの高いWebアプリケーションを作成するための重要な要素についても検討しました。

結論

このチュートリアルでは、AngularCLIを使用してAngularプロジェクトを作成しました。 プロジェクトを実行してブラウザーで実行し、アプリケーションの外観と実行方法を更新しました。

CLIを使用して本番ビルドを生成し、構成オプションについて学習して、CLIが動作する方法と場所をより深く理解しました。

Angular CLIと追加コマンドの詳細については、AngularCLIのドキュメントを確認してください。