ホームページ > 記事 > ウェブフロントエンド > angular.jsのルートを選択する方法

angular.jsのルートを選択する方法

高洛峰オリジナル: 2017-02-06 11:41:561485ブラウズ

1 つのページに複数のモジュールを追加して、Web ページが必要なときにのみこのモジュールを読み込むようにすることができます。モジュールの切り替えは、Web ページの切り替えをほぼ置き換えることができるため、この切り替えはオンデマンドでロードされることで実現できます。

一見するとごく普通のことのように思えますが、よく考えてみると、このアイデアは多くのリソースを解決できることがわかります。

例えば、1,000個の商品の情報を表示する必要があるページがあり、それぞれの商品の表現形式が異なる場合（それぞれ独立したCSSやJSがあると仮定します）、一般的には1,000個のWebを用意する必要があります。この情報をロードするページ。ただし、このモジュール式のアイデアを使用すると、バックグラウンドで 1,000 の異なるモジュールを設定し、必要に応じて必要な製品の対応するモジュールを 1 つのページにロードすることができます。

上記で紹介した機能を実現するには、ルーティング機能を使用する必要があります。

主なアイデア:

1. バックグラウンドで複数の独立したモジュールをセットアップします

2. ルーティングを通じて必要なモジュールを抽出し、必要に応じてホームページにロードします

4.他のモジュールをロードするモジュールは非表示になります。

では、ルーティングモジュールを確立するにはどれくらいの労力がかかるでしょうか?実際、これは驚くほど簡単です:

まず、メインページに対応するコードを記述します:

55efc87653a0016330b9eaa14089c1747a91cead4d31023d90a4b7b2272b3235 これは、このタグの場合のみルーティングエリアとビューエリアを表します。ルーティングイベント:

<html ng-app="myTodo"><head>
    <meta charset="utf-8">
    <title>angularjs • TodoMVC</title>
    <link rel="stylesheet" href="node_modules/todomvc-common/base.css">
    <link rel="stylesheet" href="node_modules/todomvc-app-css/index.css">
    <style>
      .pagination {
        overflow: hidden;
        padding: 20px;
      }
      .pagination ul li {
        width: 60px;
        height: 30px;
        line-height: 30px;
        border:1px solid black;
        float: left;
        list-style-type: none;
        margin-right: 10px;
        text-align: center;
      }
    </style>
  </head>
  <body>
    <ng-view></ng-view> <!-- 路由区域，视图区域-->
    <footer id="info">
      <p>Double-click to edit a todo</p>
      <p>Created by <a href="http://sindresorhus.com">Sindre Sorhus</a></p>
      <p>Part of <a href="http://todomvc.com">TodoMVC</a></p>
    </footer>
     
    <script src="node_modules/angular/angular.js"></script>
    <script src="node_modules/angular-route/angular-route.js"></script>
    <script src="js/app.js"></script>
   
 
</body>
</html>

他のものはすべて装飾です。24 行目を見てください。

ルーティングエリアとビューエリアでは、コンテンツを追加したり、Web ページを追加したりすることもできます。

次に、対応するapp.jsを見てください。

var app = angular.module("myTodo", [&#39;ngRoute&#39;]);
//路由的配置：
app.config(function($routeProvider) {
 var routeconfig = {
    templateUrl: "body.html",
    controller: "myTodoCtrl"
    /*controller: &#39;myTodoCtrl&#39;*/
  }
 
  var ohter_config = {
    templateUrl: "other.html"
  }
 
  $routeProvider.
   when("",routeconfig).
   //status ： 它对应我们页面的hash: all completed active
   //路由规则的优先级按写法的顺序所决定的
   when("/other", ohter_config).
   when("/:aaa", routeconfig ).
   otherwise( { redirectTo: "/all" });
});
app.controller("myTodoCtrl", function($scope, $routeParams, $filter){
    console.log($routeParams);
   
});

ルーティングのみを使用する場合は、上記のコードで十分です。

1. ページがホームページまたはその他の奇妙な場所に留まると、URL は - http://127.0.0.1:8020/finishAngularJS-mark2/index に自動的にジャンプします。 .html#/all

インデックスの後にあるものに注意してください。

2. ページジャンプ方向が/otherの場合、

http://127.0.0.1:8020/finishAngularJS-mark2/iother.htmlにジャンプします

3. ここで規定されているジャンプは/です。 active、/complete/all)、対応するページにもジャンプしますが、これはインデックス -

http://127.0.0.1:8020/finishAngularJS -mark2/index.html#/active

の下でのジャンプです。
http://127.0.0.1:8020/finishAngularJS-mark2/index.html#/all

http://127.0.0.1:8020/finishAngularJS-mark2/index.html #/complete

[注意すべき点が 1 つあります]特に: このページからジャンプする 2 を除き、他のジャンプは指定されたビュー領域とルーティング領域に表示され、本文 Web ページのコンテンツがロードされます。】

次に原理を説明しましょう:

app.config(function($routeProvider)

これはルートを設定するために使用されるコードです。直接記述するだけです

var routeconfig = {
    templateUrl: "body.html",
    controller: "myTodoCtrl"
    /*controller: &#39;myTodoCtrl&#39;*/
  }
 
  var ohter_config = {
    templateUrl: "other.html"
  }

これらは 2 つのジャンプです。ジャンプはオブジェクトです。 templateUrl、つまりテンプレートは body.html なので、index.html は body.html をロードします。2 番目のパラメーターはこのテンプレートにコントローラーを追加するためのもので、名前は myTodoCtrl です。2 番目のジャンプはパスです。は重要ではありません。

$routeProvider.
   when("",routeconfig).
   //status ： 它对应我们页面的hash: all completed active
   //路由规则的优先级按写法的顺序所决定的
   when("/other", ohter_config).
   when("/:aaa", routeconfig ).
   otherwise( { redirectTo: "/all" });
});

このコードはハッシュ値が変化したときに、対応するジャンプオブジェクトが実行されます。

ハッシュ値が空の場合は、routeconfigを実行します。

ハッシュ値が「/other」、つまり5回目の場合、other_configを実行

ハッシュ値が特殊変数の場合、変数名はaaa、値はX（Xは任意）定義されたポインタ、ここでは all、complete、active の 1 つです。つまり、「/active」、「/complete」、「/all」で、routeconfig を実行します。

ハッシュ値がそれ以外の場合、デフォルトでジャンプします。ハッシュ値は「/all」です

ハッシュ値を取得し、次のオブジェクトを実行し、オブジェクトのテンプレートを取り出し、ホームページに追加し、コントローラーを起動し、ルート全体を作成しました

以上です。編集者が持ってきたangular.jsのパス選択方法の内容が皆さんのお役に立てれば幸いです。PHP中国語サイトをよろしくお願いします〜

angular.jsの詳細については、ルーティング選択方法に関する記事をご覧ください。 PHP 中国語 Web サイトに注意してください

声明：

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

前の記事：Vue.js 学習サンプルの共有次の記事：Vue.js 学習サンプルの共有

続きを見る

angular.jsのルートを選択する方法

関連記事