パラメータを使用した AngularJS ルーティングの例

Angular でルーティングがどのように機能するかを学ぶ前に、シングルページ アプリケーションについて簡単に概要を説明しましょう。

シングルページアプリケーションとは何ですか?

シングル ページ アプリケーション (SPA) は、単一の HTML ページを読み込み、Web アプリケーションとのユーザーの対話に基づいてページを動的に更新する Web アプリケーションです。

AngularJS のルーティングとは何ですか?

AngularJS でのルーティング シングルページアプリケーションを作成できるメソッドです。 これにより、Web アプリケーション内のさまざまなコンテンツに対してさまざまな URL を作成できます。 AngularJS ルーティングは、選択されたルートに応じて複数のコンテンツを表示するのにも役立ちます。 これは、URL の # 記号の後に指定されます。

URL 経由でホストされているサイトの例を見てみましょう。 http://example.com/index.html.

このページでは、アプリケーションのメイン ページをホストします。アプリケーションがイベントを組織していて、表示されているさまざまなイベントが何であるかを確認したい場合、またはそのイベントを確認したい場合を考えてみましょう。tails 特定のイベントを削除するか、イベントを削除します。シングル ページ アプリケーションでは、ルーティングが有効になっている場合、この機能はすべて次の方法で利用できます。wing リンク

http://example.com/index.html#ShowEvent

http://example.com/index.html#DisplayEvent

http://example.com/index.html#DeleteEvent

# 記号は、さまざまなルート (ShowEvent、DisplayEvent、および DeleteEvent) とともに使用されます。

  • したがって、ユーザーがすべてのイベントを見たい場合は、リンク (http://example.com/index.html#ShowEvent)、 それ以外
  • 特定のイベントだけを見たい場合は、リンク ( http://example.com/index.html#DisplayEvent)または
  • イベントを削除したい場合は、リンクにリダイレクトされます。 http://example.com/index.html#DeleteEvent.

メイン URL は同じままであることに注意してください。

$routeProvider を使用した AngularJS ルートの追加

したがって、前に説明したように、ルートイン AngularJS ユーザーをアプリケーションの別のビューにルーティングするために使用されます。 また、このルーティングは同じ HTML ページ上で実行されるため、ユーザーはページから離れていないことを実感できます。

ルーティングを実装するには次のようにしますwing 主要なステップは、特定の順序でアプリケーションに実装する必要があります。

  1. angular-route.js への参照。 これは JavaScriptを Google によって開発された、ルーティングのすべての機能を備えたファイルです。 ルーティングに必要なすべてのメイン モジュールを参照できるように、これをアプリケーションに配置する必要があります。
  2. 次の重要なステップは、アプリケーション内から ngRoute モジュールに依存関係を追加することです。 この依存関係は、アプリケーション内でルーティング機能を使用できるようにするために必要です。 この依存関係が追加されていない場合、angular.JS アプリケーション内でルーティングを使用できません。

以下は、このステートメントの一般的な構文です。 これは、ngRoute キーワードを含むモジュールの通常の宣言です。

var module = angular.module("sampleApp", ['ngRoute']);
  1. 次のステップは、$routeProvider を構成することです。 これは、アプリケーションでさまざまなルートを提供するために必要です。以下は、このステートメントの一般的な構文であり、一目瞭然です。 これは、関連するパスが選択されたときに、そのルートを使用して指定されたビューをユーザーに表示することを示しているだけです。
when(path, route)
  1. HTML ページ内からルートへのリンク。 HTML ページに、アプリケーションで使用可能なさまざまなルートへの参照リンクを追加します。
<a href="#/route1">Route 1</a><br/>
  1. 最後に、 ng-view ディレクティブ、通常は div タグ内にあります。 これは、関連するルートが選択されたときにビューのコンテンツを挿入するために使用されます。

AngularJS ルーティングの例

次に、上記の手順を使用したルーティングの例を見てみましょう。

パラメーターを使用した AngularJS ルーティングの例では、

ユーザーに 2 つのリンクを提示します。

  • XNUMX つは、トピックを表示することです。 角度JS もちろん、もう XNUMX つは Node.js コース。
  • ユーザーがいずれかのリンクをクリックすると、そのコースのトピックが表示されます。

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

AngularJS ルーティング

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

ステップ2) 「Angular JS トピック」および「Node JS トピック」へのリンクを表す href タグを追加します。

AngularJS ルーティング

ステップ3) ビューを表す ng-view ディレクティブを含む div タグを追加します。

