집 > 기사 > 웹 프론트엔드 > AngularJs에서 ui.route의 간단한 애플리케이션 살펴보기

AngularJs에서 ui.route의 간단한 애플리케이션 살펴보기

高洛峰원래의: 2016-12-06 15:46:541258검색

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를 기본 프로그램에 삽입합니다.

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])

공식 매개변수는 문자열 유형이며 다음과 같아야 합니다. "^" 또는 "."는 상대 경로를 나타냅니다.

형식 매개 변수 toParams는 null이 가능하고 유형은 개체입니다. 유형은 객체이고 필드에는 다음이 포함됩니다. 위치는 부울 유형이고 기본값은 true, 상속은 부울 유형이고 기본값은 true, 상대는 객체이고 기본값은

$state.$current, 알림은 부울입니다. 유형이고 기본값은 true이고, reload는 부울 유형이고 기본값은 false입니다

$state.go('photos.detail')

$state.go('^') 이전 레벨(예: photo.detail에서 photo

$state.go('^.list')에서 인접 상태로(예: photo.detail에서 photo.list

$state.go('^.detail.comment')를 Grandchild 상태로(예: photo.detail에서 photo.detial.comment

성명：

이전 기사：Nodejs의 DNS 캐싱 문제에 대한 간략한 분석다음 기사：Nodejs의 DNS 캐싱 문제에 대한 간략한 분석

AngularJs에서 ui.route의 간단한 애플리케이션 살펴보기

관련 기사