ダイナミックJavaScriptアプリケーション用の主要なフレームワークであるSqueeze Angular、それだけです。 Adam Freemanは、MVCとその利点の説明から始めて、Angularを効果的に使用する方法を示し、基本からこのフレームワークの奥深くにある最も高度な機能まで、すべての段階をカバーします。
各トピックは明確かつ簡潔に述べられており、真に効果的になるための多くの詳細が装備されています。 最も重要な機能は不必要な詳細なしで提供されますが、すべての落とし穴を回避できるように必要な情報がすべて含まれています。
著者について
Adam Freemanは経験豊富なITプロフェッショナルであり、多くの企業で上級職を歴任しています。 最近まで、彼は大手銀行の1つでテクニカルディレクターおよびチーフエンジニアを務めていました。 現在、アダムは主に本の執筆と長距離ランニングに時間を費やしています。
Science Editorについて
Fabio Claudio Ferracchiatiは、マイクロソフトテクノロジを使用した経験を持つシニアコンサルタントおよびリードアナリスト/開発者です。 彼はBluArancio（www.bluarancio.com）で働いています。 Fabioは、認定された.NETソフトウェア開発者、認定された.NETアプリケーション開発者、Microsoft Certified Professional、多作な作家、科学編集者です。 過去10年にわたり、彼はイタリアおよび国際的な雑誌に多数の記事を執筆し、コンピュータートピックのさまざまな分野で10冊以上の本を執筆しています。
Angularプロジェクトの準備
ルートコンポーネントの更新
HTMLコンポーネントのアプリ要素を制御する、Angular構築ブロックであるルートコンポーネントから始めましょう。 アプリケーションにはいくつかのコンポーネントが含まれる場合がありますが、その中には常にトップレベルのコンテンツを表示するルートコンポーネントがあります。 SportsStore / src / appフォルダーのapp.component.tsファイルを編集し、リスト7.5のコードを含めます。
リスト7.5。 SportsStore / src / appフォルダー内のapp.component.tsファイルの内容
import { Component } from "@angular/core"; @Component({ selector: "app", template: `<div class="bg-success pa-1 text-xs-center"> This is SportsStore </div>` }) export class AppComponent { }
コンポーネントデコレータは、AngularにAppComponentクラスがコンポーネントであることを伝え、そのプロパティはこのコンポーネントのアプリケーションを記述します。 コンポーネントプロパティの完全なセットは第17章に記載されていますが、リストに示されている3つのプロパティは基本的なものであり、実際によく使用されます。 selectorプロパティは、AngularにHTMLドキュメントでコンポーネントを使用する方法を指示し、templateプロパティはコンポーネントが表示するコンテンツを決定します。 コンポーネントは、この場合のようにインラインテンプレートを定義するか、複雑なコンテンツの管理を簡素化する外部HTMLファイルを使用できます。
Angularプロジェクトのルートコンポーネントは、ユーザーに表示されるコンテンツを制御するためだけに存在するため、AppComponentクラスにはコードが含まれていません。 初期段階では、ルートコンポーネントによって表示されるコンテンツを手動で管理しますが、第8章では、ユーザーのアクションに応じてコンテンツを自動的に調整するURLルーティングメカニズムを紹介します。
ルートモジュールの更新
角度モジュールは、機能モジュールとルートモジュールの2つのカテゴリに分類されます。 汎用モジュールは、アプリケーションの相互接続機能をグループ化して、アプリケーション管理を簡素化するために使用されます。 データモデル、ストアユーザーインターフェイス、管理インターフェイスなど、アプリケーションのすべての主要な機能領域の機能モジュールを作成します。
ルートモジュールは、Angularのアプリケーション記述を渡します。 説明には、アプリケーションの実行に必要な機能モジュール、ダウンロードする非標準機能、およびルートコンポーネントの名前が示されています。 従来、ルートコンポーネントファイルの名前はapp.module.tsです。 SportsStore / src / appフォルダーにその名前のファイルを作成し、リスト7.6のコードを含めます。
リスト7.6。 SportsStore / src / appフォルダー内のapp.module.tsファイルの内容
import { NgModule } from "@angular/core"; import { BrowserModule } from "@angular/platform-browser"; import { AppComponent } from "./app.component"; @NgModule({ imports: [BrowserModule], declarations: [AppComponent], bootstrap: [AppComponent] }) export class AppModule { }
ルートコンポーネントとの類推により、ルートモジュールクラスにはコードが含まれていません。 実際には、ルートモジュールは@NgModuleデコレータを介して情報を送信するためだけに存在します。 importsプロパティは、Webアプリケーションに必要なすべての基本的なAngular機能を備えたBrowserModule関数モジュールをロードするように、Angularに指示します。
宣言プロパティはAngularにルートコンポーネントをロードするよう指示し、ブートストラッププロパティはルートコンポーネントがAppModuleクラスであることを報告します。 機能がSportsStoreアプリケーションに含まれている場合、このデコレータのプロパティに情報が追加されますが、アプリケーションを起動するには基本的な構成で十分です。
ブートストラップファイル分析
ユーティリティコードの次のブロックは、アプリケーションを起動するブートストラップファイルです。 この本はブラウザで実行するアプリケーションを作成するためにAngularの使用に焦点を当てていますが、Angularプラットフォームは異なる環境に移植できます。 ブートストラップファイルは、Angularブラウザプラットフォームを使用してルートモジュールをロードし、アプリケーションを起動します。 伝統的にブートストラップファイルに割り当てられているmain.tsというファイルをSportsStore / src / appフォルダーに作成し、リスト7.7のコードをそれに追加します。
リスト7.7 SportsStore / srcフォルダーのmain.tsファイルの内容
import { enableProdMode } from '@angular/core'; import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; import { AppModule } from './app/app.module'; import { environment } from './environments/environment'; if (environment.production) { enableProdMode(); } platformBrowserDynamic().bootstrapModule(AppModule);
開発ツールは、プロジェクトファイルの変更を検出し、コードでファイルをコンパイルし、図に示すコンテンツの出力でブラウザーを自動的に再起動します。 7.2。
ブラウザでDOMモデルを見ると、ルート要素テンプレートからの一時的なコンテンツがapp要素の開始タグと終了タグの間に挿入されていることがわかります。
<body class="ma-1"> <app> <div class="bg-success pa-1 text-xs-center"> This is SportsStore </div> </app> </body>
データモデルの使用を開始する
データモデルを使用して新しいプロジェクトで作業を開始することをお勧めします。 動作中のAngularの機能のいくつかをすばやくデモンストレーションしたいので、最初から最後までデータモデルを定義する代わりに、ダミーデータに基本的な機能を実装することから始めます。 次に、このデータを使用してフロントエンドを作成します。第8章では、データモデルに戻り、REST互換のWebサービスに関連付けます。
モデルクラスの作成
各データモデルには、データモデルに含まれるデータのタイプを記述するクラスが必要です。 SportsStoreアプリケーションでは、これらはオンラインストアで販売された商品とユーザーから受け取った注文を記述するクラスです。 SportsStoreアプリケーションを開始するには、製品を説明する能力で十分です。 モデルのその他のクラスは、実装時に拡張機能をサポートするために作成されます。 SportsStore / src / app / modelフォルダーにproduct.model.tsというファイルを作成し、リスト7.8のコードを含めます。
リスト7.8。 SportsStore / src / app / modelフォルダーのproduct.model.tsファイルの内容
export class Product { constructor( public id?: number, public name?: string, public category?: string, public description?: string, public price?: number) { } }
Productクラスは、プロパティID、名前、カテゴリ、説明、価格を受け取るコンストラクターを定義します。 これらのプロパティは、リスト7.2のREST準拠のWebサービスを作成するために使用されるデータ構造に対応しています。 パラメータ名の後ろの疑問符（？）は、これらがProductクラスを使用して新しいオブジェクトを作成するときに省略できるオプションのパラメータであることを示しています。 これは、HTMLオブジェクトを使用してモデルオブジェクトのプロパティが設定されるアプリケーションを開発するときに便利です。
ダミーデータソースの作成
架空のデータから実際のデータへの移行を準備するために、データソースからアプリケーションにデータを転送します。 アプリケーションコードの残りの部分は、データがどこから来たのかを知らず、HTTP要求からデータを受信するための移行は透過的になります。
SportsStore / src / app / modelフォルダーにstatic.datasource.tsファイルを作成し、リスト7.9のクラス定義を含めます。
リスト7.9。 SportsStore / src / app / modelフォルダーのstatic.datasource.tsファイルの内容
import { Injectable } from "@angular/core"; import { Product } from "./product.model"; import { Observable } from "rxjs/Observable"; import "rxjs/add/observable/from"; @Injectable() export class StaticDataSource { private products: Product[] = [ new Product(1, "Product 1", "Category 1", "Product 1 (Category 1)", 100), new Product(2, "Product 2", "Category 1", "Product 2 (Category 1)", 100), new Product(3, "Product 3", "Category 1", "Product 3 (Category 1)", 100), new Product(4, "Product 4", "Category 1", "Product 4 (Category 1)", 100), new Product(5, "Product 5", "Category 1", "Product 5 (Category 1)", 100), new Product(6, "Product 6", "Category 2", "Product 6 (Category 2)", 100), new Product(7, "Product 7", "Category 2", "Product 7 (Category 2)", 100), new Product(8, "Product 8", "Category 2", "Product 8 (Category 2)", 100), new Product(9, "Product 9", "Category 2", "Product 9 (Category 2)", 100), new Product(10, "Product 10", "Category 2", "Product 10 (Category 2)", 100), new Product(11, "Product 11", "Category 3", "Product 11 (Category 3)", 100), new Product(12, "Product 12", "Category 3", "Product 12 (Category 3)", 100), new Product(13, "Product 13", "Category 3", "Product 13 (Category 3)", 100), new Product(14, "Product 14", "Category 3", "Product 14 (Category 3)", 100), new Product(15, "Product 15", "Category 3", "Product 15 (Category 3)", 100), ]; getProducts(): Observable<Product[]> { return Observable.from([this.products]); } }
StaticDataSourceクラスは、ダミーデータを返すgetProductsというメソッドを定義します。 getProductsメソッドを呼び出すと、結果が返されますObservable <Product []>-Productオブジェクトの配列を取得するためのObservableの実装。
ObservableクラスはReactive Extensionsパッケージによって提供され、Angularはこれを使用してアプリケーションの状態変更を処理します。 Observableクラスについては、第23章で説明しますが、この章では、ObservableオブジェクトがJavaScript Promiseオブジェクトに似ていることを知るだけで十分です。これは、将来結果を返す非同期タスクを表します。 Angularは、HTTPリクエストの処理を含む、その機能の一部でのObservableオブジェクトの使用を明らかにしています。 そのため、getProductsメソッドは、データを返す代わりにObservable <Product []>を返します-単純な同期またはPromiseを使用します。
@InjectableデコレータはStaticDataSourceクラスに適用されます。 このデコレータは、このクラスがサービスとして使用されることをAngularに伝えます。これにより、他のクラスは、第19章および第20章で説明されている依存性注入メカニズムを通じてその機能にアクセスできます。
モデルリポジトリの作成
データソースは要求されたデータをアプリケーションに提供する必要がありますが、通常、データは中間（リポジトリ）を介してアクセスされ、データの受信の詳細が隠されたままになるように、アプリケーションの個々の構造ブロックにこのデータを送信します。 SportsStore / src / app / modelフォルダーにproduct.repository.tsファイルを作成し、リスト7.10のクラスを定義します。
リスト7.10 SportsStore / app / modelフォルダーのproduct.repository.tsファイルの内容
import { Injectable } from "@angular/core"; import { Product } from "./product.model"; import { StaticDataSource } from "./static.datasource"; @Injectable() export class ProductRepository { private products: Product[] = []; private categories: string[] = []; constructor(private dataSource: StaticDataSource) { dataSource.getProducts().subscribe(data => { this.products = data; this.categories = data.map(p => p.category) .filter((c, index, array) => array.indexOf(c) == index).sort(); }); } getProducts(category: string = null): Product[] { return this.products .filter(p => category == null || category == p.category); } getProduct(id: number): Product { return this.products.find(p => p.id == id); } getCategories(): string[] { return this.categories; } }
Angularがリポジトリの新しいインスタンスを作成する必要がある場合、Angularはクラスを分析し、ProductRepositoryコンストラクターを呼び出して新しいオブジェクトを作成するためにStaticDataSourceオブジェクトが必要であることを確認します。 リポジトリコンストラクターは、データソースのgetProductsメソッドを呼び出し、返されたObservableオブジェクトのsubscribeメソッドを使用して、商品データを受け取ります。 Observableオブジェクトの機能の詳細については、第23章を参照してください。
»本の詳細については、出版社のウェブサイトをご覧ください
» コンテンツ
» 抜粋
ホーカーのクーポンが20％オフ- 角度