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

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

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

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

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

ビューとは何ですか?

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

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

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

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

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

ビューとは

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

AngularJS で ng-view を実装する

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

このステップでは、

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

AngularJS で ng-view を実装する

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

ルーティングについては心配しないでください。今のところ、これを次の図で見ていきます。 later 章。とりあえずビューのコードを見てみましょう。

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

    AngularJS で ng-view を実装する

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

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

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

AngularJS で ng-view を実装する

<!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

AngularJS で ng-view を実装する

<h2>Add New Event</h2>

{{message}}
  • show_event.html

AngularJS で ng-view を実装する

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

コードが正常に実行されると、次のようになります。wing ブラウザでコードを実行すると、出力が表示されます。

出力:

AngularJS で ng-view を実装する

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

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

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

AngularJS で ng-view を実装する

出力:

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