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

⚡ スマートサマリー

AngularJSのルーティングは、マップによって単一のHTMLページをマルチビューアプリケーションに変換します。ping URL テンプレートとコントローラーへのフラグメント。ngRoute モジュールと $routeProvider サービスは、これらのマップを定義します。ping一方、ng-view ディレクティブは、対応するテンプレートを挿入します。

🧩 コアメカニズム: $routeProvider は # 記号の後のフラグメントに一致し、対応する templateUrl とコントローラーを ng-view にロードします。
📦 必須の依存関係: ルーティングはコアライブラリの外部に存在するため、angular-route.js を参照し、ngRoute をモジュール内で宣言する必要があります。
🎯 デフォルトルート: otherwise ブロックは、一致しないパスをすべてリダイレクトし、アプリケーションが最初に読み込まれたときに空白の画面が表示されるのを防ぎます。
🔢 ルートパラメータ: :topicId のようなコロンのプレースホルダーは URL コントローラーが $routeParams を通じて読み取るセグメント。
⏳ データ事前読み込み: resolveプロパティはコントローラが実行される前にデータの取得を完了するため、ビューが空の状態でレンダリングされることはありません。
🔗 石斑魚 URLs: $locationProvider に html5Mode を設定するとハッシュは削除されますが、サーバーは未知のパスをベースページに書き換える必要があります。

プロフィール

AngularJSにおけるルーティングの仕組みを詳しく見ていく前に、ルーティングがどのようなアプリケーション向けに設計されたのかを理解しておくと役立ちます。以下のセクションではその背景を説明し、以降のすべてのテクニックはそれを基に構築されています。

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

シングルページアプリケーション（SPA）とは、単一のHTMLページを読み込み、ユーザーの操作に応じてそのページを動的に更新するWebアプリケーションです。クリックするたびにサーバーから新しいドキュメントを要求するのではなく、SPAは変更されたページ部分のみを切り替えます。

この設計には一つ問題があります。ブラウザが新しいドキュメントに移動しない場合、アドレスバーは変化しないため、ユーザーは画面をブックマークしたり、共有したり、戻るボタンを使用したりすることができません。ルーティングはこの問題を解決するのに最適です。

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

AngularJS でのルーティング これは、シングルページアプリケーションを作成できる方法です。さまざまな URLWeb アプリケーション内のさまざまなコンテンツに対して s を使用します。AngularJS ルーティングは、選択されたルートに応じて複数のコンテンツを表示するのにも役立ちます。これは、 URL #記号の後に続きます。

では、次のようなサイトを例にとってみましょう。 URL http://example.com/index.html.

このページは、アプリケーションのメイン画面です。アプリケーションがイベントを管理していて、ユーザーがイベントの一覧表示、詳細表示、または削除を希望する場合を考えてみましょう。ルーティングが有効になっているシングルページアプリケーションでは、これらすべてが以下のリンクから利用できます。

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

すべてのイベントを表示するには、ユーザーは次の場所に誘導されます。 http://example.com/index.html#ShowEvent
特定のイベントを見るには、 http://example.com/index.html#DisplayEvent
イベントを削除するには、 http://example.com/index.html#DeleteEvent

主な URL は変わりません。# の後のフラグメントだけが変更され、AngularJS はそのフラグメントを監視します。この概念を理解した上で、次のセクションでは、動作させるために必要な設定について説明します。

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

前述の通り、 AngularJS これらは、ユーザーをアプリケーションの別のビューに誘導するために使用されます。このルーティングは同じHTMLページ内で行われるため、ユーザーはページを離れていないという感覚を得られます。

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

angular-route.js を参照してください。 Javaスクリプトファイル、開発元 Googleにはすべてのルーティング機能が含まれており、アプリケーションがモジュールのルーティング要件を参照できるようにするために含める必要があります。
アプリケーション内でngRouteモジュールへの依存関係を追加してください。この依存関係がないと、AngularJSアプリケーションでルーティングを一切使用できません。

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

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

