AngularJS - 단일 템플릿 내 다중 ng 뷰
AngularJS를 사용하여 다이내믹한 웹 앱을 구축하고 있습니다.여러 개를 가질 수 있나요?ng-view사용할 수 있습니까?
하나만 드셔도 됩니다.ng-view.
콘텐츠는 여러 가지 방법으로 변경할 수 있습니다.또는 routeProvider를 통해 다른 컨트롤러와 템플릿을 매핑할 수 있습니다.
UI-Router는 다음을 지원하는 프로젝트입니다.https://github.com/angular-ui/ui-router의 기능 중 하나는 여러 개의 명명된 뷰입니다.
UI-Router에는 많은 기능이 있으므로 고급 앱을 사용하는 것이 좋습니다.
여기서 여러 개의 명명된 보기에 대한 문서를 확인하십시오.
난 네가 싱글을 갖는 것만으로 이룰 수 있을 것 같아요.ng-view메인 템플릿에서는,ng-include하위 뷰에 대한 섹션을 선택한 다음 메인 컨트롤러에서 각 하위 템플릿에 대한 모델 특성을 정의합니다.자동으로 바인드되도록 합니다.ng-include를 참조해 주세요.이것은 여러 개의 데이터 전송이 있는 것과 같습니다.ng-view
에 기재되어 있는 예를 확인할 수 있습니다.ng-include 문서화
이 예에서는 드롭다운목록에서 템플릿을 변경하면 내용이 변경됩니다.여기에서는 1개의 메인 시스템이 있다고 가정합니다.ng-view또한 드롭다운을 선택하여 하위 내용을 수동으로 선택하는 대신 기본 보기가 로드될 때와 같이 선택합니다.
통상의 사용ng-viewmodule은 여러 개의 다이내믹템플릿을 가질 수 없습니다.
단, 이 프로젝트를 통해 이 작업을 수행할 수 있습니다(찾아보기).ui-router).
여러 뷰 또는 중첩 뷰를 가질 수 있습니다.하지만 NG뷰는 아니야.
angular의 프라이머리 라우팅 모듈은 여러 뷰를 지원하지 않습니다.단, UI 라우터를 사용할 수 있습니다.이것은 Github, angular-ui/ui-module, https://github.com/angular-ui/ui-router에서 구할 수 있는 서드파티 모듈입니다.또한 현재 ngRouter(ngNewRouter)의 새로운 버전이 개발 중입니다.지금은 안정적이지 않습니다.따라서 ui-router를 사용한 간단한 시작 예를 제시하겠습니다.뷰 이름을 지정하고 뷰 렌더링에 사용할 템플릿 및 컨트롤러를 지정할 수 있습니다.$stateProvider를 사용하여 특정 상태의 뷰 플레이스 홀더를 렌더링하는 방법을 지정해야 합니다.
<body ng-app="main">
<script type="text/javascript">
angular.module('main', ['ui.router'])
.config(['$locationProvider', '$stateProvider', function ($locationProvider, $stateProvider) {
$stateProvider
.state('home', {
url: '/',
views: {
'header': {
templateUrl: '/app/header.html'
},
'content': {
templateUrl: '/app/content.html'
}
}
});
}]);
</script>
<a ui-sref="home">home</a>
<div ui-view="header">header</div>
<div ui-view="content">content</div>
<div ui-view="bottom">footer</div>
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/angular-ui-router/release/angular-ui-router.js">
</body>
이 샘플에는 angularjs 및 angular-ui.router를 참조해야 합니다.
$ bower install angular-ui-router
여러 개의 ng뷰를 가질 수 없습니다.다음은 요건을 충족한 사용 사례입니다.모델 대화 상자에 탭 형식의 동작을 포함시키고 싶었습니다.하이퍼링크가 있는 탭을 클릭하면 라우터 링크가 호출됩니다.탭 버튼과 css를 사용하여 해결했습니다.사용자가 탭을 클릭해도 실제로는 하이퍼링크를 호출하지 않고 항상 ng-router를 호출합니다.사용자가 탭을 클릭하면 메서드가 호출되며 여기서 html을 동적으로 로드합니다.탭 클릭 시 기능은 다음과 같은 기능입니다.
self.submit = function(form) {
$templateRequest('resources/items/employee/test_template.html').then(function(template){
var compiledeHTML = $compile(template)($scope);
$("#d").replaceWith(compiledeHTML);
});
사용자 $templateRequest.test_template.html 페이지에서 html 콘텐츠를 추가합니다.이 html 콘텐츠는 컨트롤러에 바인드됩니다.
언급URL : https://stackoverflow.com/questions/17544558/angularjs-multiple-ng-view-in-single-template
'programing' 카테고리의 다른 글
| 데이터베이스에서 django 모델을 생성할 수 있습니까? (0) | 2023.04.04 |
|---|---|
| 페이지가 상위 페이지인지 하위 페이지인지 확인하시겠습니까? (0) | 2023.04.04 |
| WordPress Admin / Backend에서 기본 페이지 순서 변경 (0) | 2023.04.04 |
| ReactJs에서 문서를 작성하는 방법 (0) | 2023.04.04 |
| 부트스트랩 네비게이션 바를 WordPress 메뉴로 변환 (0) | 2023.04.04 |