AngularJSを使用したSPA

このブログ投稿は、AngularJSを使用してSPAを構築するための簡単な紹介です。 SPAコンポーネントをアプリに組み込むために必要な情報を提供しようとします。

今日、AngularJSは、主に開発者がシングルページアプリケーション(SPA)を簡単に作成できるようにする機能により、最も人気のある開発フレームワークの1つになりました。従来のWebアプリケーションでは、クライアント(ブラウザー)はページを要求することによってサーバーとの通信チャネルを開始します。サーバーは、要求を処理し、ページのHTMLをクライアントに送り返すことで応答します。ユーザーが新しいページを要求すると、サーバーは別のHTMLページを送信します。クライアントが小さな変更、たとえば基本的な詳細を含むフォームを要求した場合でも、ページ全体をサーバーによって再度ロードして、クライアントに送り返す必要があります。

HTMLとAjaxのリクエスト

シングルページアプリケーションでは、ページ全体が1回のショットで読み込まれ、その後の通信はAjaxリクエストを使用してサーバーによって実行されます。ブラウザは変更されたページの一部のみを更新する必要があり、ユーザーが新しいリクエストを行うたびにページ全体をリロードする必要はありません。
SPAアプローチは、サーバーがユーザー要求に応答するのにかかる時間を短縮するため、Webアプリケーションの実行速度が速くなり、使用する計算能力が少なくなり、ユーザーインターフェイス(UI)開発者がより魅力的で機敏なWebページを作成できるようになります。





シェルページの作成

SPAの「単一ページ」とは、HTML、CSS、またはJavaScriptの形式でクエリに応答するシェルページを指します。シェルページはHTMLで非同期にレンダリングされるため、サーバーを行き来する必要がありません。シェルページには、AngularJS JavaScriptライブラリへの参照とng-viewディレクティブ(UI開発者がビューを切り替えることができる仮想コンテナー)のみが必要であり、シェルページでコンテンツページをレンダリングする必要がある場所をAngularJSに通知します。
同じ「単一の」ページ内で、AngularJSを使用すると、開発者は同じURLに含まれる複数のビューを提供できます。同じシェルページ内にさまざまなビューのセットが次々に表示される可能性があり、ユーザーがページをスクロールすると、各ビューが動的に読み込まれます。

SPA-using-AngularJS-multiple-views



組み込みのAngularJSディレクティブ(ng-app)を使用すると、開発者はアプリを初期化でき、サードパーティのディレクティブを追加することもできます。一方、ng-modelディレクティブを使用すると、データバインディング式をメモリに追加できます。ここを見てください:

Javaの文字列は不変です

世界的に、開発者はAngularJSを使用してSPAを採用しており、おそらくこの傾向はしばらく続くと予想されます。



質問がありますか?コメント欄にご記入ください。折り返しご連絡いたします。

関連記事: AngularJSで成功したWeb開発のキャリア