$routeProvider を設定してください。これはアプリケーション内のさまざまなルートを提供し、構文は、関連するパスが選択されたときに、そのルートを使用して指定されたビューを表示することを指定します。

when(path, route)

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

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

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

💡 ヒント： 5つの手順はすべて必須です。angular-route.jsへの参照が欠落していることが、ルートが何も実行されない最も一般的な原因です。これは、参照がないと$routeProviderが存在しないためです。次のセクションでは、これら5つの手順をすべて組み合わせた動作例を示します。

AngularJS ルーティングの例

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

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

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

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

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

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

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

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

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

Code 説明：

「ngRouteモジュール」を含めてください。これにより、Angularはルーティングを自動的に処理し、すべてのルーティングコマンドを理解するようになります。
$routeProvider は、呼び出されたルートをバックグラウンドで監視するサービスです。ユーザーがリンクをクリックすると、それを検知してどのルートに進むかを決定します。
Angularリンク用に1つのルートを作成します。リンクがクリックされたら、Angular.htmlを挿入し、ビジネスロジックには「AngularController」を使用します。
Node.htmlを挿入し、同じ方法で「NodeController」を使用するNodeリンク用のルートを1つ作成します。

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

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

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Event Registration</title>
</head>
<body ng-app="sampleApp">

<script src="https://code.angularjs.org/1.8.3/angular.min.js"></script>
<script src="https://code.angularjs.org/1.8.3/angular-route.js"></script>

<h1> Guru99 Global Event</h1>

<div class="container">
<ul>
<li><a href="#!/Angular">Angular JS Topics</a></li>
<li><a href="#!/Node">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"}
  ];
});

// NodeController follows the same shape with Node.js topics
sampleApp.controller('NodeController', function($scope) {
  $scope.tutorial = [{Name: "Promises", Description: "Power of Promises"}];
});
</script>
</body>
</html>

⚠️ 修正を適用しました。 その <title> タグは中に入っていた <body>, chrset="UTF 8" スペルミスがあり、2 番目のリンクは #Node.html 登録されたルートの代わりに /Node、またテンプレートパスには、ドメインルートから解決される先頭のスラッシュが付いていました。

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

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

使い方 ng-repeat ディレクティブチュートリアル変数で定義されている各キーと値のペアを順に確認します。
各キーと値のペアの名前と説明を表示します。

Angular.html

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

ノード.html — 上記のリストと同一で、見出しが「ノード」に変更されています。どちらのテンプレートも同じ内容です。 tutorial 各コントローラが自身のスコープから提供する変数。

⚠️ 訂正： 元のAngular.htmlの見出しは「Anguler」となっていました。上記でスペルを修正しました。

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

出力：

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

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

「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 サービスに追加してみましょう。

