ホームページ >ウェブフロントエンド >jsチュートリアル >AngularJS を使用した大規模なシングルページ アプリケーション (SPA) の開発 - 技術翻訳
AngularJS を使用した大規模なシングルページ アプリケーション (SPA) の開発 - 技術翻訳
- PHP中文网オリジナル
- 2016-12-05 13:44:121022ブラウズ
はじめに
(SPA) このような名前には何があるのでしょうか? あなたが古典的なテレビ番組「サインフェルド」のファンなら、ドナ・チャンという名前を知っているはずです。ジェリーがドナに会ったとき、ドナは実際には中国人ではなかったが、鍼治療への興味など、もともと中国に抱いていた印象を話していたため、誤って中国語なまりの言葉を発音してしまい、名前の末尾をチャン・ドナと縮めた。ジョージの母親と電話で話し、（孔子の言葉を引用して）アドバイスを与えました。ジョージがドナを両親に紹介したとき、ジョージの母親はドナが中国人ではないことに気づき、ドナの提案を受け入れませんでした。
シングル ページ リファレンス (SPA) は、デスクトップのようなスムーズなアプリケーションを提供することを目的としたアプリケーションとして定義されます。 SPA では、単一の Web ページ アプリケーションまたは Web サイトのユーザー エクスペリエンスを実現するために、必要なすべてのコード (HTML、JavaScript、CSS) が単一のページの読み込み時に取得されるか、関連リソースが動的に読み込まれ、オンデマンドでページに追加されます。最新の Web テクノロジー (HTML5 で導入されたものなど) は、アプリケーション内の独立した論理ページが相互に認識して移動する機能を提供しますが、ページはプロセス内のエンドポイントをリロードしたり、別のエンドポイントに制御を移したりすることはありません。シングルページ アプリケーションとの対話は、多くの場合、バックグラウンドにある Web サーバーと動的に対話するように設計されています
AngularJS - 概要
AngularJSをベースに開発します。 AngularJS は、Google と AngularJS コミュニティの開発者によって維持されているオープン ソースの Web アプリケーション フレームワークです。
AngularJS は、HTML、CSS、JavaScript だけを使用して、クライアント側で単一ページのアプリケーションを作成できます。その目標は、開発とテストを容易にし、MVC Web アプリケーションのパフォーマンスを向上させることです。
Nuget パッケージ管理コンソール
の AngularJS バージョン 1.2.21
をシンプルかつ柔軟に保つために、空の Visual Studio Web アプリケーション プロジェクトを作成し、このアプリケーションのコア参照に Microsoft Web API 2 ライブラリを選択しました。 Web API 2 ライブラリを使用して、RESTful API のサーバー側リクエストを実装します。
ここで、AngularJS を使用して SPA アプリケーションを作成する場合、最初に行う必要があるのは、シェル ページとコンテンツ ページを取得するためのルーティング テーブルをセットアップすることです。最初は、シェル ページに必要なのはチーム AngularJS のみです。 JavaScript ライブラリのリファレンスと ng-view で、コンテンツ ページをシェル ページのどこにレンダリングする必要があるかを AngularJS に指示します。
<!DOCTYPE html> <html lang="en"> <head> <title>AngularJS Shell Page example</title> </head> <body> <p> <ul> <li><a href="#Customers/AddNewCustomer">Add New Customer</a></li> <li><a href="#Customers/CustomerInquiry">Show Customers</a></li> </ul> </p> <!-- ng-view directive to tell AngularJS where to inject content pages --> <p ng-view></p> <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script> <script src="app.js"></script> </body> </html>
上記のシェル ページの例では、いくつかのリンクが AngularJS ルートにマップされています。 p タグの ng-view ディレクティブは、選択したルートのレンダリングされたコンテンツ ページをシェル ページに含めて、AngularJS の $route サービスを補うことができるディレクティブです。現在のルートが変更されるたびに、含まれるビューも $ に基づきます。これに応じて、ルート サービスの構成が変更されます。たとえば、ユーザーが [新しい顧客の追加] リンクを選択すると、AngularJS は ng-view が配置されている場所に新しい顧客を追加するためのコンテンツをレンダリングします。 HTML フラグメント .
次の app.js ファイルもシェル ページによって参照されます。このファイル内の JavaScript は、アプリケーションの AngularJS モジュールを作成します。さらに、アプリケーションのすべてのルーティング構成がこのファイルで定義されます。 AngularJS モジュールは、アプリケーションのさまざまな部分をカプセル化するコンテナーと考えることができます。ほとんどのアプリケーションには、アプリケーションのさまざまな部分を初期化して接続する main メソッドがあります。一方、AngularJS アプリケーションには main メソッドがありません。代わりに、アプリケーションの起動方法と構成方法をモジュールで宣言的に指定できます。ただし、この記事のサンプル アプリケーションには AngularJS モジュールが 1 つだけありますが、アプリケーションにはいくつかの異なる部分があります。 (顧客、製品、注文、およびユーザー)。
さて、app.js の主な目的は、以下に示すように AngularJS ルーティングを設定することです。 AngularJS の $routeProvider サービスは、 when() メソッドを受け入れます。このメソッドは、Uri のパターン と一致します。一致が見つかると、独立したページの HTML コンテンツがコントローラー ファイルとともにシェル ページにロードされます。コントローラー ファイルは、特定のルート リクエストのコンテンツを含む参照を取得する単純な JavaScript ファイルです。
AngularJS コントローラーはネイティブにすぎません。 JavaScript 関数は特定のスコープにバインドされているだけです。コントローラーは、ビューにロジックを追加するために使用されます。ビューは HTML ページです。これらのページは単純なデータ表示のみを目的としています。これらの HTML ページにデータをバインドするには、基本的にコントローラーの責任です。
//Define an angular module for our app
var sampleApp = angular.module('sampleApp', []);
//Define Routing for the application
sampleApp.config(['$routeProvider',
function($routeProvider) {
$routeProvider.
when('/Customers/AddNewCustomer', {
templateUrl: 'Customers/AddNewCustomer.html',
controller: 'AddNewCustomerController'
}).
when('/Customers/CustomerInquiry', {
templateUrl: 'Customers/CustomerInquiry.html',
controller: 'CustomerInquiryController'
}).
otherwise({
redirectTo: '/Customers/AddNewCustomer'
});
}]);
上記の AddCustomer テンプレートの場合、ng-controller ディレクティブは JavaScript 関数 customerController を参照し、ビューのすべてのデータ バインディングと JavaScript 関数を実行します。
<p ng-controller="customerController"> <input ng-model="FirstName" type="text" style="width: 300px" /> <input ng-model="LastName" type="text" style="width: 300px" /> <p> <button class="btn btn-primary btn-large" ng-click="createCustomer()"/>Create</button>