これにより、ユーザーが「Angular JS トピック」または「Node JS トピック」をクリックするたびに、対応するビューが挿入されるようになります。

AngularJS ルーティング

ステップ4) AngularJS のスクリプト タグに、「ngRoute module」と「$routeProvider」サービスを追加します。

AngularJS ルーティング

コードの説明:

  1. 最初のステップは、「ngRoute モジュール」を確実に含めることです。 これを設定すると、Angular はアプリケーション内のルーティングを自動的に処理します。 Google によって開発された ngRoute モジュールには、ルーティングを可能にするすべての機能が備わっています。 このモジュールを追加すると、アプリケーションはすべてのルーティング コマンドを自動的に理解できるようになります。
  2. $routeprovider は、呼び出されるルートをバックグラウンドでリッスンするために Angular が使用するサービスです。 したがって、ユーザーがリンクをクリックすると、AngularJS のルートプロバイダーがこれを検出し、どのルートを取るかを決定します。
  3. Angular リンクのルートを XNUMX つ作成する – このブロックは、Angular リンクがクリックされたときに、ファイル Angular.html を挿入し、コントローラー 'AngularController' を使用してビジネス ロジックを処理することを意味します。
  4. ノード リンクのルートを XNUMX つ作成する – このブロックは、ノード リンクがクリックされたときにファイル Node.html を挿入し、コントローラー 'NodeController' を使用してビジネス ロジックを処理することを意味します。

ステップ5) 次に、AngularController と NodeController の両方のビジネス ロジックを処理するコントローラーを追加します。

各コントローラーでは、各コースのトピック名と説明を保存するためのキーと値のペアの配列を作成しています。 配列変数「tutorial」が各コントローラーのスコープ オブジェクトに追加されます。

AngularJS ルーティング

<!DOCTYPE html>
<html>
<head>
    <meta chrset="UTF 8">
</head>
<body ng-app="sampleApp">
<title>Event Registration</title>
<script src="https://code.angularjs.org/1.6.9/angular-route.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.min.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.js"></script>

<h1> Guru99 Global Event</h1>

<div class="container">
    <ul>
        <li><a href="#Angular">Angular JS Topics</a></li>
        <li><a href="#Node.html">Node JS Topics</a></li>
    </ul>
    <div ng-view></div>
</div>

<script>
    var sampleApp = angular.module('sampleApp',['ngRoute']);
    sampleApp.config(['$routeProvider',

        function($routeProvider){
        $routeProvider.
        when('/Angular',{
            templateUrl : '/Angular.html',
            controller: 'AngularController'
        }).
        when("/Node", {
            templateUrl: '/Node.html',
            controller: 'NodeController'
        });
    }]);
    sampleApp.controller('AngularController',function($scope) {

        $scope.tutorial = [
            {Name:"Controllers",Description :"Controllers in action"},
            {Name:"Models",Description :"Models and binding data"},
            {Name:"Directives",Description :"Flexibility of Directives"}
        ]
    });

    sampleApp.controller('NodeController',function($scope){

        $scope.tutorial = [
            {Name:"Promises",Description :"Power of Promises"},
            {Name:"Event",Description :"Event of Node.js"},
            {Name:"Modules",Description :"Modules in Node.js"}
            ]
    });

</script>
</body>
</html>

ステップ6) Angular.html および Node.html というページを作成します。 ページごとに以下の手順を実行します。

