AngularJS での Ui-router モジュールの使用をルーティングするためのサンプルコード-jsチュートリアル-php.cn

AngularJS での Ui-router モジュールの使用をルーティングするためのサンプルコード

黄舟

リリース： 2017-05-31 10:22:45

オリジナル

1349 人が閲覧しました

この記事では、主に AngularJS routingUi-router モジュールの使用法を紹介し、サンプルの形式で Ui-router モジュールの機能、使用法、および関連する Notes を分析します。この記事では

AngularJS ルーティング Ui-router モジュールの使用法について説明します。以下のように、参考のためにみんなと共有してください:

いくつかの設計上の理由により、AngularJS のネイティブルーティングモジュールには、ビューのネストをサポートしていないなどのいくつかの欠点があります。そのため、多くのコミュニティが独自のルーティングモジュールを設計し始めています。最も代表的なのは ui-route です。

ui-route は、ネイティブ ng-route モジュールの他の機能を強化する強力なルーティングモジュールです。

ここで、ui-route に触れるために、いくつかのデモの作成を開始します。

<!--初始页面-->
<!doctype html>
<meta charset="UTF-8">
<html>
<head>
  <link href="self.css" rel="external nofollow" rel="stylesheet">
</head>
<body >
<p ng-app="myApp">
<p><a ui-sref = "index">首页</a></p>
<p ui-view></p><!--这里是路由视图存放的地方-->
</p>
<script src="angular.min.js"></script>
<script src="angular-ui-router.js"></script>
<script src="test2.js"></script>
</body>
</html>

ログイン後にコピー

まず angular-ui-router.js ファイルを参照する必要があります。このファイルは、AngularJs の angular-route.js ファイルとは異なります。そして、ファイルは angular.min.js の下に配置する必要があります。

HTMLのボディコードを見ると、ネイティブng-routeを使用した場合のボディコードと異なる箇所が3か所あることがわかります。それぞれ ui-sref、index、ui-view です。最初はスキップして、ui-route モジュールを初期化する方法を見てください。

ui-route モジュールを初期化します:

var app = angular.module(&#39;myApp&#39;,[&#39;ui.router&#39;]);
app.config(["$stateProvider",function($stateProvider){
  $stateProvider
    .state("index",{
      url:&#39;/&#39;,
      template:&#39;<p>我是首页内容</p>&#39;
    })
}]);

ログイン後にコピー

まず第一に、ネイティブの ng-route ルーティングモジュールと同様に、最初に ui-route を挿入する必要があります。次に、特定の構成に進みます。ネイティブの ng-route とは異なり、ui-route はネイティブの when() の代わりに state() を使用します。これは、部分ルートがどのコマンドに応答するかを区別するために、when() に基づいて新しいパラメーターを追加します。に。

ホームページ

に戻ると、おそらく彼らの見解とそれとの関係がわかるでしょう。 ui-view は以前の ng-view を置き換え、ui-sref は以前の ng-href を置き換え、リンクではなく「Navigation

」の名前を指します。

url属性

は、経路の後続アドレスを後続の経路と区別して一意に識別することができます。

以上がAngularJS での Ui-router モジュールの使用をルーティングするためのサンプルコードの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。