1
사용자가 모두 주 템플릿을 사용하는 섹션 (대시 보드 및 프로젝트 세부 정보 등) 사이를 탐색하면 전체 템플릿이 다시로드됩니다. 중첩 된 "주"및 "appbar"보기 만 변경되는 것을보고 싶습니다.기본 u 템플릿 상태가 상태 변경마다 새로 고침되지 않도록 앵글 라우터 상태를 어떻게 설정합니까?
이 예제 앱에서는 'mainTemplate'의 링크가 다시로드되지 않아야합니다. css 클래스 'view-fade-in'은 임베디드 스 니펫에서 작동하지 않지만 jsfiddle 링크에 있습니다. 대시 보드에서 프로젝트로 이동하거나 그 반대로 이동하면 모든 것이 사라집니다. 사라져야하는 유일한 것은 앱 바 및 주요 콘텐츠입니다.
즉, 사용자가 '공지'상태에서 '대시 보드'상태로 전환 할 때 mainTemplate이 다시로드되지만 사용자가 '대시 보드'상태에서 '프로젝트. 주 재로드하지 않아야 mainTemplate를 사용하고 있습니다.
현재 바이올린 수 있습니다 : 당신은 "추상적"상태를 찾고 무엇 http://jsfiddle.net/webmandman/3wb8a46o/3/
(function() {
'use strict';
var mainTemplate = '<div class="mainTemplate"><a ui-sref="dashboard">Dashboard</a> - <a ui-sref="project.details">Project Details</a> - <a ui-sref="announcement">Announcement</a><div class="view-fade-in" ui-view="appbar"></div><div class="view-fade-in" ui-view="main"></div></div>';
var fullscreenTemplate = '<div class="fullscreenTemplate"><div class="view-fade-in" ui-view="main"></div></div>';
angular
.module('ExampleApp', ['ui.router','ngAnimate'])
.controller('exampleAppMainController', function() {})
.config(['$stateProvider', '$locationProvider', '$urlRouterProvider',
function($stateProvider, $locationProvider, $urlRouterProvider) {
$stateProvider
.state("dashboard", {
url: '/',
views: {
'@': {
template: mainTemplate
},
'[email protected]': {
template: 'Dashboard App Bar Content GOES HERE'
},
'[email protected]': {
template: 'Dashboard Main Content GOES HERE'
}
}
})
.state("project", {
views: {
'@': {
template: mainTemplate
},
'[email protected]': {
template: 'Project App Bar'
}
},
abstract: true
})
.state("project.details", {
url: '/project/:projectid/:typeid/:directoryid',
views: {
'[email protected]': {
template: 'Project Details'
}
},
params: {
typeid: {
squash: true,
value: null
},
directoryid: {
squash: true,
value: null
}
}
})
.state("announcement", {
url: '/announcement',
views: {
'@': {
template: fullscreenTemplate
},
'[email protected]': {
template: 'Announcement To Be Made! <a ui-sref="dashboard">Back to Dashboard</a>'
}
}
});
$urlRouterProvider.otherwise('/');
}
]);
})();/*** NG-VIEW Animation ******************************/
.body {margin:25px;color:white;}
.body a {color:black;}
.mainTemplate {background-color:hotpink;}
.fullscreenTemplate {background-color:darkorange;}
.view-fade-in.ng-enter {
transition: all 3s ease;
-webkit-transition: all 3s ease;
-moz-transition: all 3s ease;
-o-transition: all 3s ease;
position: relative;
opacity: 0;
}
.view-fade-in.ng-enter.ng-enter-active {
opacity: 1;
}
.view-fade-in.ng-leave.ng-leave-active {
opacity: 1;
}
.view-fade-in.ng-leave {
opacity: 0;
}<!DOCTYPE html>
<html lang="en" class="no-js" ng-app="ExampleApp">
<head>
<title>Example App - Routing and Nested Views</title>
</head>
<body class="body" layout="column">
<div class="view-fade-in" layout="column" ui-view></div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.4.2/angular-ui-router.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.0/angular-animate.min.js"></script>
</body>
</html>
Canastro, 나는 그것을 시험해 보았다. 그러나 나는 그것이 작용할 수 없었기 때문에 (오류 : 각도 오류가 발생할 수있다. 문자열 템플릿에서 resolveAs를 만들지 않음) 포기하고 도움을 청했습니다. 정말 고맙습니다. 말된다. 제가 놓친 부분은 루트 추상 상태의 url 속성입니다. – webmandman