suchen

Heim  >  Artikel  >  Web-Frontend  >  Entdecken Sie die einfache Anwendung von ui.route in AngularJs

Entdecken Sie die einfache Anwendung von ui.route in AngularJs

高洛峰
高洛峰Original
2016-12-06 15:46:541294Durchsuche

HTML-Seitencode

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

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

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

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>

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


Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Eine kurze Analyse der DNS-Caching-Probleme unter NodejsNächster Artikel：Eine kurze Analyse der DNS-Caching-Probleme unter Nodejs

In Verbindung stehende Artikel

Mehr sehen