AngularJS ng-include: HTML 파일 포함 예시
제임스 하트만
⚡ 스마트 요약
AngularJS의 `ng-include`는 외부 HTML 조각을 가져와 컴파일한 후 메인 페이지에 삽입합니다. 따라서 테이블, 헤더, 푸터와 같은 공유 마크업은 하나의 재사용 가능한 부분 파일에 저장됩니다.
기본적으로 HTML은 다른 파일의 클라이언트측 코드를 포함하는 기능을 제공하지 않습니다. 일반적으로 모든 프로그래밍 언어에서는 모든 애플리케이션의 다양한 파일에 기능을 배포하는 것이 좋습니다.
예를 들어, 숫자 연산에 대한 논리가 있다면 일반적으로 그 기능을 하나의 별도 파일에 정의하고 싶을 것입니다. 그 별도 파일은 그 파일을 포함하기만 하면 여러 애플리케이션에서 재사용될 수 있습니다.
이것은 일반적으로 다음과 같은 개념입니다. 문 포함 다음에서 이용 가능합니다. 프로그래밍 언어 .Net과 같은 것들 Java.
이 튜토리얼에서는 파일(외부 파일을 포함하는 파일)을 다루는 다른 방법들을 살펴봅니다. HTML 해당 코드(또는 코드)는 메인 HTML 파일에 포함될 수 있습니다.
클라이언트 측 포함 사항
HTML 코드를 포함하는 가장 일반적인 방법 중 하나는 다음과 같습니다. Java스크립트. JavaScript HTML 페이지의 내용을 즉석에서 조작하는 데 사용할 수 있는 프로그래밍 언어입니다. 따라서, Java스크립트를 사용하여 다른 파일의 코드를 포함할 수도 있습니다.
아래 단계는 이를 달성하는 방법을 보여줍니다.
단계 1) Sub.html이라는 파일을 정의하고 해당 파일에 다음 코드를 추가합니다.
<div> This is an included file </div>
단계 2) 기본 애플리케이션 파일인 Sample.html이라는 파일을 만들고 아래 코드 조각을 추가합니다.
다음은 아래 코드에 대해 주목해야 할 주요 측면입니다.
- body 태그에는 Content라는 ID를 갖는 div 태그가 있습니다. 외부 파일 'Sub.html'의 코드가 삽입되는 곳입니다.
- jQuery 스크립트에 대한 참조가 있습니다. jQuery는 Python 위에 구축된 스크립팅 언어입니다. JavaDOM 조작을 더욱 쉽게 만들어주는 스크립트입니다.
- . Java스크립트 함수에는 '$(“#Content”).load(“Sub.html”);'라는 구문이 있는데, 이 구문은 Sub.html 파일의 코드를 ID가 Content인 div 태그에 삽입합니다.
<html> <head> <script src="jquery.js"></script> <script> $(function(){ $("#Content").load("Sub.html"); }); </script> </head> <body> <div id="Content"></div> </body> </html>
서버 사이드 포함
서버 측 포함은 사이트 전체에 공통 코드 부분을 포함하는 데에도 사용할 수 있습니다. 이는 일반적으로 HTML 문서의 아래 부분에 콘텐츠를 포함하기 위해 수행됩니다.
- 페이지 헤더
- 페이지 바닥글
- 탐색 메뉴.
웹 서버가 서버 측 포함(Server Side Include, SIDE) 파일을 인식하려면 파일 이름에 특수한 확장자가 있어야 합니다. 웹 서버에서 일반적으로 허용되는 확장자는 .shtml, .stm, .shtm, .cgi 등입니다.
콘텐츠를 포함하는 데 사용되는 지시어는 "include 지시어"입니다. include 지시어의 예는 아래와 같습니다.
<!--#include virtual="navigation.cgi" -->
- 위 지시문을 사용하면 한 문서의 내용을 다른 문서에 포함할 수 있습니다.
- 코드 위의 "가상" 명령은 애플리케이션의 도메인 루트를 기준으로 대상을 지정하는 데 사용됩니다.
- 또한, virtual 매개변수에는 file 매개변수도 사용할 수 있습니다. "file" 매개변수는 현재 파일의 디렉터리에 상대적인 경로를 지정해야 할 때 사용됩니다.
참고 :
virtual 매개변수는 포함되어야 하는 파일(HTML 페이지, 텍스트 파일, 스크립트 등)을 지정하는 데 사용됩니다. 웹 서버 프로세스에 파일을 읽거나 스크립트를 실행할 수 있는 액세스 권한이 없으면 include 명령이 실패합니다. '가상' 단어는 include 지시문에 배치해야 하는 키워드입니다.
AngularJS에 HTML 파일을 포함하는 방법
AngularJS와 `ng-include`를 사용하여 다른 AngularJS 파일의 기능을 포함하는 기능을 제공합니다. 지령.
"ng-include 지시문"의 주요 목적은 외부 HTML 조각을 가져와 컴파일하고 메인 AngularJS 애플리케이션에 포함하는 것입니다.
버전 참고: AngularJS 1.x 버전은 2021년 12월 31일부로 장기 지원(LTS)이 종료되었으며, 프레임워크 개발팀은 다음과 같이 밝혔습니다. AngularJS 지원이 공식적으로 종료되었습니다. 2022년 1월에 게시되었으므로 이후 릴리스나 보안 패치는 없습니다. 아래의 모든 단계와 코드 블록은 기록 참조용으로 게시된 그대로 유지됩니다. 최신 Angular에는 직접적인 대체 기능이 없습니다. 마크업은 컴포넌트로 구성되며, 런타임에 선택된 프래그먼트가 렌더링됩니다. ng-컨테이너 및 ngComponentOutlet.
아래 코드베이스를 살펴보고 AngularJS를 사용하여 이를 구현하는 방법을 설명하겠습니다.
단계 1) Table.html이라는 파일에 아래 코드를 작성해 보겠습니다. 이는 ng-include 지시어를 사용하여 기본 애플리케이션 파일에 삽입될 파일입니다.
아래 코드 조각은 "tutorial"이라는 스코프 변수가 있다고 가정합니다. 그런 다음 해당 변수를 사용합니다. ng-반복 이 지시문은 "tutorial" 변수에 있는 각 주제를 순회하며 'Name'과 ' 값을 표시합니다.Descript이온의 키-값 쌍.
<table>
<tr ng-repeat="Topic in tutorial">
<td>{{ Topic.Name }}</td>
<td>{{ Topic.Description }}</td>
</tr>
</table>
단계 2) Main.html이라는 파일에 아래 코드를 작성해 봅시다. 이것은 다음과 같은 기능을 가진 간단한 AngularJS 애플리케이션입니다.
- 외부 파일 'Table.html'에 코드를 삽입하려면 "ng-include 지시어"를 사용하세요. 아래 코드에서 해당 명령문은 굵게 강조 표시되었습니다. 그래서 div 태그 ' ' 'Table.html' 파일의 전체 코드로 대체됩니다.
- . 제어 장치"tutorial"이라는 변수가 $scope 객체의 일부로 생성됩니다. 이 변수에는 키-값 쌍의 목록이 포함됩니다.
이 예에서 키 값 쌍은 다음과 같습니다.
- 이름 – 컨트롤러, 모델, 지시문과 같은 주제의 이름을 나타냅니다.
- Description – 이것은 각 주제에 대한 설명을 제공합니다
튜토리얼 변수는 'Table.html' 파일에서도 액세스됩니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Event Registration</title>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
</head>
<body ng-app="sampleApp">
<div ng-controller="AngularController">
<h3> Guru99 Global Event</h3>
<div ng-include="'Table.html'"></div>
</div>
<script>
var sampleApp = angular.module('sampleApp',[]);
sampleApp.controller('AngularController', function($scope) {
$scope.tutorial =[
{Name: "Controllers" , Description : "Controllers in action"},
{Name: "Models" , Description : "Models and binding data"},
{Name: "Directives" , Description : "Flexibility of Directives"}
];
});
</script>
</body>
</html>
위 코드를 실행하면 다음과 같은 출력이 나옵니다.
산출:
아래 캡처 이미지는 렌더링된 결과를 보여줍니다. 브라우저 탭에는 "이벤트 등록"이라는 제목이 표시되고, 제목은 삽입된 테이블 위에 위치하며, 세 행은 부분 템플릿을 통해 Main.html의 튜토리얼 배열에서 가져옵니다. 주석이 달린 스크린샷에는 제목이 "Gur99"로 표시되어 있고, 코드에는 다음과 같이 작성되어 있습니다. Guru99.
ng-include 속성: src, onload 및 autoscroll
파일 이름 외에도 이 지시문은 두 개의 선택적 속성을 허용하며, 세 가지 방식으로 작성할 수 있습니다. 즉, 모든 요소의 속성으로, 또는 그 자체로 작성할 수 있습니다. <ng-include> 요소 또는 CSS 클래스로 사용할 수 있습니다. 아래 참조는 공식 문서를 따릅니다. ngInclude 문서.
| 속성 | 필수 | 그것이하는 일 |
|---|---|---|
| src 또는 ng-include | 가능 | 템플릿으로 평가되는 표현식 URL |
| 길 위에 | 아니 | 새로운 부분 로딩이 완료될 때마다 표현식이 평가됩니다. |
| 자동 스크롤 | 아니 | 콘텐츠가 로드된 후 $anchorScroll을 호출합니다. 이 속성을 생략하면 스크롤 기능이 비활성화됩니다. |
<div ng-include="'Table.html'" onload="loaded = true" autoscroll></div> <ng-include src="templateUrl"></ng-include>
가장 흔한 실수는 첫 번째 줄에서 시작됩니다. src 소요 표현일반 문자열이 아닙니다. 따라서 리터럴 경로는 속성 내부에 따옴표로 묶어야 하며, 이것이 위 예시가 다음과 같이 표시되는 이유입니다. ng-include="'Table.html'". 글쓰기 ng-include="Table.html" AngularJS가 평가하도록 합니다 Table 범위 속성으로 아무것도 찾지 못하면 요소를 비워 둡니다.
`ng-include`가 새로운 하위 스코프를 생성하는 이유는 무엇일까요?
이 지시문은 마크업을 주변 범위에 붙여넣지 않습니다. 모든 include는 새로운 자식 요소를 생성합니다. 범위 해당 객체는 선언된 범위의 프로토타입을 상속받으며, 바로 이 사실이 바인딩 관련 예상치 못한 문제들을 대부분 설명해 줍니다.
읽기 기능은 예상대로 작동합니다. 위의 일부 내용은 다음과 같습니다. tutorial 부모로부터 직접 전달받은 것이기 때문에 ng-repeat 배열을 찾습니다. 문제는 쓰기 단계에서 발생합니다. 부분 할당을 통해 기본형 데이터에 값을 할당할 때, 예를 들어 다음과 같은 경우에 문제가 생깁니다. ng-model="topic"AngularJS는 생성합니다. topic 자식 범위에서는 변경되지만 부모 복사본은 절대 변경되지 않습니다.
함정을 피하는 두 가지 습관:
- 객체를 통해 바인딩합니다. 예를 들면 다음과 같습니다.
ng-model="data.topic"따라서 부모와 자식은 동일한 참조를 갖게 됩니다. - 상태는 컨트롤러나 서비스에서 관리하고, 기본적인 데이터 타입 대신 함수를 노출하세요.
포함되는 항목은 또한 방출합니다. $includeContentRequested, $includeContentLoaded $includeContentError따라서 부모는 다음과 같은 방식으로 반응할 수 있습니다. $scope.$on 아동의 영역에 전혀 관여하지 않고.
ng-include가 비어 있거나 실패한 경우 해결 방법
아무것도 렌더링하지 않는 include 문은 일반적으로 몇 가지 이유 중 하나로 실패합니다. 다음 순서대로 원인을 살펴보세요.
- 견적을 확인하세요. 파일 이름을 그대로 사용할 경우 속성 값 안에 작은따옴표를 붙여야 합니다. 작은따옴표가 없으면 표현식이 정의되지 않은 것으로 간주되어 요청이 전송되지 않습니다.
- HTTP를 통해 페이지를 제공합니다. 해당 지시문은 부분 로딩에 대한 XHR 요청을 보내므로 대부분의 브라우저에서 파일 주소를 통해 디스크에서 Main.html을 직접 열려고 하면 오류가 발생합니다. 로컬 웹 서버를 사용하면 이 오류가 해결됩니다.
- 경로가 제대로 해석되는지 확인하십시오. 네트워크 패널에서 요청을 확인하세요. 404 오류는 해당 경로가 include 파일을 호스팅하는 페이지를 기준으로 하며, 해당 파일을 참조하는 부분 템플릿을 기준으로 하지 않는다는 의미입니다.
- 원산지 동일 원칙을 준수하십시오. 기본적으로 템플릿 URL AngularJS는 이를 그대로 전달하기 때문에 애플리케이션 문서의 도메인 및 프로토콜과 일치해야 합니다. $sce.getTrustedResourceUrl다른 곳에서 가져온 템플릿을 사용하려면 신뢰할 수 있는 리소스에 해당 항목이 등록되어 있어야 합니다. URL 리스트를 사용하거나 명시적인 trustAsResourceUrl 래퍼를 사용하더라도 원격 서버는 여전히 CORS 헤더를 전송해야 합니다.
- 실패의 소리에 귀 기울이세요. `$includeContentError`는 응답 상태가 200에서 299 사이를 벗어나는 경우 발생하며, 조용히 비어있는 영역을 로그에 기록할 가치가 있는 메시지로 바꿔줍니다.
또 다른 원인은 간과하기 쉽습니다. AngularJS는 가져온 모든 부분 템플릿을 `$templateCache`에 저장하므로, 수정된 파일은 캐시 항목이 제거되거나 소스 코드에서 페이지를 다시 로드할 때까지 오래된 마크업을 계속 제공할 수 있습니다. 프래그먼트가 마크업만으로는 부족한 자체적인 동작을 필요로 하는 경우, 사용자 정의 지시문 자체 템플릿과 격리된 범위를 가진 도구가 더 나은 선택입니다.
