ホームページ > 記事 > ウェブフロントエンド > AngularJS での Ui-router モジュールの使用をルーティングするためのサンプル コード
AngularJS での Ui-router モジュールの使用をルーティングするためのサンプル コード
- 黄舟オリジナル
- 2017-05-31 10:22:451242ブラウズ
この記事では、主に AngularJSroutingUi-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>HTMLのボディコードを見ると、ネイティブng-routeを使用した場合のボディコードと異なる箇所が3か所あることがわかります。それぞれ ui-sref、index、ui-view です。最初はスキップして、ui-route モジュールを初期化する方法を見てください。 ui-route モジュールを初期化します:
var app = angular.module('myApp',['ui.router']);
app.config(["$stateProvider",function($stateProvider){
$stateProvider
.state("index",{
url:'/',
template:'<p>我是首页内容</p>'
})
}]); まず第一に、ネイティブの ng-route ルーティング モジュールと同様に、最初に ui-route を挿入する必要があります。次に、特定の構成に進みます。ネイティブの ng-route とは異なり、ui-route はネイティブの when() の代わりに state() を使用します。これは、部分ルートがどのコマンドに応答するかを区別するために、when() に基づいて新しいパラメーターを追加します。に。 」の名前を指します。 url属性
は、経路の後続アドレスを後続の経路と区別して一意に識別することができます。以上がAngularJS での Ui-router モジュールの使用をルーティングするためのサンプル コードの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。