ハッシュ値を非表示にするにはどうすればよいですか？ URLs?

$locationProvider.html5Mode(true)でHTML5モードを有効にし、ベースタグを追加します。その後、サーバーは未知のパスをindex.htmlに書き換える必要があります。そうしないと、ページを更新したときに404エラーが返されます。

AngularJS ng-view と例

⚡ スマートサマリー

AngularJSのビューでは、ページを移動させる代わりにコンテンツを切り替えることができるため、シングルページアプリケーションが瞬時に動作するように感じられます。ng-viewディレクティブは、各ルートが独自のテンプレートとコントローラで置き換える領域を指定します。

🪟 単一のプレースホルダー: ng-viewマークを持つ要素は1つだけで、そこにすべてのルーティングテンプレートが挿入されます。また、1ページにつきそのような要素は1つだけ許可されます。
🔗 ルートペアリング: 各ルートには、テンプレートURLとコントローラーが指定されており、そのビューのマークアップとロジックを結合します。
📦 モジュールの依存関係: ビューにはangular-route.jsとngRouteモジュールへの依存関係の宣言が必要です。
🎯 デフォルトビュー： otherwise句は、一致しないアドレスをすべてリダイレクトします。これが、初回読み込み時にビューを表示する仕組みです。
🌐 サーバーが必要: テンプレートはHTTP経由で取得されるため、ページはファイルシステムから開くのではなく、サーバーから配信される必要があります。
⚠️ サポート状況: AngularJSは2021年12月31日にサポートが終了し、それ以降セキュリティパッチは提供されません。

プロフィール

有名なサイトとしては Gmail シングルページアプリケーション（SPA）の概念を採用しています。ユーザーが別のページをリクエストしても、アプリケーションは別のページに移動せず、既存のページ内に新しいページのビューを表示するため、ユーザーはまるでページを離れていないかのように感じられます。AngularJSでも、ビューとルーティングを組み合わせることで同様の動作を実現できます。

⚠️ サポートに関するお知らせ： AngularJSが到達 2021年12月31日をもって販売終了となります。 そして、これ以上のパッチやセキュリティ修正は提供されません。以下の指示は、既存の AngularJS 1.x アプリケーションを維持する上で依然として有効です。角度の同等のものは <router-outlet>.

ビューとは何ですか?

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

ビューとルートを組み合わせると、アプリケーションが論理ビューに分割され、それぞれがコントローラこれにより、アプリケーションの管理が容易になります。

顧客が注文内容を確認したり、新規注文をしたりできる注文アプリケーションを想定します。下の図は、それがどのようにシングルページアプリケーションになるかを示しています。

「注文を見る」と「新規注文」の2つの別々のウェブページではなく、 AngularJS 同じページ上の 2 つのビューを使用し、2 つの参照リンクからアクセスします。 #show (NAIST) と #new:

に移動する MyApp/#show ページを離れることなく「注文一覧」画面を表示します。既存ページの該当セクションのみが更新されます。
に移動する MyApp/#new 新規注文ビューでも同様の操作を行います。

このようにアプリケーションをビューに分割することで、管理しやすく変更も容易になり、各ビューにはその機能のビジネスロジックを保持する対応するコントローラーが存在します。

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

その ngView 指令を補完する $route 現在のルートのレンダリングされたテンプレートをメインレイアウトファイルに含めることでサービスが提供されます。通常 index.html.

現在のルートが変更されるたびに、含まれるビューもそれに応じて変更されます。 $route ページ自体を再読み込みすることなく、設定を変更できます。ルートそれらは別途説明します。ここでは、複数のビューを追加することに焦点を当てます。

以下のフローチャートは全体のプロセスを示しており、その後の例でそのプロセスを段階的に説明しています。

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

この例では、ユーザーに 2 つのオプションが提示されます。イベントを表示する、イベントを追加する。 イベントを追加する イベント追加ビューが表示され、イベント表示ビューについても同様です。

ステップ1） スクリプト参照としてangular-routeファイルを含めてください。このファイルは複数のルートとビューを使用するために必要であり、AngularJSのサイトから入手できます。

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

「新規イベントの追加」と「イベントの表示」へのリンクとなるhrefタグを追加してください。
div を追加して ng-view ビュー領域を指定する指示。いずれかのリンクがクリックされると、対応するビューがその領域に挿入されます。