これらの手順により、配列のすべてのキーと値のペアが各ページに表示されるようになります。

  1. ng-repeat ディレクティブを使用して、チュートリアル変数で定義された各キーと値のペアを調べます。
  2. 各キーと値のペアの名前と説明を表示します。
  • Angular.html

AngularJS ルーティング

<h2>Anguler</h2>
<ul ng-repeat="ptutor in tutorial">
    <li>Course : {{ptutor.Name}} - {{ptutor.Description}}</li>
</ul>
  • ノード.html

AngularJS ルーティング

<h2>Node</h2>
<ul ng-repeat="ptutor in tutorial">
    <li>Course : {{ptutor.Name}} - {{ptutor.Description}}</li>
</ul>

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

出力:

AngularJS ルーティング

「AngularJS トピック」リンクをクリックすると、以下の出力が表示されます。

AngularJS ルーティング

出力は次のことを明確に示しています。

  • 「Angular JS Topics」リンクをクリックすると、コード内で宣言したrouteProviderによって、Angular.htmlコードを挿入する必要があるかどうかが決定されます。
  • このコードは、ng-view ディレクティブを含む「div」タグに挿入されます。 また、コース説明のコンテンツは、AngularController で定義されたスコープ オブジェクトの一部である「チュートリアル変数」から取得されます。
  • をクリックすると、 Node.js トピックの場合も同じ結果が発生し、Node.js トピックのビューがマニフェスト化されます。
  • また、ページ URL は同じままであり、変更されるのは # タグの後のルートだけであることに注意してください。 これがシングルページアプリケーションの概念です。 URL の #hash タグは、ルート (この場合、上の画像に示すように「Angular」) とメイン HTML ページ (Sample.html) を区切るセパレータです。

AngularJS ルーティング

AngularJS でのデフォルト ルートの作成

AngularJS のルーティングでは、デフォルト ルートを持つ機能も提供されます。 これは、既存のルートに一致するものがない場合に選択されるルートです。

デフォルトルートは以下を追加することで作成されます。wing $routeProvider サービスを定義するときの条件。

以下の構文は、既存のルートのいずれかが一致しない場合に別のページにリダイレクトすることを単に意味します。

otherwise ({
    redirectTo: 'page'
});

上記と同じ例を使用して、デフォルト ルートを $routeProvider サービスに追加してみましょう。

AngularJS でのデフォルト ルートの作成

function($routeProvider){
$routeProvider.

when('/Angular',{
templateUrl : 'Angular.html',
controller: 'AngularController'
}).

when("/Node", {
templateUrl: 'Node.html',
controller: 'NodeController'
}).
otherwise({
    redirectTo:'/Angular'
});
}]);

コードの説明:

  1. ここでは上記と同じコードを使用していますが、唯一の違いは、他のコードを使用していることです。wise ステートメントと「redirectTo」オプションを使用して、ルートが指定されていない場合にどのビューをロードするかを指定します。この例では、「/Angular」ビューを表示したいと考えています。

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

出力:

AngularJS でのデフォルト ルートの作成

出力から、

  • 表示されているデフォルトのビューが angular JS ビューであることがはっきりとわかります。
  • これは、ページが読み込まれるときに「その他」に移動するためです。wise' $routeProvider 関数のオプションを使用して、'/Angular' ビューを読み込みます。

AngularJS ルートからパラメーターにアクセスする方法

Angular は、ルーティング中にパラメーターを提供する機能も提供します。 パラメータは URL のルートの末尾に追加されます。たとえば、次のようになります。 http://guru99/index.html#/Angular/1。 この Angular ルーティングの例では、

  1. 、http://guru99/index.html メインアプリケーションのURLです
  2. # 記号は、メイン アプリケーション URL とルートの間の区切り文字です。
  3. Angular が私たちのルートです
  4. 最後に「1」はルートに追加されるパラメータです

URL 内でのパラメーターの構文を以下に示します。

HTMLページ番号/ルート/パラメータ

ここで、パラメータが URL のルートの後に渡されていることがわかります。

したがって、上記の Angular JS トピックの AngularJS ルートの例では、以下に示すようにパラメーターを渡すことができます。

