AngularJS ng-view と例: ビューの実装方法

最近では、誰もが「シングルページアプリケーション」について聞いたことがあるでしょう。Gmail などの有名な Web サイトの多くは、シングルページアプリケーション (SPA) の概念を採用しています。

SPA は、ユーザーが別のページをリクエストしたときに、アプリケーションがそのページに移動するのではなく、既存のページ自体内に新しいページのビューを表示するという概念です。

これにより、ユーザーは最初からページを離れなかったような印象を与えることができます。同じことは、ビューとルートを組み合わせて Angular で実現できます。

このチュートリアルでは、次のことを学びます。

ビューとは何ですか?
AngularJS の ng-view ディレクティブ
AngularJS で ng-view を実装する方法と例

ビューとは何ですか?

ビューはユーザーに表示されるコンテンツです。基本的に、ユーザーが見たいものに応じて、アプリケーションのそのビューがユーザーに表示されます。

ビューとルートの組み合わせは、アプリケーションを論理ビューに分割し、異なるビューをコントローラーにバインドするのに役立ちます。

アプリケーションをさまざまなビューに分割し、ルーティングを使用してアプリケーションのさまざまな部分をロードすると、アプリケーションを論理的に分割して管理しやすくなります。

顧客が注文を表示して新しい注文を行うことができる注文アプリケーションがあると仮定しましょう。

以下の図とその後の説明は、このアプリケーションを単一ページアプリケーションとして作成する方法を示しています。

これで、「注文の表示」と「新規注文」の XNUMX つの異なる Web ページが表示されます。 AngularJSの場合は、代わりに、同じページに「注文の表示」と「新規注文」という XNUMX つの異なるビューを作成します。

また、アプリケーションには #show と #new という 2 つの参照リンクがあります。

したがって、アプリケーションが MyApp/#show に移動すると、View Orders のビューが表示され、同時にページから離れることはありません。既存のページのセクションが「注文の表示」の情報で更新されるだけです。「新規注文」ビューについても同様です。

このようにして、アプリケーションをさまざまなビューに分割することが簡単になり、管理しやすくなり、必要なときにいつでも簡単に変更できるようになります。

そして、各ビューには、その機能のビジネスロジックを制御するための対応するコントローラーがあります。

AngularJS の ng-view ディレクティブ

「ngView」は、現在のルートのレンダリングされたテンプレートをメインレイアウト (index.html) ファイルに含めることによって $route サービスを補完するディレクティブです。

現在のルートが変更されるたびに、ページ自体を変更することなく、 $route サービスの構成に従ってそれに含まれるビューが変更されます。

私たちがカバーしますルート後の章で説明しますが、今のところは、アプリケーションに複数のビューを追加することに焦点を当てます。

以下は、プロセス全体がどのように機能するかを示すフローチャート全体です。以下に示す例では、すべてのプロセスを詳しく説明します。

AngularJS で ng-view を実装する方法

AngularJS で ng-view を実装する方法の例を見てみましょう。この例では、ユーザーに XNUMX つのオプションを提示します。

XNUMXつは「イベント」を表示する方法、もうXNUMXつは「イベント」を追加する方法です。
ユーザーが「イベントの追加」リンクをクリックすると、「イベントの追加」のビューが表示されます。「イベントの表示」も同様です。

この例を適切に配置するには、次の手順に従ってください。

ステップ1） angular-route ファイルをスクリプト参照として含めます。

このルートファイルは、複数のルートとビューを持つ機能を利用するために必要です。このファイルは、angularJS Web サイトからダウンロードできます。

ステップ2） hrefタグとdivタグを追加します。

このステップでは、

「新しいイベントの追加」および「イベントの表示」へのリンクを表す href タグを追加します。
また、ビューを表す ng-view ディレクティブを含む div タグを追加します。これにより、ユーザーが「新しいイベントの追加リンク」または「イベントの表示リンク」をクリックするたびに、対応するビューが挿入されるようになります。

ステップ3） Angular JS のスクリプトタグに次のコードを追加します。

ルーティングについては今は気にしないでください。これについては後の章で説明します。今はビューのコードだけを見てみましょう。

