AngularJS의 ng-include: HTML 파일을 포함하는 방법 [예제]

기본적으로 HTML은 다른 파일의 클라이언트측 코드를 포함하는 기능을 제공하지 않습니다. 일반적으로 모든 프로그래밍 언어에서는 모든 애플리케이션의 다양한 파일에 기능을 배포하는 것이 좋습니다.

예를 들어, 숫자 연산에 대한 논리가 있다면 일반적으로 그 기능을 하나의 별도 파일에 정의하고 싶을 것입니다. 그 별도 파일은 그 파일을 포함하기만 하면 여러 애플리케이션에서 재사용될 수 있습니다.

이것은 일반적으로 다음과 같은 개념입니다. 문 포함 .Net과 같은 프로그래밍 언어로 사용할 수 있으며 Java.

이 튜토리얼에서는 파일(외부 HTML 코드를 포함하는 파일)을 기본 HTML 파일에 포함할 수 있는 다른 방법을 살펴봅니다.

클라이언트측에는 다음이 포함됩니다.

가장 일반적인 방법 중 하나는 HTML 코드를 포함하는 것입니다. Javascript. Java스크립트 HTML 페이지의 내용을 즉석에서 조작하는 데 사용할 수 있는 프로그래밍 언어입니다. 따라서, Javascript 다른 파일의 코드를 포함하는 데에도 사용할 수 있습니다.

아래 단계에서는 이를 수행하는 방법을 보여줍니다.

1단계) Sub.html이라는 파일을 정의하고 해당 파일에 다음 코드를 추가합니다.

<div>
	This is an included file
</div>

단계 2) 기본 애플리케이션 파일인 Sample.html이라는 파일을 만들고 아래 코드 조각을 추가합니다.

다음은 아래 코드에 대해 주목해야 할 주요 측면입니다.

body 태그에는 Content라는 ID를 갖는 div 태그가 있습니다. 외부 파일 'Sub.html'의 코드가 삽입되는 곳입니다.
jquery 스크립트에 대한 참조가 있습니다. JQuery는 JQuery를 기반으로 구축된 스크립팅 언어입니다. Javascript DOM 조작이 더욱 쉬워집니다.

. Javascript 함수에는 '$(“#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 문서의 아래 부분에 콘텐츠를 포함하기 위해 수행됩니다.

페이지 헤더
페이지 바닥글
탐색 메뉴.

웹 서버가 서버측 포함을 인식하려면 파일 이름에 특수 확장자가 있어야 합니다. 일반적으로 .shtml, .stm, .shtm, .cgi와 같은 웹 서버에서 허용됩니다.

콘텐츠를 포함하는 데 사용되는 지시어는 "include 지시어"입니다. include 지시문의 예가 아래에 나와 있습니다.

<!--#include virtual="navigation.cgi" -->

위 지시문을 사용하면 한 문서의 내용을 다른 문서에 포함할 수 있습니다.
코드 위의 "가상" 명령은 애플리케이션의 도메인 루트를 기준으로 대상을 지정하는 데 사용됩니다.
또한, virtual 매개변수에는 file 매개변수도 사용할 수 있습니다. "file" 매개변수는 현재 파일의 디렉터리에 상대적인 경로를 지정해야 할 때 사용됩니다.

참고 :

virtual 매개변수는 포함되어야 하는 파일(HTML 페이지, 텍스트 파일, 스크립트 등)을 지정하는 데 사용됩니다. 웹 서버 프로세스에 파일을 읽거나 스크립트를 실행할 수 있는 액세스 권한이 없으면 include 명령이 실패합니다. '가상' 단어는 include 지시문에 배치해야 하는 키워드입니다.

AngularJS에 HTML 파일을 포함하는 방법

Angular는 ng-include 지시문을 사용하여 다른 AngularJS 파일의 기능을 포함하는 기능을 제공합니다.

"ng-include 지시문"의 주요 목적은 기본 AngularJS 애플리케이션에서 외부 HTML 조각을 가져오고, 컴파일하고 포함하는 데 사용됩니다.

아래 코드 베이스를 살펴보고 Angular를 사용하여 이를 달성할 수 있는 방법을 설명하겠습니다.

단계 1) Table.html이라는 파일에 아래 코드를 작성해 보겠습니다. 이는 ng-include 지시어를 사용하여 기본 애플리케이션 파일에 삽입될 파일입니다.

아래 코드 조각에서는 "tutorial"이라는 범위 변수가 있다고 가정합니다. 그런 다음 "Tutorial" 변수의 각 주제를 살펴보고 'name' 및 'description' 키-값 쌍의 값을 표시하는 ng-repeat 지시어를 사용합니다.

<table>
    <tr ng-repeat="Topic in tutorial">
        <td>{{ Topic.Name }}</td>
        <td>{{ Topic.Country }}</td>
    </tr>
</table>

단계 2) Main.html이라는 파일에 아래 코드를 작성해 보겠습니다. 이것은 다음과 같은 측면을 가진 간단한 angular.JS 애플리케이션입니다.

외부 파일 '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>

위 코드를 실행하면 다음과 같은 출력이 나옵니다.

산출:

요약

기본적으로 우리는 HTML이 다른 파일과 같은 다른 파일의 HTML 콘텐츠를 포함하는 직접적인 방법을 제공하지 않는다는 것을 알고 있습니다. 프로그래밍 언어.
Javascript JQuery와 함께 다른 파일의 HTML 콘텐츠를 삽입하는 데 가장 선호되는 옵션입니다.
포함하는 또 다른 방법 HTML 다른 파일의 콘텐츠는 지시문과 가상 매개변수 키워드. 가상 매개변수 키워드는 포함되어야 하는 파일을 나타내는 데 사용됩니다. 이를 서버측 포함이라고 합니다.
Angular는 ng-include 지시문을 사용하여 파일을 포함하는 기능도 제공합니다. 이 지시어는 외부 파일의 코드를 기본 HTML 파일에 직접 삽입하는 데 사용할 수 있습니다.

당신은 좋아할 것입니다 :

클라이언트측에는 다음이 포함됩니다.

관련 기사

서버 사이드 포함

AngularJS에 HTML 파일을 포함하는 방법

요약