AngularJS-단일 템플릿의 다중 ng-view

132

AngularJS를 사용하여 동적 웹 앱을 작성 중입니다. ng-view단일 템플릿에 여러 개를 가질 수 있습니까?

angularjs ng-view

— 자 이람
소스

2

여전히 버그가있는 풀 요청이있는 것 같습니다 : github.com/angular/angular.js/pull/1198

— Alp

4

Jan Varwig는 Angular에서 지시문의 역할에 대해 씁니다. 이 질문에 대한 답변이 아니라 어떤 경우에 자신의 아이디어가 좋은 대안이 될 수 있습니다 jan.varwig.org/archive/angularjs-views-vs-directives/...

— 주하 Palomäki

앵귤러 튜토리얼을 겪고있는 것과 똑같은 질문을했는데, 그들은 이것을 명확하게하지 않고, 꽤 깊은 개념처럼 보입니다 ..

— qwwqwwq

100

하나만 가질 수 있습니다 ng-view.

여러 가지 방법으로 내용을 변경할 수 있습니다 ng-include, ng-switch또는 routeProvider을 통해 매핑 다른 컨트롤러 및 템플릿.

— 파 시네
소스

1

매핑 컨트롤러와 템플릿이 전체 ng-view 요소를 대체합니다.

— zx1986

9

위젯의 내용을 동적으로 변경하는 것은 어떻습니까? 위젯에 대한보기와 위젯에 대한 제어기 및 위젯에 대한 모델을 작성하지 않겠습니까?

— Ray Suelzer

보기를 사용하는 것이 좋습니다? 그것으로 된 div를 정의 할 좋은 것은 아닙니다 ng-show및 ng-hide변수를 사용하여 가시성을 제어 할 수? 때로는 여러 구성 요소를 숨기거나 표시하고 싶을 수도 있습니다.

— SomethingSomething

39

UI-Router 는 다음을 도와 줄 수있는 프로젝트입니다. https://github.com/angular-ui/ui-router 그 기능 중 하나는 다중 명명 된 뷰입니다

UI-Router에는 많은 기능이 있으며 고급 앱에서 작업하는 경우 사용하는 것이 좋습니다.

여기서 다중 명명 된 뷰의 설명서를 확인 하십시오 .

— 모르테 자 지에
소스

6

불행하게도 ui-router readme의 말 : 참고 : UI- 라우터는 현재 개발 중입니다. 따라서이 라이브러리는 잘 테스트되었지만 API가 변경 될 수 있습니다. 변경 로그를 따르고 그에 따라 사용법을 업데이트하는 것이 편한 경우에만 프로덕션 응용 프로그램에서 사용하는 것이 좋습니다.

— trainoasis

1

@trainoasis 여러 프로젝트에 사용되었으며 '매우 안정적'이며 지금까지 API 변경에 대해 아무런 문제가 없었습니다. 실제로 API의 주요 변경 사항을 기억하지 못합니다.

— Morteza Ziyae

19

나는 당신이 단 하나를 갖는 것으로 그것을 달성 할 수 있다고 생각합니다 ng-view. 기본 템플릿에는 ng-include하위 뷰에 대한 섹션 이있을 수 있으며 기본 컨트롤러에서 각 하위 템플릿에 대한 모델 속성을 정의합니다. ng-include섹션에 자동으로 바인딩됩니다 . 이것은 여러 개를 갖는 것과 같습니다ng-view

문서에 주어진 예제를 확인할 수 있습니다ng-include

이 예제에서는 드롭 다운 목록에서 템플릿을 변경하면 내용이 변경됩니다. 여기에는 하나의 기본이 ng-view있고 드롭 다운을 선택하여 하위 컨텐츠를 수동으로 선택하는 대신 기본보기가로드 될 때와 같이 수행 한다고 가정하십시오 .

— 테크
소스

2

UI-Router와 같은 솔루션이 없으면 ng-include가 실제로 설명한 대안입니다. ng-include가 달성 할 수없는 것은 URL (상태) 기반 다중 뷰이며 $ route는 현재 URL을 기반으로 다른 뷰를 동적으로 렌더링 할 수 없습니다. ng-include 설명서 의 예제와 같이 컨트롤러에서 사용자 지정 논리를 사용하여 Angular의 장점을 뒤엎을 수는 있지만 바람직한 응용 프로그램 아키텍처 패턴은 아니지만 UI- 라우터는 올바른 유형의 솔루션입니다.

— Yiling

@Yiling 주석에 대한 플러스. ng-include를 사용하는 것이 해결 방법입니다.

— Farshid Saberi

13

일반 ng-view모듈을 사용하면 둘 이상의 동적 템플릿을 가질 수 없습니다.

그러나이 프로젝트를 사용하면 그렇게 할 수 있습니다 (를 찾으십시오 ui-router).

— 우박
소스

3

angular-ui는 (가까운) 미래에 좋은 선택처럼 보이지만 여전히 프로덕션 용도로는 매우 불안정한 것 같습니다

— David Barreto

8

여러 개의 또는 중첩 된 뷰를 가질 수 있습니다. 그러나 ng-view가 아닙니다.

각도의 기본 라우팅 모듈은 여러보기를 지원하지 않습니다. 그러나 ui-router를 사용할 수 있습니다. 이것은 Github, angular-ui / ui-router, 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

— 파 시드 사 베리
소스

당신이 Farshid 감사합니다 감사합니다! 그것은 언급해야한다 각 - UI / UI 라우터 Github의 저장소 github.com/angular-ui/ui-router 내가 모듈 있어요

— totallytotallyamazing

왜 그렇게해야할지 모르겠습니다. 왜 머리글 / 바닥 글을 포함하고 내용을 ng-view하지 않습니까?

— user441521 2016 년

예를 들어 파일이 호스팅되면 ng-include가 작동합니다. nodejs에. 로컬 디렉토리로 작업하는 경우 도메인 간 오류가 발생합니다.

— Sid

0

여러 개의 ng-view를 가질 수 없습니다. 아래는 요구 사항을 해결 한 유스 케이스입니다. 모델 대화 상자에서 탭 동작을 원했습니다. 라우터 링크를 호출하는 하이퍼 링크가있는 탭을 클릭하면 문제가 발생했습니다. 탭에 버튼과 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 컨텐츠는 컨트롤러에 바인딩됩니다.

— 이슬람 anwer
소스