サンプル.html#/Angular/1

サンプル.html#/Angular/2

サンプル.html#/Angular/3

ここで、1、2、および 3 のパラメータは実際にトピック ID を表すことができます。

パラメーターを使用して Angular ルートを実装する方法を詳しく見てみましょう。

ステップ 1) 以下を追加しますwing あなたのビューへのコード

  1. Angular JS コースのすべてのトピックをユーザーに表示するテーブルを追加します。
  2. sho のテーブル行を追加wing トピック「コントローラー」。 この行の href タグを「Angular/1」に変更します。これは、ユーザーがこのトピックをクリックすると、パラメーター 1 がルートとともに URL に渡されることを意味します。
  3. sho のテーブル行を追加wing トピック「モデル」。 この行の href タグを「Angular/2」に変更します。これは、ユーザーがこのトピックをクリックすると、パラメータ 2 がルートとともに URL に渡されることを意味します。
  4. sho のテーブル行を追加wing トピック「指令」。 この行の href タグを「Angular/3」に変更します。これは、ユーザーがこのトピックをクリックすると、パラメーター 3 がルートとともに URL に渡されることを意味します。

AngularJS ルートからパラメータにアクセスする

ステップ 2) Routeprovider サービス関数にトピック ID を追加します。
Routeprovider サービス関数に the:topicId を追加して、ルートの後に URL で渡されるパラメーターを変数 topicId に割り当てる必要があることを示します。

AngularJS ルートからパラメータにアクセスする

ステップ 3) 必要なコードをコントローラーに追加します

  1. コントローラー関数を定義するときは、必ず最初に「$routeParams」をパラメーターとして追加してください。 このパラメータは、URL で渡されるすべてのルート パラメータにアクセスできます。
  2. 「routeParams」パラメータには、topicId オブジェクトへの参照があり、ルート パラメータとして渡されます。 ここでは、「$routeParams.topicId」変数を変数「$scope.tutotialid」としてスコープ オブジェクトにアタッチしています。 これは、tutorialid 変数を介してビューで参照できるようにするために行われます。

AngularJS ルートからパラメータにアクセスする

<!DOCTYPE html>
<html>
<head>

    <meta chrset="UTF 8">
    <title>Event Registration</title>
</head>
<body ng-app="sampleApp">

<script src="https://code.angularjs.org/1.6.9/angular-route.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.min.js"></script>
<script src="lib/bootstrap.js"></script>
<script src="lib/bootstrap.css"></script>

<h1> Guru99 Global Event</h1>
<table class="table table-striped">
    <thead>
    <tr> <th>#</th><th>Angular JS topic</th><th>Description</th><th></th> </tr> </thead>
    <tbody>
    <tr>
        <td>l</td><td>l</td><td>Controllers</td>
        <td><a href="#Angular/l">Topic details</a></td>
    </tr>
    <tr>
        <td>2</td><td>2</td><td>Models</td>
        <td><a href="#Angular/2">Topic details</a></td>
    </tr>
    <tr>
        <td>3</td><td>3</td><td>Directives</td>
        <td><a href="#Angular/3">Topic details</a></td>
    </tr>
    </tbody>
</table>

