目次
1 はじめに
Angular は、効率的でエレガントなシングルページ アプリケーションを作成するように設計されたアプリケーション デザイン フレームワークおよび開発プラットフォームです。
Angular は TypeScript に基づいて構築された開発プラットフォームです
。それには以下が含まれます:
-
スケーラブルな Web アプリケーションを構築するためのコンポーネントベースのフレームワーク
-
ルーティング、フォーム管理、クライアント/サーバー通信などの幅広い機能をカバーする、適切に統合されたライブラリのセット
-
コードの開発、構築、テスト、更新に役立つ一連の開発ツール
Angular を使用すると、個人プロジェクトでもエンタープライズ アプリケーションでも、プラットフォームの利点を活用できます。Angular の設計目標の 1 つは、更新を簡単にすることで、最小限のコストで最新の Angular バージョンにアップグレードできるようにすることです。最も重要なことは、Angular のエコシステムは 170 万人の開発者、ライブラリ作成者、コンテンツ作成者からなる多様なチームで構成されていることです。
2. 特徴
2.1 複数のプラットフォームにわたる
Angular を使用してアプリケーションを構築し、Web、モバイル Web、モバイル アプリ、ネイティブ アプリ、デスクトップ ネイティブ アプリなど、さまざまなプラットフォーム上の複数のアプリケーションにわたってそのコードと機能を再利用する方法を学びます。
2.2 速度とパフォーマンス
Web ワーカーとサーバーサイド レンダリングを使用して、今日 (そして将来) の Web プラットフォームで可能な限り最高の速度を実現します。
Angular はスケーラビリティをあなたの手にもたらします。
RxJS、Immutable.js、その他のプッシュ モデルに基づいており、大量のデータ要件に適応できます。
2.3 素晴らしいツール
シンプルな宣言型テンプレートを使用して機能を迅速に実装します。カスタム コンポーネントと多数の既存コンポーネントを使用してテンプレート言語を拡張します。ほぼすべての IDE で、Angular のヘルプとフィードバックをすぐに入手できます。これらはすべて、美しいアプリケーションを作成するためのものであり、コードを「使える」ものにするために知恵を絞るためのものではありません。
3. Angular アプリケーション: ナレッジポイント
3.1 コンポーネント
コンポーネントはアプリケーションを構成するモジュールです。コンポーネントは、 デコレータを備えた TypeScript クラス、HTML テンプレート、スタイル ファイルの 3 つの部分で構成されます。 デコレーターは、次の Angular 固有の情報を指定します。@Component()@Component()
-
テンプレート内でコンポーネントがどのように使用されるかを定義するために使用される CSS セレクター。このセレクターに一致するテンプレート内の HTML 要素は、このコンポーネントのインスタンスになります。
-
Angular にこのコンポーネントのレンダリング方法を指示する HTML テンプレート
-
テンプレート内の HTML 要素の外観を定義する CSS スタイルのオプションのセット
以下は最小限の Angular コンポーネントです。
import { Component } from '@angular/core';
@Component({
selector: 'hello-world',
template: `
<h2>Hello World</h2>
<p>This is my first component!</p>
`
})
export class HelloWorldComponent {
// 组件相关属性、方法等。
}このコンポーネントを使用するには、テンプレートに次のように記述します。
<hello-world></hello-world>Angular がこのコンポーネントをレンダリングすると、結果の DOM は次のようになります。
<hello-world>
<h2>Hello World</h2>
<p>This is my first component!</p>
</hello-world>Angular のコンポーネント モデルは、強力なカプセル化機能と直感的なアプリケーション構造を提供します。また、コンポーネントを使用すると、アプリの単体テストが容易になり、コード全体の可読性が向上します。
3.2 テンプレート
各コンポーネントには、コンポーネントのレンダリング方法を宣言する HTML テンプレートがあります。このテンプレートをインライン化することも、ファイル パスを使用してこのテンプレートを定義することもできます。
Angular は HTML を拡張するいくつかの構文要素を追加し、コンポーネントから動的な値を挿入できるようにします。Angular は、コンポーネントの状態が変化すると、レンダリングされた DOM を自動的に更新します。この機能の応用例の 1 つは、以下の例に示すように、ダイナミック テキストを挿入することです。
<p>{
{ message }}</p>ここで、message の値はコンポーネント クラスから取得されます。
import { Component } from '@angular/core';
@Component ({
selector: 'hello-world-interpolation',
templateUrl: './hello-world-interpolation.component.html'
})
export class HelloWorldInterpolationComponent {
message = 'Hello, World!';
}アプリがコンポーネントとそのテンプレートをロードすると、ユーザーには次の内容が表示されます。
<p>Hello, World!</p>ここで使用されている二重中括弧に注意してください。これらは Angular にコンテンツを補間するよう指示します。
Angular は、HTML 要素のプロパティ値と属性値を設定し、これらの値をアプリケーションのプレゼンテーション ロジックに渡すのに役立つプロパティ バインディングもサポートしています。
<p
[id]="sayHelloId"
[style.color]="fontColor">
You can set my color in the component!
</p>ここで使用されている角括弧に注意してください。構文は、プロパティまたは属性をコンポーネント クラスの値にバインドしていることを示しています。
イベント リスナーは、キーの押下、マウスの動き、クリック、タッチなどのユーザー アクションをリッスンして応答するように宣言できます。イベント名を括弧内に指定することで、イベント リスナーを宣言できます。
<button
type="button"
[disabled]="canClick"
(click)="sayMessage()">
Trigger alert message
</button>前の例では、コンポーネント クラスで定義されたメソッドを呼び出します。
sayMessage() {
alert(this.message);
}以下は、Angular テンプレートでの補間とバインディングの例です。
import { Component } from '@angular/core';
@Component ({
selector: 'hello-world-bindings',
templateUrl: './hello-world-bindings.component.html'
})
export class HelloWorldBindingsComponent {
fontColor = 'blue';
sayHelloId = 1;
canClick = false;
message = 'Hello, World';
sayMessage() {
alert(this.message);
}
}<button
type="button"
[disabled]="canClick"
(click)="sayMessage()">
Trigger alert message
</button>
<p
[id]="sayHelloId"
[style.color]="fontColor">
You can set my color in the component!
</p>
<p>My color is {
{ fontColor }}</p>ディレクティブを使用して、テンプレートに機能を追加できます。Angular で最も一般的に使用されるディレクティブは、 *ngIf と です*ngFor。ディレクティブを使用すると、DOM 構造の動的変更など、さまざまなタスクを実行できます。カスタム ディレクティブを使用して優れたユーザー エクスペリエンスを作成することもできます。
次のコードは *ngIf ディレクティブの例です。
import { Component } from '@angular/core';
@Component({
selector: 'hello-world-ngif',
templateUrl: './hello-world-ngif.component.html'
})
export class HelloWorldNgIfComponent {
message = "I'm read only!";
canEdit = false;
onEditClick() {
this.canEdit = !this.canEdit;
if (this.canEdit) {
this.message = 'You can edit me!';
} else {
this.message = "I'm read only!";
}
}
}<h2>Hello World: ngIf!</h2>
<button type="button" (click)="onEditClick()">Make text editable!</button>
<div *ngIf="canEdit; else noEdit">
<p>You can edit the following paragraph.</p>
</div>
<ng-template #noEdit>
<p>The following paragraph is read only. Try clicking the button!</p>
</ng-template>
<p [contentEditable]="canEdit">{
{ message }}</p>Angular の宣言型テンプレートを使用すると、アプリケーションのロジックと外観を完全に分離できます。テンプレートは標準の HTML に基づいているため、構築、保守、更新が簡単です。
3.3 依存性の注入
依存関係の挿入を使用すると、インスタンスの作成方法を気にせずに TypeScript クラスへの依存関係を宣言できます。その面倒な作業は Angular が処理します。この設計パターンを使用すると、よりテストしやすく柔軟なコードを作成できます。依存性注入を理解することは、Angular を使い始めるのに必須ではありませんが、ベスト プラクティスとして強く推奨されており、Angular 自体のすべての側面で依存性注入をある程度利用しています。
依存関係注入がどのように機能するかを説明するために、次の例を考えてみましょう。logger.service.ts クラスは 最初のファイル で定義されますLogger 。これには、 writeCount コンソールに数値を記録する関数が含まれています。
import { Injectable } from '@angular/core';
@Injectable({providedIn: 'root'})
export class Logger {
writeCount(count: number) {
console.warn(count);
}
}次に、hello-world-di.component.ts Angular コンポーネントがファイル内で定義されます。writeCount このコンポーネントには、この Logger クラスの機能を使用するボタンが含まれています 。 この機能にアクセスするには、サービスを コンストラクターに追加して クラスにサービスprivate logger: Logger を挿入します 。LoggerHelloWorldDI
import { Component } from '@angular/core';
import { Logger } from '../logger.service';
@Component({
selector: 'hello-world-di',
templateUrl: './hello-world-di.component.html'
})
export class HelloWorldDependencyInjectionComponent {
count = 0;
constructor(private logger: Logger) { }
onLogMe() {
this.logger.writeCount(this.count);
this.count++;
}
}4. 他のフレームワークとの比較
上記の基本的な例を通して、現在 Angular と他の一般的なフレームワーク (Vue、React) とのいくつかの違いがわかります。もちろん、これらのフレームワークを比較するときは、人それぞれに異なる視点があり、それぞれ独自の好みがあります。実際のプロジェクト開発のプロセスでは、自分に合ったものを選択するのが最善です。以下は、これらのフレームワークを使用する際の私自身の感想の一部です。
まず最初に、Angular フレームワークについて話しましょう。Angular フレームワークは、Java 開発のフレームワークに少し似ています。たとえば、以前のエンタープライズ レベルの開発用の SSH フレームワークは、全体的に比較的成熟しており、パフォーマンス、安定性、およびパフォーマンスが優れています。セキュリティプロジェクトの一部の実装も、可能な限り既存の標準を参照して実装されています。プロジェクトの生態系とコミュニティは比較的大規模です。プロジェクトには一連のソリューションが含まれています。Angular フレームワークの背後には Google があります。あらゆる面での全体的なエクスペリエンスは依然として良好です。金融機関や銀行などのほとんどのフロントエンド欠点は、主に Angular フレームワークの一部の概念 (依存関係注入など) がバックエンドに由来するため、Vue や React と比較して始めるのが難しいことです。
次に、Vue フレームワークについて説明します。Vue はオープン ソース Model-View-View-Model (MVVM) フロントエンド JavaScript ライブラリです。これはプログレッシブ フレームワークと呼ばれます。Vue フレームワークを使い始める難易度は、これらのフレームワークの中で最も難しくありません。一般に、Vue フレームワークは小規模な企業や一部の小規模プロジェクトで好まれます。Vue フレームワークは、HTML でラップされた関連ロジック コードの実現に似ています。欠点は、モジュールに限定されており、柔軟性が十分ではないことです。利点は、高速で便利で、非常に高速に使用できることです。
最後に、React フレームワークについて話しましょう。React フレームワークは主に UI ライブラリです。対応するソリューションの完全なセットを提供する Angular とは異なり、より柔軟に使用できます。一緒に使用する対応するライブラリを選択できます。たとえば、 React+redux、MobX など Flux モードの状態管理ライブラリと併用すると、強力なソリューションになります React フレームワークは、HTML 関連のものを JavaScript でラップしたものに似ており、より柔軟に記述できます。カスタマイズすると便利です。