Entdecken Sie die einfache Anwendung von ui.route in AngularJs-js-Tutorial-php.cn

Entdecken Sie die einfache Anwendung von ui.route in AngularJs

高洛峰

Freigeben： 2016-12-06 15:46:54

Original

1303 Leute haben es durchsucht

HTML-Seitencode

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

Nach dem Login kopieren

Die ui.router.js-Datei, auf die verwiesen werden muss

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

Nach dem Login kopieren

app.js

UI-Router als Abhängigkeit der Webanwendung in das Hauptprogramm einfügen:

url: Die URL-Option gibt einen Status an für die Anwendung Die URL basiert auf dem Status, in dem der Benutzer die Anwendung durchsucht (die Adresse zeigt den Link an). Auf diese Weise kann beim Durchsuchen der Anwendung der Deep-Linking-Effekt erzielt werden.

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>

Nach dem Login kopieren

Es ist zu beachten, dass: ui.router $stateProvider verwendet und ngRoute $routeProvider verwendet.

$state.go

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

Der formale Parameter to ist vom Typ String und muss es sein verwendet.“ ^“ oder „.“ stellt einen relativen Pfad dar; Der Typ ist ein Objekt und die Felder umfassen Folgendes: „location“ ist vom Typ „bool“ und standardmäßig „true“, „inherit“ ist vom Typ „bool“ und standardmäßig „true“, „relativ“ ist ein Objekt und standardmäßig ist

$state.$current, „notify“ ist bool Typ und Standardwert ist „true“, reload ist vom Typ „bool“ und hat standardmäßig den Wert „false“

$state.go('photos.detail')

$state.go('^') to die vorherige Ebene, z. B. von photo.detail zu photo

$state.go('^.list') zum angrenzenden Zustand, z. B. von photo.detail zu photo.list

$state.go('^.detail.comment') zum Enkelstatus, z. B. von photo.detail zu photo.detial.comment