<script>
    var sampleApp = angular.module('sampleApp',['ngRoute']);

    sampleApp.config(
        function($routeProvider){
            $routeProvider.
            when('/Angular/:topicId',{
                templateUrl : 'Angular.html',
                controller: 'AngularController'
            })
        });

    sampleApp.controller('AngularController',function($scope,$routeParams) {

        $scope.tutorialid=$routeParams.topicId

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

ステップ 4) 表示変数に式を追加します
Angular.html ページにtutorialid変数を表示する式を追加します。

AngularJS ルートからパラメータにアクセスする

<h2>Anguler</h2>

<br><br>{{tutorialid}}

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

出力:

AngularJS ルートからパラメータにアクセスする

出力画面では、

  • トピックをクリックすると、tails 最初のトピックのリンクの場合、数値 1 が URL に追加されます。
  • この番号は、Angular.JS ルートプロバイダー サービスによって「routeparam」引数として取得され、コントローラーからアクセスできるようになります。

Angular $route サービスの使用方法

$route サービスを使用すると、ルートのプロパティにアクセスできます。 $route サービスは、関数がコントローラーで定義されているときにパラメーターとして使用できます。 コントローラーから $route パラメーターを使用する方法の一般的な構文を以下に示します。

myApp.controller('MyController',function($scope,$route)
  1. myApp は、アプリケーション用に定義された angular.JS モジュールです。
  2. MyController は、アプリケーション用に定義されたコントローラーの名前です。
  3. $scope 変数がアプリケーションで使用可能になるのと同様に、コントローラーからビューに情報を渡すために使用されます。 $route パラメーターは、ルートのプロパティにアクセスするために使用されます。

$route サービスの使用方法を見てみましょう。

この例では、

  • 「This is angular」という文字列を含む「mytext」という単純なカスタム変数を作成します。
  • この変数をルートにアタッチします。そして later $route サービスを使用してコントローラーからこの文字列にアクセスし、その後スコープ オブジェクトを使用してそれをビューに表示します。

それでは、これを達成するために実行する必要がある手順を見てみましょう。

ステップ1) カスタムのキーと値のペアをルートに追加します。 ここでは、「mytext」というキーを追加し、「This is angular」という値を割り当てています。

Angular $route サービス

ステップ2) 関連するコードをコントローラーに追加します

  1. $route パラメーターをコントローラー関数に追加します。 $route パラメータは angular で定義されたキー パラメータであり、ルートのプロパティにアクセスできるようになります。
  2. ルート内で定義された「mytext」変数には、$route.current 参照を介してアクセスできます。 次に、これはスコープ オブジェクトの「text」変数に割り当てられます。 その後、それに応じてビューからテキスト変数にアクセスできるようになります。

Angular $route サービス

<!DOCTYPE html>
<html>
<head>

    <meta chrset="UTF 8">
    <title>Event Registration</title>
</head>
<body ng-app="sampleApp">

<script src="https://code.angularjs.org/1.6.9/angular-route.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.min.js"></script>
<script src="lib/bootstrap.js"></script>
<script src="lib/bootstrap.css"></script>

<h1> Guru99 Global Event</h1>
<table class="table table-striped">
    <thead>
    <tr> <th>#</th><th>Angular JS topic</th><th>Description</th><th></th> </tr> </thead>
    <tbody>
    <tr>
        <td>l</td><td>l</td><td>Controllers</td>
        <td><a href="#Angular/l">Topic details</a></td>
    </tr>
    <tr>
        <td>2</td><td>2</td><td>Models</td>
        <td><a href="#Angular/2">Topic details</a></td>
    </tr>
    <tr>
        <td>3</td><td>3</td><td>Directives</td>
        <td><a href="#Angular/3">Topic details</a></td>
    </tr>
    </tbody>
</table>

