AngularJS 포함

HTML은 HTML 페이지를 HTML 페이지에 삽입할 수 없습니다. 이 기능을 구현하려면 다음 옵션 중 하나를 사용할 수 있습니다.-

Ajax를 사용하면 − 서버 호출을 통해 필요한 HTML 페이지를 가져오고, 이를 HTML 컨트롤의 innerHTML에 설정합니다.
서버 측 포함 − JSP, PHP 및 다른 웹 서버 기술을 사용하여 동적 페이지에 HTML 페이지를 포함할 수 있습니다.

AngularJS를 사용하면 ng-include 지시자는 HTML 페이지를 HTML 페이지에 삽입합니다.

<div　ng-app　=　""　ng-controller　=　"studentController">
　　　<div　ng-include　=　"'main.htm'"></div>
　　　<div　ng-include　=　"'subjects.htm'"></div></div>

온라인 예제

tryAngularJS.htm

예제

<html>
　　　<head>
　　　　　　<title>Angular　JS　포함 예제</title>
　　　　　　<script　src　=　"https://cdn.staticfile.org/angular.js/1.3.14/angular.min.js">
　　　　　　</script>
　　　　　　
　　　　　　<style>
　　　　　　　　　table,　th　,　td　{
　　　　　　　　　　　　border:　1px　solid　grey;
　　　　　　　　　　　　border-collapse:　collapse;
　　　　　　　　　　　　padding:　5px;
　　　　　　　　　}
　　　　　　　　　table　tr:nth-child(odd)　{
　　　　　　　　　　　　background-color:　#f2f2f2;
　　　　　　　　　}
　　　　　　　　　table　tr:nth-child(even)　{
　　　　　　　　　　　　background-color:　#ffffff;
　　　　　　　　　}
　　　　　　</style>
　　　</head>
　　　
　　　<body>
　　　　　　<h2>AngularJS　Sample　Application</h2>
　　　　　　
　　　　　　<div　ng-app　=　"mainApp"　ng-controller　=　"studentController">
　　　　　　　　　<div　ng-include　=　""/angularjs/src/include/main.htm'</div>
　　　　　　　　　<div　ng-include　=　""/angularjs/src/include/subjects.htm'</div>
　　　　　　</div>
　　　　　　
　　　　　　<script>
　　　　　　　　　var　mainApp　=　angular.module("mainApp",　[]);
　　　　　　　　　
　　　　　　　　　mainApp.controller('studentController',　function($scope)　{
　　　　　　　　　　　　$scope.student　=　{
　　　　　　　　　　　　　　　firstName:　"Sea",
　　　　　　　　　　　　　　　lastName:　"Gull",
　　　　　　　　　　　　　　　500,
　　　　　　　　　　　　　　　
　　　　　　　　　　　　　　　subjects:[
　　　　　　　　　　　　　　　　　　{name:'물리',marks:70},
　　　　　　　　　　　　　　　　　　{name:'화학',marks:80},
　　　　　　　　　　　　　　　　　　{name:'수학',marks:65},
　　　　　　　　　　　　　　　　　　{name:'영어',marks:75},
　　　　　　　　　　　　　　　　　　{name:'국어',marks:67}
　　　　　　　　　　　　　　　],
　　　　　　　　　　　　　　　fullName:　function()　{
　　　　　　　　　　　　　　　　　　var　studentObject;
　　　　　　　　　　　　　　　　　　studentObject　=　$scope.student;
　　　　　　　　　　　　　　　　　　return　studentObject.firstName　+　"　"　+　studentObject.lastName;
　　　　　　　　　　　　　　　}
　　　　　　　　　　　　};
　　　　　　　　　});
　　　　　　</script>
　　　　　　
　　　</body>
</html>

테스트를 보세요‹/›

main.htm

<table　border　=　"0">
　　　<tr>
　　　　　　<td>이름을 입력하세요:</td>
　　　　　　<td><input　type　=　"text"　ng-model　=　"student.firstName"></td>
　　　</tr>
　　　
　　　<tr>
　　　　　　<td>성을 입력하세요:　</td>
　　　　　　<td><input　type　=　"text"　ng-model　=　"student.lastName"></td>
　　　</tr>
　　　
　　　<tr>
　　　　　　<td>이름:　</td>
　　　　　　<td>{{student.fullName()}}</td>
　　　</tr>
</table>

subjects.htm

<p>과목:</p>
<table>
　　　<tr>
　　　　　　<th>Name</th>
　　　　　　<th>Marks</th>
　　　</tr>
　　　
　　　<tr　ng-repeat　=　"subject　in　student.subjects">
　　　　　　<td>{{　subject.name　}}</td>
　　　　　　<td>{{　subject.marks　}}</td>
　　　</tr>
</table>

출력 결과

이 예제를 실행하기 위해 배포해야 합니다testAngularJS.htm, main.htm에하고subjects.htm웹 서버로 이동하여 파일을 열어 주세요. 네트워크 브라우저에서 서버 URL을 사용하여 파일을 열어 주세요.testAngularJS.htm그런 다음 결과를 확인하세요。

AngularJS Ajax AngularJS 양식

AngularJS 기본 강의

AngularJS 포함

온라인 예제

tryAngularJS.htm

main.htm

subjects.htm