コードのこのセクションは、ユーザーが前に div タグで定義した href タグ「NewEvent」をクリックしたときを意味します。 Web ページ add_event.html に移動し、そこからコードを取得してビューに挿入します。次に、このビューのビジネスロジックを処理するために、「AddEventController」に移動します。
コードのこのセクションは、ユーザーが前に div タグで定義した href タグ「DisplayEvent」をクリックしたときを意味します。 Web ページ show_event.html に移動し、そこからコードを取得してビューに挿入します。次に、このビューのビジネスロジックを処理するために、「ShowDisplayController」に移動します。
コードのこのセクションは、ユーザーに表示されるデフォルトのビューが DisplayEvent ビューであることを意味します。

ステップ4） ビジネスロジックを処理するコントローラーを追加します。

次に、「DisplayEvent」機能と「新しいイベントの追加」機能の両方のビジネスロジックを処理するコントローラーを追加します。

各コントローラーの各スコープオブジェクトにメッセージ変数を追加するだけです。このメッセージは、適切なビューがユーザーに表示されるときに表示されます。

<!DOCTYPE html>
<html>
<head>
    <meta chrset="UTF 8">
    <title>Event Registration</title>
    <script src="https://code.angularjs.org/1.5.9/angular-route.js"></script>
    <script src="https://code.angularjs.org/1.5.9/angular.min.js"></script>
    <script src="lib/bootstrap.js"></script>

</head>
<body ng-app="sampleApp">

<h1> Guru99 Global Event</h1>

<div class="container">
    <ul><li><a href="#!NewEvent"> Add New Event</a></li>
        <li><a href="#!DisplayEvent"> Display Event</a></li>
    </ul>
    <div ng-view></div>
</div>

<script>
    var app = angular.module('sampleApp',["ngRoute"]);
    app.config(function($routeProvider){
        $routeProvider.
        when("/NewEvent",{
            templateUrl : "add_event.html",
            controller: "AddEventController"
        }).
        when("/DisplayEvent", {
            templateUrl: "show_event.html",
            controller: "ShowDisplayController"
        }).
        otherwise ({
            redirectTo: '/DisplayEvent'
        });
    });
    app.controller("AddEventController", function($scope) {

        $scope.message = "This is to Add a new Event";

    });
    app.controller("ShowDisplayController",function($scope){

        $scope.message = "This is display an Event";

    });
</script>
</body>
</html>

ステップ5） add_event.html および show_event.html というページを作成します。

次に、add_event.html と show_event.html というページを作成します。以下に示すように、ページはシンプルにしてください。

この例の場合、add_event.html ページには「新しいイベントの追加」というテキストとともにヘッダータグがあり、「新しいイベントを追加します」というメッセージを表示する式が含まれています。

同様に、show_event.html ページには、「Show Event」というテキストを保持するヘッダータグと、「これはイベントを表示します」というメッセージを表示するメッセージ式も含まれます。

メッセージ変数の値は、ビューにアタッチされているコントローラーに基づいて挿入されます。

ページごとに、それぞれのコントローラーから挿入されるメッセージ変数を追加します。

add_event.html

<h2>Add New Event</h2>

{{message}}

show_event.html

<h2>Show Event</h2>
	
{{message}}

コードが正常に実行された場合、ブラウザでコードを実行すると次の出力が表示されます。

出力：

出力から 2 つのことに気づくことができます

アドレスバーには、現在表示されているビューが反映されます。デフォルトのビューではイベントの表示画面が表示されるため、アドレスバーには「DisplayEvent」のアドレスが表示されます。
このセクションは、オンザフライで作成されるビューです。デフォルトのビューはイベントの表示ビューであるため、これがユーザーに表示されます。

表示されたページで「新しいイベントの追加」リンクをクリックします。以下の出力が表示されます。

出力：

アドレスバーには、現在のビューが「新しいイベントの追加」ビューになったことが反映されます。同じアプリケーションページが表示されたままであることに注意してください。新しい申し込みページには誘導されません。
このセクションはビューであり、次のビューに変更されます。 HTML 「新しいイベントを追加」機能用です。これで、このセクションでは、ヘッダータグ「新しいイベントを追加」とテキスト「これは新しいイベントを追加するためのものです」がユーザーに表示されます。

よろしければ：

ビューとは何ですか?

AngularJS の ng-view ディレクティブ

AngularJS で ng-view を実装する方法

関連記事