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

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

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

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

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

AngularJS でのルーティング これは、シングルページアプリケーションを作成できる方法です。さまざまな URLWeb アプリケーション内のさまざまなコンテンツに対して s を使用します。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」サービスを追加します。

Code 説明：

最初のステップは、「ngRouteモジュール」を含めることです。これを含めると、Angularがアプリケーションのルーティングを自動的に処理します。ngRouteモジュールは、 Google このモジュールには、ルーティングを可能にするすべての機能が備わっています。このモジュールを追加することで、アプリケーションはすべてのルーティングコマンドを自動的に理解するようになります。
$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 これは、ルート（上記画像に示すように「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'
});
}]);

Code 説明：

ここでは上記と同じコードを使用していますが、唯一の違いは、ルートが指定されていない場合にどのビューをロードするかを指定するために、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 サービス関数で、: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}}

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

出力：

出力画面では、

最初のトピックの「トピックの詳細」リンクをクリックすると、番号 1 が追加されます。 URL.
この番号は、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ルーティング URLHTML5ルーティングを使用すると、以下のように表示されます。

サンプル.html/Angular/1

サンプル.html/Angular/2

サンプル.html/Angular/3

この概念は通常、美しいプレゼンテーションとして知られています URL ユーザに提供する。

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

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

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

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

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

ステップ2） リンク（'Angular/1'、'Angular/2'、'Angular/3'）の#タグをすべて削除して、読みやすくします。 URL.

<!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ルーティングは、ルーティングから#タグを削除するために使用されます。 URL 角ばってきれいに形作る URL

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

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

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

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

AngularJS ルーティングの例

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

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

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

HTML5 ルーティングの有効化

製品概要

この投稿を要約すると次のようになります:

ニュースレターに登録する

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

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

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

関連記事

AngularJS ルーティングの例

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

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

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

HTML5 ルーティングの有効化

製品概要

この投稿を要約すると次のようになります:

ニュースレターに登録する

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