예제가 포함된 AngularJS ng-view

작성자 : 제임스 하트만 제임스 하트만
Hours 업데이트

⚡ 스마트 요약

AngularJS의 뷰는 페이지 이동 없이 콘텐츠를 교체할 수 있게 해 주므로, 단일 페이지 애플리케이션이 즉각적인 반응을 보이는 이유입니다. `ng-view` 디렉티브는 각 경로가 자체 템플릿과 컨트롤러로 대체할 영역을 지정합니다.

  • 🪟 단일 자리 표시자: ng-view를 포함하는 요소는 라우팅된 템플릿이 삽입되는 위치를 표시하며, 페이지당 이러한 요소는 하나만 허용됩니다.
  • 🔗 경로 페어링: 각 경로는 템플릿 URL과 컨트롤러 이름을 지정하여 해당 뷰에 대한 마크업과 로직을 연결합니다.
  • 📦 모듈 종속성: 뷰를 사용하려면 angular-route.js와 ngRoute 모듈에 대한 종속성을 선언해야 합니다.
  • 🎯 기본 보기: 그렇지 않으면 일치하지 않는 주소가 리디렉션되는데, 이것이 바로 첫 로드 시 뷰를 렌더링하는 부분입니다.
  • 🌐 서버 필요: 템플릿은 HTTP를 통해 가져오므로 페이지는 파일 시스템에서 여는 것이 아니라 제공해야 합니다.
  • ⚠️ 지원 상태: AngularJS는 2021년 12월 31일부로 지원이 종료되었으며 더 이상 보안 패치가 제공되지 않습니다.
자세히 보기

AngularJS ng-view 디렉티브

다음과 같은 잘 알려진 장소 Gmail 싱글 페이지 애플리케이션(SPA) 개념을 활용하세요. 사용자가 다른 페이지를 요청할 때 애플리케이션은 다른 페이지로 이동하지 않고 기존 페이지 내부에 새 페이지의 화면을 표시하여 사용자가 마치 페이지를 떠나지 않은 것처럼 느끼게 합니다. AngularJS에서도 뷰와 라우트를 사용하여 동일한 기능을 구현할 수 있습니다.

⚠️ 지원 관련 공지: AngularJS가 도달했습니다 2021년 12월 31일부로 생산 종료 더 이상 패치나 보안 수정 사항이 적용되지 않습니다. 아래 지침은 기존 AngularJS 1.x 애플리케이션을 유지 관리하는 데 유효하며, 최신 버전에서는 적용되지 않습니다. 모난 그에 상응하는 것은 <router-outlet>.

뷰란 무엇입니까?

뷰는 사용자에게 표시되는 콘텐츠입니다. 사용자가 보고 싶어하는 내용이 무엇이든, 애플리케이션의 해당 뷰가 표시됩니다.

뷰와 라우트를 결합하면 애플리케이션이 논리적인 뷰로 나뉘고 각 뷰가 특정 경로에 연결됩니다. 제어 장치이를 통해 애플리케이션을 더욱 쉽게 관리할 수 있습니다.

고객이 주문을 확인하고 새로운 주문을 할 수 있는 주문 애플리케이션을 가정해 보겠습니다. 아래 다이어그램은 이 애플리케이션이 단일 페이지 애플리케이션으로 구현되는 방식을 보여줍니다.

뷰란 무엇입니까?

"주문 보기" 페이지와 "새 주문" 페이지, 이렇게 두 개의 별도 웹페이지를 만드는 대신, AngularJS와 동일 페이지의 두 가지 보기 방식을 사용하며, 두 개의 참조 링크를 통해 접근할 수 있습니다. #show #new:

  • 탐색 MyApp/#show 페이지를 벗어나지 않고 주문 보기 화면을 표시합니다. 기존 페이지의 해당 부분만 새로 고쳐집니다.
  • 탐색 MyApp/#new 새 주문 보기에서도 동일한 작업을 수행합니다.

이처럼 애플리케이션을 뷰로 분리하면 관리가 용이하고 변경이 간편해지며, 각 뷰에는 해당 기능에 대한 비즈니스 로직을 담고 있는 컨트롤러가 있습니다.