ステップ3） AngularJSのスクリプトタグ内に、ルーティング設定を追加します。

ユーザーがクリックすると 新しいイベント リンク、AngularJS がロードされます add_event.htmlビューにマークアップを挿入し、 AddEventController ビジネスロジックのため。
ユーザーがクリックすると ディスプレイイベント リンク、読み込み完了 show_event.html そして使用 ShowDisplayController.
その otherwise この句は、ユーザーに表示されるデフォルトのビューを設定します。ここでは、DisplayEvent です。

ステップ4） 両方の機能のビジネスロジックを処理するためのコントローラを追加します。各コントローラは、対応するビューが表示されたときに表示されるメッセージを、スコープオブジェクトに設定するだけです。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Event Registration</title>
    <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>
</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 to display an Event";
    });
</script>

</body>
</html>

⚠️ 元の掲載情報に3つの修正があります。 まず、リンクにはこう書かれています。 #!NewEvent スラッシュなしでルートが宣言されている /NewEventなので、一致するものはありませんでした。AngularJS 1.6 以降、デフォルトのハッシュプレフィックスは !正しい住所 #!/NewEvent — 感嘆符の後にスラッシュ。2番目、 ShowDisplayController メッセージを「これはイベントを表示するものです」に設定し、単語が欠落しています。〜へ周囲のテキストが引用しているもの。第三に、 lib/bootstrap.js どこにも解決されず、使用もされていない相対パスから読み込まれたため、削除されました。

ステップ5） ページを作成する add_event.html (NAIST) と show_event.htmlそれぞれにヘッダーと、コントローラーによって挿入されたメッセージを表示する式が含まれています。

add_event.html

<h2>Add New Event</h2>

{{message}}

show_event.html

<h2>Show Event</h2>

{{message}}

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

出力：

ng-viewでよくあるエラーとその解決方法

ng-view のエラーのほとんどは、ディレクティブ自体ではなく、モジュールの接続、アドレス形式、またはページの配信方法に起因しています。

表示領域が空のままです。 　 ngRoute モジュールが依存関係としてリストされていませんでした、または angular-route.js ロードされませんでした。両方とも必要で、スクリプトは後に記述する必要があります。 angular.min.js.
リンクをクリックするとアドレスは変更されますが、何も表示されません。 href がルートと一致しません。AngularJS 1.6 以降では、アドレスは #!/Route; 1.5用に書かれた古いコードが使用されています #/Route.
テンプレートの読み込みがCORSエラーで失敗します。 ページはディスクから直接開かれました。HTTP で配信してください。 templateUrl AJAXリクエストによって取得されるファイルプロトコルブロック。
最後に表示されたビューのみが表示されます。 複数の要素がng-view属性を持つ場合、AngularJSはページごとに1つのビュー領域のみを尊重します。
初回読み込み時には何も表示されません。 いいえ otherwise 句が設定されているため、空のアドレスはどのルートにも一致しません。

よくあるご質問

いいえ。ngRouteはページごとに1つのビュー領域のみをサポートしています。複数の名前付き領域を同時に使用するには、ui-routerライブラリを使用してください。ui-routerライブラリはui-viewを提供し、ネストされたビューと兄弟ビューをサポートしています。

HTML5モードを有効にするには $locationProvider.html5Mode(true) そしてベースタグを追加します。サーバーは、未知のパスをindex.htmlに書き換える必要があります。そうしないと、ページを更新したときに404エラーが返されます。

大体。 AI ツールはルートテーブルをAngular Routes配列に変換し、ng-viewをrouter-outletに置き換えます。ただし、コントローラーはコンポーネントとして手動で書き直す必要があります。

AIアシスタントは、よくある3つの原因を迅速にチェックします。それは、ngRouteの依存関係が欠落している、ハッシュプレフィックスがルートと一致しない、ブラウザが取得できないテンプレートパスが存在する、というものです。

はい。 resolve ルートをブロックします。AngularJS は、コントローラーをインスタンス化する前にこれらのプロミスが解決するまで待機するため、データが到着するまでビューが一時的に空になるのを防ぎます。

AngularJS ng-view と例

ビューとは何ですか?

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

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

ng-viewでよくあるエラーとその解決方法

よくあるご質問

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

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

ビューとは何ですか?

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

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

関連記事

ng-viewでよくあるエラーとその解決方法

よくあるご質問

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

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