Angular UI-Router "레이아웃" 상태를 만드는 방법
다음과 같은 HTML 파일을 지정합니다.
<html>
<header ui-view="header"></header>
<div class="main" ui-view></div>
<footer ui-view="footer"></footer>
</html>
머리글을 머리글 템플릿으로 채우고 바닥글을 바닥글 템플릿으로 채운 레이아웃 상태를 만든 다음 자식 상태가 빈 UI 보기를 채우도록 허용하는 방법은 무엇입니까?
빈 ui뷰는 ui-view="main"과 같은 이름도 붙일 수 있을 것 같습니다.
실제로 헤더와 바닥글은 스태틱템플릿이지만 다이내믹 기능을 추가해야 할 경우 컨트롤러를 추가할 수 있습니다.루트가 '이기 때문에 헤더와 바닥글은 기본적으로 포함되어 있습니다.따라서 테스트해 주세요.
app.config(['$stateProvider', function($stateProvider){
$stateProvider
.state('root',{
url: '',
abstract: true,
views: {
'header': {
templateUrl: 'header.html',
controller: 'HeaderCtrl'
},
'footer':{
templateUrl: 'footer.html',
controller: 'FooterCtrl'
}
}
})
.state('root.home', {
url: '/',
views: {
'container@': {
templateUrl: 'homePage.html'
}
}
})
.state('root.other', {
url: '/other',
views: {
'container@': {
templateUrl: 'other.html'
}
}
});
}]);
편집: 뷰를 설정하는 최적의 장소는 index.html과 같은 코드여야 합니다.
<header>
<div ui-view="header"></div>
</header>
<div ui-view="container">
</div>
<footer id="mainFooter" ui-view="footer">
</footer>
한 가지 방법은 글로벌 'root' 상태를 만드는 것입니다.그래서, 모든 주들은 그 아이가 될 것입니다.예를 들어 root.pages, root.pages.edit, root.설정 등그런 다음 머리글 및 바닥글에 대한 기본 템플릿을 제공할 수 있습니다.
제가 개인적으로 사용하는 또 다른 접근법은ng-includeheader 및 footer를 지정합니다.
<body ng-controller="AppCtrl">
<div id="header" ng-include="'header.tpl.html'"></div>
<div class="main_container" ui-view>
</div>
</body>
그런데 메인 AppCtrl의 자녀인 header.tpl.html에서 별도의 컨트롤러를 사용합니다.
<div id="header" ng-controller="HeaderCtrl"> ....
사실 그렇게 하는 아주 쉬운 방법이 있다.
1. 레이아웃 상태를 만듭니다.
$stateProvider
.state('master', {
abstract: true,
views: {
layout: {
templateUrl: '/layouts/master.html',
}
}
});
2. 레이아웃 내에서 이름 없는 뷰 상태를 사용합니다.
<!-- layouts/master.html -->
<div ui-view></div>
3. 뷰 상태를 만듭니다.
$stateProvider
.state('home', {
url: '/',
templateUrl: '/views/home.html',
parent: 'master',
});
4. 명명된 레이아웃 상태를 루트 상태로 사용한다.
<!-- home.html -->
<body ui-view="layout"></body>
Jack.the.ripper의 답변을 바탕으로 이 솔루션을 만들었습니다.
Casus: 실제로 2개의 레이아웃을 원하는 약간의 변형이 있습니다.한 명은 퍼블릭이고 한 명은 프라이빗입니다.Meteor with Blaze and Iron Router에는 특정 루트에 사용할 마스터템플릿을 정의할 수 있는 훌륭한 솔루션이 있습니다.잭 덕분에 셋업을 할 수 있게 되었습니다!
메모: 코드는 Jade와 Coffee로 Meteor+Angular 프로젝트입니다.http://js2.coffee/를 사용하여 Javascript로 변환합니다.
# the ROUTER part
#
angular.module( 'myApp' ).config(
( $urlRouterProvider, $stateProvider, $locationProvider ) ->
$locationProvider.html5Mode true
$stateProvider
.state( 'private',
url: ''
abstract: true
views:
'app':
templateUrl: 'client/views/layouts/privateLayout.html'
)
.state( 'public',
url: ''
abstract: true
views:
'app':
templateUrl: 'client/views/layouts/publicLayout.html'
)
.state( 'private.home',
url: '/'
views:
"container@private":
templateUrl: 'client/views/home/home.html'
)
.state( 'public.login',
url: '/login'
views:
"container@public":
templateUrl: 'client/views/session/login.html'
)
$urlRouterProvider.otherwise '/'
)
이것은 앱 뷰가 정의되어 라우터에 정의되어 있는 추상 상태를 이용하는 인덱스 파일입니다.
head
meta(name="viewport" content="width=device-width, initial-scale=1")
base(href="/")
body(layout="column")
div(ui-view="app" layout="column" flex)
그런 다음 컨테이너 뷰와 함께 개인 레이아웃을 선택합니다.
div(layout="column" flex)
div(ng-controller="AppCtrl" layout="row" flex)
//- some private Layout stuff happening here....
md-content(flex layout-padding)
div(ui-view="container" layout="column")
마지막으로 컨테이너 뷰가 있는 공개 레이아웃
div.public-layout(layout="column" flex)
div(ui-view="container" layout="column" flex)
이 설정에서는 이 루트의 뷰에서 뷰 container@public을 사용해야 한다고 명시함으로써 추상적인 퍼블릭레이아웃을 사용하도록 로그인 페이지를 설정할 수 있습니다.즉, Public 뷰에서는 뷰 Container를 사용합니다.이 뷰에서 login.html을 로드합니다.
홈 페이지도 마찬가지입니다.이 페이지는 private 뷰의 Container 뷰를 의미하는 container@private를 로드합니다.
이건 마법처럼 작동하는 것 같아.
잭 씨, 그리고 "Angular UI Router - Nested States with multiple layouts"에 대한 답변의 작성자이기도 합니다.이 답변은 최종 솔루션에 도달하는 데 도움이 되었습니다.
건배.
잭과 비슷합니다.더 리퍼의 방식대로 할 수도 있어
app.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('root', {
/* The Root State */
views: {
'': {
abstract: true,
templateUrl: 'master.html',
controller: 'mainController'
},
'header@root': {
templateUrl: 'header.html',
controller: 'headerController',
},
'footer@root': {
templateUrl: 'footer.html',
controller: 'footerController'
},
},
})
.state('root.index', {
/* The Index State */
url: '/',
views: {
'content': {
templateUrl: 'index.html',
controller: 'indexController'
}
},
.state('root.other', {
/* The Other State */
url: '/',
views: {
'content': {
templateUrl: 'other.html',
controller: 'otherController'
}
},
});
});
저희 회사에서는index.html, 그럼 이제 만 할게요.<ui-view></ui-view>
master.html
<div ui-view="header"></div>
<div ui-view="content"></div>
<div ui-view="footer"></div>
는 별도의 없기 또, 「」의 「컨트롤러를 작성하기 .mainController글로벌 컨트롤러가 됩니다.
머리글과 바닥글에 루트를 전혀 사용하지 않고 1.5x의 Angular 컴포넌트를 사용할 수 있게 되었습니다.
그것은 훨씬 더 유연하고 당신은 루트를 다룰 필요가 없다.어떤 것이든 ngInclude든 상관없습니다.자세한 것은, https://stackoverflow.com/a/41093339/2416007, 를 참조해 주세요.그러나 기본적으로는 다음과 같습니다.
1. 컴포넌트 작성
(function () {
'use strict';
angular
.module('layout')
.component('layoutHeader', {
templateUrl: 'layout/header.html',
bindings: {},
controller: Controller
});
Controller.$inject = [];
function Controller() {
var ctrl = this;
initialize();
////////////////////
function initialize(){
}
}
}());
2. index.html 페이지 등에 추가합니다.
<layout-header></layout-header>
3. 바닥글도 마찬가지
<layout-footer></layout-footer>
4. 본문의 결과는
<layout-header></layout-header>
<main ui-view></main>
<layout-footer></layout-footer>
언급URL : https://stackoverflow.com/questions/22104893/angular-ui-router-how-to-create-a-layout-state
'prosource' 카테고리의 다른 글
| React + Redux에서 중첩된 컴포넌트의 소품 업데이트를 최적화하는 방법 (0) | 2023.03.14 |
|---|---|
| Reactjs를 사용하여 스크롤 위치 가져오기 (0) | 2023.03.14 |
| JDBC 문을 통해 "DDL 실행 오류 "변경 테이블 이벤트 드롭 외부 키 FKg0mkvgsqn8584qoql6a2rxheq" 수정 방법 (0) | 2023.03.09 |
| SpringBoot 통합 테스트에서 TestContainers로 데이터베이스 채우기 (0) | 2023.03.09 |
| WordPress는 로그인한 사용자에게 개인 투고를 표시합니다. 이 기능을 해제하려면 어떻게 해야 합니까? (0) | 2023.03.09 |