<script>
    var sampleApp = angular.module('sampleApp',['ngRoute']);

    sampleApp.config(['$routeProvider',
        function($routeProvider){
            $routeProvider.
            when('/Angular/:topicId',{
                mytext:"This is angular",
                templateUrl : 'Angular.html',
                controller: 'AngularController'
            })
        }]);

    sampleApp.controller('AngularController',function($scope,$routeParams,$route) {

        $scope.tutorialid=$routeParams.topicId;
        $scope.text=$route.current.mytext;

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

ステップ3) スコープ オブジェクトからテキスト変数への参照を式として追加します。 これは、以下に示すように Angular.html ページに追加されます。

これにより、「This is angular」というテキストがビューに挿入されます。 {{tutorialid}} 式は前のトピックで示したものと同じであり、数値「1」が表示されます。

Angular $route サービス

<h2>Anguler</h2>

<br><br>{{text}}

<br><br>

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

出力:

Angular $route サービス

出力から、

  • 表内のリンクをクリックすると、「This is angular」というテキストも表示されることがわかります。 トピック ID もテキストと同時に表示されます。

HTML5 ルーティングの有効化

HTML5 ルーティングは、基本的にクリーンな URL を作成するために使用されます。 URLからハッシュタグを削除することを意味します。 したがって、HTML5 ルーティングが使用されている場合、ルーティング URL は次のように表示されます。

サンプル.html/Angular/1

サンプル.html/Angular/2

サンプル.html/Angular/3

この概念は通常、ユーザーにきれいな URL を提示するものとして知られています。

HTML2 ルーティングでは、実行する必要がある主な手順が 5 つあります。

  1. $locationProvider の構成
  2. 相対リンクのベースを設定する

上記の例で上記の手順を実行する方法を詳しく見てみましょう。

ステップ1) 関連するコードを angular モジュールに追加します

  1. アプリケーションにbaseURL定数を追加します – これは、アプリケーションのベースの場所をアプリケーションが認識できるようにするために、HTML5ルーティングに必要です。
  2. $locationProvider サービスを追加します。 このサービスを使用すると、html5Mode を定義できます。
  3. $locationProvider サービスの html5Mode を true に設定します。

HTML5 ルーティングの有効化

ステップ2) 読みやすい URL を作成するには、リンク (「Angular/1」、「Angular/2」、「Angular/3」) の #tag をすべて削除します。

HTML5 ルーティングの有効化

<!DOCTYPE html>
<html>
<head>

    <meta chrset="UTF 8">
    <title>Event Registration</title>
</head>
<body ng-app="sampleApp">

<script src="https://code.angularjs.org/1.6.9/angular-route.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.min.js"></script>
<script src="lib/bootstrap.js"></script>
<script src="lib/bootstrap.css"></script>

<h1> Guru99 Global Event</h1>
<table class="table table-striped">
    <thead>
    <tr> <th>#</th><th>Angular JS topic</th><th>Description</th><th></th> </tr> </thead>
    <tbody>
    <tr>
        <td>l</td><td>l</td><td>Controllers</td>
        <td><a href="Angular/l">Topic details</a></td>
    </tr>
    <tr>
        <td>2</td><td>2</td><td>Models</td>
        <td><a href="Angular/2">Topic details</a></td>
    </tr>
    <tr>
        <td>3</td><td>3</td><td>Directives</td>
        <td><a href="Angular/3">Topic details</a></td>
    </tr>
    </tbody>
</table>

<script>
    var sampleApp = angular.module('sampleApp',['ngRoute']);
    sampleApp.constant("baseUrl","http://localhost:63342/untitled/Sample.html/Angular");

    sampleApp.config(
        function($routeProvider,$locationProvider){
            $routeProvider.
            when('/Angular/:topicId',{
                templateUrl : 'Angular.html',
                controller: 'AngularController'
            })
        });

    sampleApp.controller('AngularController',function($scope,$routeParams,$route) {

        $scope.tutorialid=$routeParams.topicId

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

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

出力:

HTML5 ルーティングの有効化

出力から、

  • アプリケーションにアクセスすると、# タグが存在しないことがわかります。

まとめ

  • ルーティングは、同じ Web ページ上でさまざまなビューをユーザーに表示するために使用されます。 これは基本的に、最近のほぼすべての Web アプリケーションに実装されているシングル ページ アプリケーションで使用される概念です。
  • angular.JS ルーティング用にデフォルト ルートを設定できます。 ユーザーに表示されるデフォルトのビューを決定するために使用されます。
  • パラメーターは、ルート パラメーターとして URL 経由でルートに渡すことができます。 これらのパラメーターは、コントローラーの $routeParams パラメーターを使用してアクセスされます。
  • $route サービスを使用すると、ルート内でカスタムのキーと値のペアを定義でき、その後ビュー内からアクセスできるようになります。
  • HTML5 ルーティングは、Angular のルーティング URL から #tag を削除して、きれいな URL を形成するために使用されます。