sampleApp.config(['$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」ビューを表示させたいと考えています。

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

出力：

出力から、

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

デフォルトルートは、どのビューをロードするかを決定します。次のセクションでは、単一のルートが値を保持することで多くのレコードを処理する方法について説明します。 URL.

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

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

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

一般的な構文は次のとおりです HTMLページ番号/ルート/パラメータそのため、以前のトピックは Sample.html#/Angular/1、#/Angular/2、#/Angular/3 となり、数字はトピック ID です。

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

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

Angular JSコースのすべてのトピックをユーザーに表示する表を追加してください。
トピック「コントローラー」を表示するためのテーブル行を追加します。この行の href を「#!/Angular/1」に設定し、トピックをクリックするとパラメーター 1 が渡されるようにします。 URL ルートに沿って。
「モデル」というトピックの行を追加し、href を「#!/Angular/2」に設定して、パラメータ 2 が URL.
「Directives」というトピックの行を追加し、href を「#!/Angular/3」に設定して、パラメーター 3 が URL.

ステップ2）routeProviderサービス関数にトピックIDを追加します
routeProvider サービス関数に以下を追加します。 :topicId 渡されたパラメータを示すプレースホルダー URL ルートが取得された後は、変数 topicId に代入する必要があります。

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

コントローラー関数を定義する際に、まず「$routeParams」をパラメーターとして追加してください。このパラメーターは、渡されたすべてのルートパラメーターにアクセスできます。 URL.
「$routeParams」には、ルートで渡されたtopicIdが格納されます。 $routeParams.topicId 範囲として $scope.tutorialid チュートリアルIDとしてビューで使用できるようにします。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Event Registration</title>
</head>
<body ng-app="sampleApp">

<script src="https://code.angularjs.org/1.8.3/angular.min.js"></script>
<script src="https://code.angularjs.org/1.8.3/angular-route.js"></script>

<h1> Guru99 Global Event</h1>
<table class="table table-striped">
<tbody>
<tr><td>1</td><td>Controllers</td>
<td><a href="#!/Angular/1">Topic details</a></td></tr>
<!-- rows 2 and 3 repeat with /Angular/2 and /Angular/3 -->
</tbody>
</table>
<div ng-view></div>

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

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

sampleApp.controller('AngularController', ['$scope', '$routeParams',
function($scope, $routeParams) {
  $scope.tutorialid = $routeParams.topicId;
}]);
</script>
</body>
</html>

⚠️ 修正を適用しました。 オリジナルでは文字が使われていました l 数字の代わりに 1 in href="#Angular/l"省略 ng-view テンプレートをレンダリングする場所がないコンテナがロードされ、 angular-route.js angular.min.jsモジュールエラーが発生します。

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

<h2>Angular</h2>

<br><br>{{tutorialid}}

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

出力：

出力画面では、

最初のトピックの「トピックの詳細」リンクをクリックすると、番号 1 が追加されます。 URL.
その数値は「routeParams」引数として扱われ、コントローラー内でアクセス可能になります。

パラメータの読み取りは簡単です。ビューが表示される前に、パラメータが識別するレコードを取得するのは、次に説明するプロパティの役割です。

resolveプロパティを使用してデータをプリロードする方法

前のセクションのコントローラーはトピックIDを読み取り、すぐに表示します。実際のアプリケーションでは、まずサーバーからレコードを取得する必要があり、そのリクエストが返される前にビューがレンダリングされると、ユーザーには空のテンプレートが表示され、しばらくすると内容が反映されます。 resolve このプロパティは、一瞬表示される空のコンテンツを削除します。

各キーは resolve オブジェクトは、AngularJS がルートをアクティブ化する前に準備する依存関係です。値がプロミスである場合、ルーターはプロミスが解決されるまで待機します。すべてのプロミスが解決されて初めて、AngularJS はコントローラーをインスタンス化してテンプレートをレンダリングし、解決された値は他のサービスと同様に名前でコントローラーに注入されます。

sampleApp.config(['$routeProvider',
function($routeProvider) {
  $routeProvider.
  when('/Angular/:topicId', {
    templateUrl: 'Angular.html',
    controller: 'AngularController',
    resolve: {
      // The router waits for this promise before rendering
      topic: ['$http', '$route', function($http, $route) {
        var id = $route.current.params.topicId;
        return $http.get('/api/topics/' + id).then(function(response) {
          return response.data;
        });
      }]
    }
  });
}]);

// 'topic' is injected already resolved, so no loading state is needed
sampleApp.controller('AngularController', ['$scope', 'topic',
function($scope, topic) {
  $scope.topic = topic;
}]);

ここでは2つの動作が重要です。拒否されたプロミスはルート変更をキャンセルし、ブラウザを現在のビューに残すため、リクエストが失敗してもページが壊れることはありません。しかし、プロミスが保留中の間ルーターはブロックされるため、エンドポイントが遅いとアプリケーションがフリーズしたように見えます。 resolve 進捗状況を示す指標は $routeChangeStart (NAIST) と $routeChangeSuccess イベント。

⚠️ 警告： 認証チェックを内部のみに配置しないでください resolveルートを拒否するとビューは非表示になりますが、その背後にあるデータは保護されません。また、APIエンドポイントはサーバー上でアクセスを強制する必要があります。

ルートは、データの事前読み込みに加えて、静的な設定値も保持できます。次に説明するサービスは、コントローラがそれらの値を読み取る方法です。

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

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

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

myAppは、アプリケーション用に定義されたAngularJSモジュールです。
MyControllerは、アプリケーション用に定義されたコントローラーの名前です。
$scopeがコントローラからビューに情報を渡すのと同様に、$routeは現在のルートのプロパティを公開します。

それでは、$routeサービスの使い方を見ていきましょう。

この例では、

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

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

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

ステップ2） コントローラーに該当するコードを追加してください。

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

// Only the config and controller change; the page markup is unchanged
sampleApp.config(['$routeProvider',
function($routeProvider) {
  $routeProvider.
  when('/Angular/:topicId', {
    mytext: "This is angular",   // custom key attached to the route
    templateUrl: 'Angular.html',
    controller: 'AngularController'
  });
}]);

sampleApp.controller('AngularController', ['$scope', '$routeParams', '$route',
function($scope, $routeParams, $route) {
  $scope.tutorialid = $routeParams.topicId;
  $scope.text = $route.current.mytext;
}]);

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

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

<h2>Angular</h2>

<br><br>{{text}}
<br><br>{{tutorialid}}

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

出力：

出力から、

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

あらゆる URL ここまで表示されている内容にはまだ「#」記号が付いています。最後の設定手順でこの記号は削除されます。

HTML5 ルーティングの有効化

HTML5ルーティングは、クリーンなレイアウトを作成するために使用されます。 URLs。これはハッシュタグの削除を意味します。 URLルーティング URLHTML5ルーティングを使用すると、以下のように表示されます。

サンプル.html/Angular/1

サンプル.html/Angular/2

サンプル.html/Angular/3

この概念は通常、美しい URL ユーザに提供する。

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

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

それでは、上記のステップを例を用いて具体的にどのように実行するのかを見ていきましょう。

ステップ1） 関連するコードをAngularモジュールに追加してください。

加える <base> ドキュメントのヘッダーにタグを追加します。これは、アプリケーションがアプリケーションのベースロケーションを認識するために、HTML5ルーティングに必要です。
$locationProviderサービスを追加してください。このサービスを使用すると、html5Modeを定義できます。
$locationProvider サービスの html5Mode を true に設定します。

ステップ2） リンク（'Angular/1'、'Angular/2'、'Angular/3'）の#タグをすべて削除して、読みやすいコードを作成します。 URLs.

<!-- In the head: required by html5Mode so relative templates resolve -->
<base href="/">

<!-- In the body: the # is dropped from every link -->
<a href="Angular/1">Topic details</a>

<script>
sampleApp.config(['$routeProvider', '$locationProvider',
function($routeProvider, $locationProvider) {
  $locationProvider.html5Mode(true);
  $routeProvider.
  when('/Angular/:topicId', {
    templateUrl: 'Angular.html',
    controller: 'AngularController'
  });
}]);
</script>

⚠️ 訂正： 元々は宣言した baseUrl ローカル IDE パスを指す定数であり、html5Mode には影響しません。AngularJS はベースロケーションを読み取ります。 <base href> タグ。オリジナルも注入されています $locationProvider 電話もせずに html5Mode(true)そのため、ハッシュ値は削除されませんでした。

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

出力：

出力から、

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

上記すべては、AngularJSチームが提供するルーターであるngRouteを使用しています。ngRouteは唯一の選択肢ではなく、以下の比較では、どのような場合に別の方法がより適しているかを説明します。

ngRouteとui-router：どちらのルーターを選ぶべきか

ngRoute は AngularJS チームによって管理されており、 URL 単一のテンプレートとコントローラーに直接アクセスします。ui-router は、ngRoute の主な制限であるアプリケーションに一致するという制限を解消するために構築されたコミュニティプロジェクトです。状態ではなく URL これにより、1つの画面に複数の独立したルーティング領域を配置することが可能になります。

側面	ngルート	ui-router
構成サービス	$ routeProvider	$stateProvider
試合は	URL の	名前の付いた州、 URL 任意
ネストされたビュー	サポートされていません	サポート
画面ごとに複数のビューを表示	1つのng-view	多くの名前付きui-viewアウトレット
ネストされた解決	サポートされていません	子状態は親状態の解決を継承する
に最適	平らな小型アプリケーション	ダッシュボードと階層型レイアウト

ngRoute を各タイミングで選択 URL 追加の依存関係が不要で、API 全体が 1 つのページに収まるため、1 つのフルページビューにマッピングされます。画面に独立してナビゲートするペインがある場合、または子ビューが親によってロードされたデータを再利用する必要がある場合は、ui-router を選択してください。後から移行することは可能ですが、状態名が置き換えられるため簡単ではありません。 URL テンプレート全体に共通するパターン。

AngularJSのルーティングでよくあるエラーとその修正方法

ルーティングエラーのほとんどは、コンソールエラーではなく空白のng-viewを生成するため、本来よりも診断が困難になっています。以下の各症状には、その原因と解決策が記載されています。

不明なプロバイダー: $routeProvider: angular-route.js が読み込まれなかったか、angular.min.js より先に読み込まれました。まずコアライブラリを参照してください。
エラーメッセージは表示されず、画面は空白のままです。 どの要素にもng-viewディレクティブが付与されていないため、テンプレートをレンダリングする場所がありません。
初回アクセス時に何も読み込まれない： 空のパスに一致するルートがありません。redirectTo 値を指定した otherwise ブロックを追加してください。
$routeParams は空です: パターンにコロンのプレースホルダーがありません。正しくは「/Angular/:topicId」とする必要があります。
html5Mode 後にテンプレートが 404 エラーになる: サーバーを設定して、一致しないパスをベースページに書き換えるようにし、ベースhrefタグが存在することを確認します。
コントローラーは再実行されません。 パラメータのみが変更されたため、AngularJS はコントローラインスタンスを再構築するのではなく再利用しました。コントローラ関数が再度実行されるのを待つのではなく、$routeUpdate イベントをリッスンしてください。

よくあるご質問

$routeParams は、パスのプレースホルダーとクエリ文字列の値を 1 つのオブジェクトに統合して返します。$location.search() はクエリ文字列のみを返します。コントローラー内では $routeParams を使用し、クエリ値を直接読み書きする場合は $location.search() を使用してください。

はい。ハッシュがない場合、ブラウザはページを更新したり共有リンクを使用したりする際に、サーバーに完全なパスを送信します。サーバーは一致しないパスをすべて元のHTMLページに書き換える必要があります。そうしないと、ディープリンクは404エラーを返します。

AngularJSは2021年12月にサポートが終了し、それ以降のアップデートは提供されません。ngRouteは既存のAngularJSアプリケーションの保守には引き続き適していますが、新規プロジェクトでは現在サポートされているフレームワークを使用する必要があります。

Yes. AI アシスタントは、各whenブロックをRoutes配列のエントリにマッピングし、resolveキーをルートリゾルバーに変換します。 Rev2 つのルーターは一致しないパスの処理方法が異なるため、ビューガードとワイルドカードの処理を手動で行う必要があります。

AI ツールは、次の 3 つの一般的な原因を順番にチェックします: ngRoute の依存関係の欠落、ng-view 要素の欠落、ルートパターンが一致しない URL症状を説明し、設定ブロックを貼り付けることで、通常は障害箇所を特定できます。

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

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

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

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

AngularJS ルーティングの例

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

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

resolveプロパティを使用してデータをプリロードする方法

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

HTML5 ルーティングの有効化

ngRouteとui-router：どちらのルーターを選ぶべきか

AngularJSのルーティングでよくあるエラーとその修正方法

よくあるご質問

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

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

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

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

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

AngularJS ルーティングの例

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

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

resolveプロパティを使用してデータをプリロードする方法

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

HTML5 ルーティングの有効化

ngRouteとui-router：どちらのルーターを選ぶべきか

AngularJSのルーティングでよくあるエラーとその修正方法

よくあるご質問

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

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

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