AngularJS의 ng-view 지시문

The ngView 지령 보완 $route 일반적으로 현재 경로의 렌더링된 템플릿을 메인 레이아웃 파일에 포함시켜 서비스를 제공합니다. index.html.

현재 경로가 변경될 때마다 포함된 뷰도 그에 따라 변경됩니다. $route 페이지 자체를 다시 로드하지 않고 설정을 변경할 수 있습니다. 경로 각 사항은 별도로 다루어지며, 여기서는 여러 관점을 추가하는 데 중점을 둡니다.

아래 순서도는 전체 과정을 보여주며, 예시에서는 해당 과정을 단계별로 설명합니다.

AngularJS의 ng-view 지시문

AngularJS에서 ng-view를 구현하는 방법

이 예시에서는 사용자에게 두 가지 옵션을 제시합니다. 이벤트를 표시하거나 이벤트를 추가하는 것입니다. 이벤트 추가 이벤트 추가 화면을 보여주며, 이벤트 표시 화면에도 동일하게 적용됩니다.

단계 1) angular-route 파일을 스크립트 참조로 포함하세요. 이 파일은 여러 경로와 뷰를 사용하기 위해 필요하며, AngularJS 웹사이트에서 다운로드할 수 있습니다.

angular-route 파일을 포함하세요

단계 2) href 태그와 div 태그를 추가하세요.

  1. "새 이벤트 추가" 및 "이벤트 표시"로 연결되는 href 태그를 추가하세요.
  2. 내용을 담는 div를 추가하세요 ng-view 뷰 영역을 표시하는 지시문입니다. 두 링크 중 하나를 클릭할 때마다 일치하는 뷰가 해당 위치에 삽입됩니다.

href 태그와 div 태그를 추가하세요

단계 3) AngularJS 스크립트 태그에 라우팅 구성을 추가합니다.

  1. 사용자가 클릭하면 새로운 이벤트 링크, AngularJS 로드 add_event.html뷰에 마크업을 삽입하고 사용합니다. AddEventController 비즈니스 로직을 위해서입니다.
  2. 사용자가 클릭하면 디스플레이이벤트 링크가 로드됩니다. show_event.html 사용 ShowDisplayController.
  3. The otherwise 이 절은 사용자에게 표시되는 기본 보기를 설정하며, 여기서는 DisplayEvent입니다.

라우팅 구성

단계 4) 두 기능 모두에 대한 비즈니스 로직을 처리하는 컨트롤러를 추가하세요. 각 컨트롤러는 해당 뷰가 표시될 때 나타나는 메시지를 스코프 객체에 설정하기만 하면 됩니다.

컨트롤러 추가

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Event Registration</title>
    <script src="https://code.angularjs.org/1.8.3/angular.min.js"></script>
    <script src="https://code.angularjs.org/1.8.3/angular-route.js"></script>
</head>
<body ng-app="sampleApp">

<h1>Guru99 Global Event</h1>

<div class="container">
    <ul>
        <li><a href="#!/NewEvent">Add New Event</a></li>
        <li><a href="#!/DisplayEvent">Display Event</a></li>
    </ul>
    <div ng-view></div>
</div>

<script>
    var app = angular.module('sampleApp', ["ngRoute"]);

    app.config(function($routeProvider) {
        $routeProvider
            .when("/NewEvent", {
                templateUrl: "add_event.html",
                controller: "AddEventController"
            })
            .when("/DisplayEvent", {
                templateUrl: "show_event.html",
                controller: "ShowDisplayController"
            })
            .otherwise({
                redirectTo: '/DisplayEvent'
            });
    });

    app.controller("AddEventController", function($scope) {
        $scope.message = "This is to Add a new Event";
    });

    app.controller("ShowDisplayController", function($scope) {
        $scope.message = "This is to display an Event";
    });
</script>

</body>
</html>

