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

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

예를 들어, 숫자 연산에 대한 논리가 있는 경우 일반적으로 해당 기능을 하나의 별도 파일에 정의하려고 합니다. 그러면 해당 파일을 포함시키기만 하면 여러 응용 프로그램에서 해당 개별 파일을 재사용할 수 있습니다.

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

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

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

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

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

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

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

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

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

  1. body 태그에는 Content라는 ID를 갖는 div 태그가 있습니다. 외부 파일 'Sub.html'의 코드가 삽입되는 곳입니다.
  2. jquery 스크립트에 대한 참조가 있습니다. JQuery는 Javascript를 기반으로 구축된 스크립팅 언어로 DOM 조작을 더욱 쉽게 만듭니다.
  3. 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 문서의 아래 부분에 콘텐츠를 포함하기 위해 수행됩니다.

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

웹 서버가 서버측 포함을 인식하려면 파일 이름에 특수 확장자가 있어야 합니다. 일반적으로 .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이라는 파일에 아래 코드를 작성해 보겠습니다. 이것은 다음과 같은 간단한 angle.JS 애플리케이션입니다.wing 측면

  1. 외부 파일 'Table.html'에 코드를 삽입하려면 "ng-include 지시어"를 사용하세요. 아래 코드에서 해당 명령문은 굵게 강조 표시되었습니다. 그래서 div 태그 ' ' 'Table.html' 파일의 전체 코드로 대체됩니다.
  2. 컨트롤러에서 "tutorial" 변수는 $scope 객체의 일부로 생성됩니다. 이 변수에는 키-값 쌍 목록이 포함되어 있습니다.

이 예에서 키 값 쌍은 다음과 같습니다.

  1. 이름 – 컨트롤러, 모델, 지시문과 같은 주제의 이름을 나타냅니다.
  2. 설명 – 각 주제에 대한 설명을 제공합니다.

튜토리얼 변수는 '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>

위의 코드를 실행하면 다음과 같은 결과가 나옵니다.wing 출력.

산출:

AngularJS에 HTML 파일 포함

요약

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