HTML اجازه ی قرار دادن صفحات HTML دیگر در صفحه را به ما نمی دهد. برای دستیابی به این مورد از موارد زیر استفاده می کنیم :
 
                 ⦁استفاده از Ajax : بر قرار کردن تماس با سرور برای گرفتن صفحه ی HTML مربوطه و استفاده از آن در صفحه HTML
                 ⦁استفاده از داده های سمت سرور : استفاده از JSP ، PHP و دیگر سرورهای جانبی وب 
 
با استفاده از Angular JS می توان صفحات HTML دیگر را در صفحه ی HTML مورد نظر تعبیه کرد. برای این منظور از عبارت ng-include استفاده می کنیم : 
  

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

 
در مثال زیر باید فایل های tryAngularJS.htm ، main.htm و subjects.htm را بر روی سرور مورد نظرتان قرار دهید و سپس فایل tryAngularJS.htm را با استفاده از URL سرورتان بازکنید و نتیجه را ببینید. در واقع با بازکردن فایل tryAngularJS.htm اطلاعات از دو فایل main.htm و subject.htm خوانده می شوند.
 
فایل tryAngularJS.htm : 
 
 
<html>
<head>
<title>Angular JS Includes</title>
<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="" ng-controller="studentController">
<div ng-include="'main.htm'"></div>
<div ng-include="'subjects.htm'"></div>
</div>
<script>
function studentController($scope) {
$scope.student = {
firstName: "Mahesh",
lastName: "Parashar",
fees:500,
subjects:[
{name:'Physics',marks:70},
{name:'Chemistry',marks:80},
{name:'Math',marks:65},
{name:'English',marks:75},
{name:'Hindi',marks:67}
],
fullName: function() {
var studentObject;
studentObject = $scope.student;
return studentObject.firstName + " " + studentObject.lastName;
}
};
}
</script>
<script
src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js">
</script>
</body>
</html>
 
 
فایل main.htm : 
 

<table border="0">
<tr><td>Enter first name:</td><td><input type="text"
ng-model="student.firstName"></td></tr>
<tr><td>Enter last name: </td><td><input type="text"
ng-model="student.lastName"></td></tr>
<tr><td>Name: </td><td>{{student.fullName()}}</td></tr>
</table>

 
فایل subjects.htm :
 

<p>Subjects:</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>

 
خروجی مثال بالا را ببینید :