⚠️ 원래 상품 설명에 세 가지 수정 사항이 있습니다. 먼저, 링크는 다음과 같습니다. #!NewEvent 경로가 다음과 같이 선언되는 동안 슬래시 없이 /NewEvent그래서 일치하는 항목이 없었습니다. AngularJS 1.6부터 기본 해시 접두사는 다음과 같습니다. !이는 올바른 주소를 만듭니다. #!/NewEvent — 느낌표 뒤에 슬래시(/)를 붙입니다. 둘째, ShowDisplayController 메시지를 "이벤트 표시입니다"로 설정했는데 단어가 빠졌습니다. 에 셋째, 주변 텍스트가 인용한 내용입니다. lib/bootstrap.js 상대 경로에서 로드되었는데, 해당 경로는 어디에도 연결되지 않고 전혀 사용되지 않으므로 제거되었습니다.

관련 기사

단계 5) 페이지를 만드세요 add_event.html show_event.html각각은 헤더와 해당 컨트롤러가 주입한 메시지를 표시하는 표현식을 포함합니다.

  • add_event.html

add_event.html

<h2>Add New Event</h2>

{{message}}
  • show_event.html

show_event.html

<h2>Show Event</h2>

{{message}}

코드가 성공적으로 실행되면 브라우저에 다음과 같은 출력이 표시됩니다.

출력:

ng-view 출력

ng-view 출력

일반적인 ng-view 오류 및 해결 방법

ng-view 오류의 거의 대부분은 디렉티브 자체의 문제라기보다는 모듈 연결, 주소 형식 또는 페이지 제공 방식에서 비롯됩니다.

  • 뷰 영역이 비어 있는 상태로 유지됩니다. 전에, ngRoute 해당 모듈이 종속성으로 나열되지 않았거나, angular-route.js 로드되지 않았습니다. 둘 다 필요하며 스크립트는 그 뒤에 와야 합니다. angular.min.js.
  • 링크를 클릭하면 주소는 바뀌지만 아무것도 표시되지 않습니다. href 속성이 경로와 일치하지 않습니다. AngularJS 1.6부터는 주소에 다음이 필요합니다. #!/Route; 1.5 버전을 위해 작성된 이전 코드 사용 #/Route.
  • CORS 오류로 인해 템플릿 로드가 실패합니다. 페이지가 디스크에서 직접 열렸습니다. HTTP를 통해 제공하세요. templateUrl AJAX 요청으로 가져오는 경우 파일 프로토콜이 차단됩니다.
  • 항상 마지막 화면만 표시됩니다. 두 개 이상의 요소에 `ng-view`가 지정될 수 있습니다. AngularJS는 페이지당 하나의 뷰 영역만 허용합니다.
  • 첫 로딩 시 아무것도 표시되지 않습니다. 아니 otherwise 해당 절이 구성되어 있으므로 빈 주소는 어떤 경로와도 일치하지 않습니다.

자주 묻는 질문

아니요. ngRoute는 페이지당 하나의 뷰 영역만 지원합니다. 여러 개의 명명된 영역을 동시에 사용하려면 ui-view를 제공하고 중첩 뷰 및 형제 뷰를 지원하는 ui-router 라이브러리를 사용하세요.

HTML5 모드를 활성화하려면 $locationProvider.html5Mode(true) 그리고 base 태그를 추가하세요. 그러면 서버는 알 수 없는 경로를 index.html로 다시 작성해야 합니다. 그렇지 않으면 새로 고침 시 404 오류가 발생합니다.

크게. AI 툴은 라우팅 테이블을 Angular Routes 배열로 변환하고 ng-view를 router-outlet으로 교체합니다. 하지만 컨트롤러는 여전히 수동으로 컴포넌트로 다시 작성해야 합니다.

AI 비서는 흔히 발생하는 세 가지 원인, 즉 누락된 ngRoute 종속성, 경로와 일치하지 않는 해시 접두사, 브라우저가 가져올 수 없는 템플릿 경로를 신속하게 확인합니다.

네. 추가해 주세요. resolve 해당 경로를 차단합니다. AngularJS는 컨트롤러를 인스턴스화하기 전에 이러한 프로미스가 완료될 때까지 기다리므로 데이터가 도착하는 동안 뷰가 비어 있는 상태로 깜빡이는 것을 방지합니다.

이 게시물을 요약하면 다음과 같습니다.