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

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

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

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

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

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

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

このページでは、アプリケーションのメインページをホストします。アプリケーションがイベントを企画していて、表示されているさまざまなイベントを確認したり、特定のイベントの詳細を確認したり、イベントを削除したりしたいとします。シングルページアプリケーションでは、ルーティングが有効になっている場合、これらの機能はすべて次のリンクから利用できます。

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 ページ上で実行されるため、ユーザーはページから離れていないことを実感できます。

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

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

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

var module = angular.module("sampleApp", ['ngRoute']);

次のステップは、$routeProvider を構成することです。これは、アプリケーションでさまざまなルートを提供するために必要です。以下は、このステートメントの一般的な構文であり、一目瞭然です。これは、関連するパスが選択されたときに、そのルートを使用して指定されたビューをユーザーに表示することを示しているだけです。

when(path, route)

HTML ページ内からルートへのリンク。 HTML ページに、アプリケーションで使用可能なさまざまなルートへの参照リンクを追加します。

<a href="#/route1">Route 1</a><br/>

最後に、 ng-view ディレクティブ、通常は div タグ内にあります。これは、関連するルートが選択されたときにビューのコンテンツを挿入するために使用されます。

AngularJS ルーティングの例

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

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

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

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

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

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

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

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

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

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

コードの説明：

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

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

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

<!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 というページを作成します。ページごとに以下の手順を実行します。

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

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

Angular.html

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

ノード.html

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

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

出力：

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

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

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

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

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

デフォルトのルートは、$routeProvider サービスを定義するときに次の条件を追加することによって作成されます。

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

otherwise ({
    redirectTo: 'page'
});

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

function($routeProvider){
$routeProvider.

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

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

コードの説明：

ここでは上記と同じコードを使用していますが、唯一の違いは、ルートが指定されていない場合にどのビューをロードするかを指定するために、otherwise ステートメントと “redirectTo” オプションを使用していることです。この場合、'/Angular' ビューが表示されるようにします。

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

出力：

出力から、

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

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

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

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

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

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

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

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

サンプル.html#/Angular/1

サンプル.html#/Angular/2

サンプル.html#/Angular/3

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

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

ステップ1) ビューに次のコードを追加します

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

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

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

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

<!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変数を表示する式を追加します。

<h2>Anguler</h2>

<br><br>{{tutorialid}}

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

出力：

出力画面では、

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

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

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

myApp.controller('MyController',function($scope,$route)

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

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

この例では、

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

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

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

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

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

<!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」が表示されます。

<h2>Anguler</h2>

<br><br>{{text}}

<br><br>

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

出力：

出力から、

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

HTML5 ルーティングの有効化

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

サンプル.html/Angular/1

サンプル.html/Angular/2

サンプル.html/Angular/3

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

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

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

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

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

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

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

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

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

出力：

出力から、

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

まとめ

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

よろしければ：

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

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

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

関連記事

AngularJS ルーティングの例

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

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

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

HTML5 ルーティングの有効化

まとめ

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