angularjs のルーティング原理をご存知ですか? angularjsルーティングの詳細な原​​則は次のとおりです

この記事では、主に angularjs のルーティング原理と、angularjs routing の使用手順について説明します。あまり深くは説明されていないので、誰でも理解できるはずです。次に、この記事を一緒に見てみましょう

1. angularjs の導入を見てみましょう:

AngularJS ルーティング メカニズムは ngRoute モジュールによって提供され、ビューをレイアウトとレイアウトに分解することができます。テンプレート ビューは、URL の変更に応じてテンプレート ビューをレイアウトに動的にロードし、シングル ページ アプリケーションのページ ジャンプ機能を実現します。

2 番目に、AngularJS の URL を見てください

# 記号は、単一ページの WEB アプリケーションの URL に追加されています。# 記号は、Web ページ上の位置とその右側のすべてのコンテンツを表します。位置をマークするために使用されます。 # 記号とそれに続く内容は URL 内のハッシュ フラグメントと呼ばれ、次の 3 つの URL はサーバーに同じアドレスを要求しません。 # 記号以降のコンテンツのみを変更した場合、更新しても Web ページは再読み込みされません。

http://www.php.cn/

http://www.php.cn/#123

http://www.php.cn/#123/456

3、今から話しましょうルーティングの使用法:

1. ファイルを導入し、依存関係を挿入します

バージョン 1.2 以降、AngularJS は ngRoutes をコア コードから独立したモジュールに分離しました。したがって、AngularJS アプリケーションでルーティング機能を通常に使用するには、モジュール宣言で ngRoute への依存関係をインストールして挿入する必要があります。 (angularjs について詳しく知りたい場合は、PHP 中国語 Web サイトAngularJs Learning Manual のコラムをご覧ください)

<script src="angular-route.min.js"></script>
var app = angular.module("myApp",[&#39;ngRoute&#39;]);

2. レイアウト テンプレートを作成する

レイアウト テンプレートを作成する必要がある理由は、AngularJS に伝えるためです。レイアウトをどこにレンダリングするかを指定します。 ng-view ディレクティブを使用すると、DOM 内のテンプレート ビューのレンダリング位置を正確に指定できます。

<div ng-app="myApp">
    <a ng-href="#/music">音乐</a>
    <a ng-href="#/movie">电影</a>
    <a ng-href="#/novel">小说</a>
    <a ng-href="#/other">其他</a>
    <div ng-view></div>
</div>

3. いくつかのテンプレートビューを作成します

myMusic.html

<p>这里是音乐界面啦</p>

myMovie.html

<p>这里是电影界面啦</p>

myNovel.html

<p>这里是小说界面啦</p>

home.html

<p>我是首页界面</p>

4. ルーティングテーブルを定義します

app.config(['$routeProvider',function($routeProvide) {
    $routeProvide
        .when('/',{templateUrl:"home.html"})
        .when('/music',{templateUrl:"myMusic.html"})
        .when('/movie',{templateUrl:"myMovie.html"})
        .when('/novel',{templateUrl:"myNovel.html"})
        .otherwise({redirectTo:'/'});
}]);

、上記がこの記事の全内容です (angularjs について詳しく知りたい場合は、PHP 中国語 Web サイト

AngularJS 学習マニュアル のコラムで学習することをお勧めします)。ご質問がある場合は、以下にメッセージを残してください

。 【編集者のおすすめ】

angularjsとVueの違いは何ですか？ angularjs と Vue の比較の詳細

angularjs の利点は何ですか?知っておくべきangularjsの7つの利点は次のとおりです

以上がangularjs のルーティング原理をご存知ですか? angularjsルーティングの詳細な原​​則は次のとおりですの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。