AngularJs での ui.route の単純なアプリケーションを探索する-jsチュートリアル-php.cn

AngularJs での ui.route の単純なアプリケーションを探索する

高洛峰

リリース： 2016-12-06 15:46:54

オリジナル

1317 人が閲覧しました

htmlページコード

<body ng-app="myApp">
　　<div ui-view></div>
　　<div ui-view="login"></div>
　　<div ui-view="enroll"></div>
</body>

ログイン後にコピー

参照する必要があるui.router.jsファイル

<script src="angular-ui-router.js"></script>

ログイン後にコピー

app.js

UI-RouterをWebアプリケーションの依存関係としてメインプログラムに挿入:

url :url オプションは、ユーザーがアプリケーションを閲覧している状態に基づいて、アプリケーションの状態の URL を指定します (アドレスにはリンクが表示されます)。このようにして、アプリケーションの閲覧時にディープリンクの効果を実現できます。

var myApp = angular.module(&#39;myApp&#39;, [&#39;ui.router&#39;]);
myApp.config([&#39;$stateProvider&#39;, &#39;$urlRouterProvider&#39;, routeConfig]);
function routeConfig($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise(&#39;&#39;);
$stateProvider.state(&#39;competition&#39;, {
url: &#39;/competition&#39;,
templateUrl: &#39;/competition.html&#39;,
controller: &#39;competitionController&#39;
}).state(&#39;competition.detail&#39;, {
url: &#39;/competition-detail&#39;,
templateUrl: &#39;/competition-detail.html&#39;,
controller: &#39;competitionDetailController&#39;
}).state.(&#39;competition.enrollForm&#39;,{
url: &#39;/competition.enrollForm&#39;,
templateUrl: &#39;competition-enrollFrom.html&#39;,
controller: &#39;enrollFromController&#39;
}).state.(&#39;competition.comments&#39;,{
url: &#39;/competition-comments&#39;,
templateUrl: &#39;competition-comments.html&#39;,
controller: &#39;commentsController&#39;
}).state(&#39;competition.login&#39;,{
url: &#39;/competition-login&#39;,
views: {
&#39;login@&#39;: {
templateUrl: &#39;competition-login.html&#39;,
controller: &#39;loginController&#39;
}
}
}).state(&#39;competition.enroll&#39;,{<br> 　　url: &#39;/competition-enroll&#39;,<br> views: {<br> 　　　　&#39;enroll@&#39;: {<br><em id="__mceDel"><em id="__mceDel"><em id="__mceDel"><em id="__mceDel"><em id="__mceDel"> 　　　　　templateUrl: &#39;competition-enroll.html&#39;,<br></em></em></em></em></em><em id="__mceDel"><em id="__mceDel"><em id="__mceDel"><em id="__mceDel"><em id="__mceDel"><em id="__mceDel">　　　　　　controller: &#39;enrollController&#39;<br></em></em></em></em></em></em><em id="__mceDel"><em id="__mceDel"><em id="__mceDel"><em id="__mceDel"><em id="__mceDel"><em id="__mceDel"><em id="__mceDel"> }<br></em></em></em></em></em></em></em><em id="__mceDel"><em id="__mceDel"><em id="__mceDel"><em id="__mceDel"><em id="__mceDel"><em id="__mceDel"><em id="__mceDel"><em id="__mceDel"> }<br></em></em></em></em></em></em></em></em><em id="__mceDel"><em id="__mceDel"><em id="__mceDel"><em id="__mceDel"><em id="__mceDel"><em id="__mceDel"><em id="__mceDel"><em id="__mceDel"><em id="__mceDel"> })<br></em></em></em></em></em></em></em></em></em><em id="__mceDel">}</em>

ログイン後にコピー

注意すべき点: ui.router は $stateProvider を使用し、ngRoute は $routeProvider を使用します。

$state.go

$state.go(to, [,toParams],[,options])

仮パラメータ to は、「^」または「.」を使用する必要があります。相対パスを示します。

仮パラメータ toParams は null 可能で、型はオブジェクトです。

仮パラメータのオプションは null 可能で、型はオブジェクトです。 location は bool 型です。デフォルトは true、inherit は bool 型でデフォルトは true、relative はオブジェクトでデフォルトは

$state、notify は bool 型でデフォルトは true、reload は bool 型でデフォルトは false

$state.go('photos.detail')

$state.go('^') から前のレベルへ (photo.detail から photo

$state.go('^.list' など) ) 隣接する状態 (photo.detail から photo.list など) へ

$state.go('^.detail.comment') 孫レベルの状態 (photo.detail から photo.detial.comment など) へ