• Articles
  • Tutorials
  • Interview Questions
Home > Blog > Tutorials > AngularJS Includes

AngularJS Includes

What is AngularJS Includes?

HTML cannot have the HTML pages into another HTML pages at present. But by using AngularJS you can include the HTML pages into another HTML pages.

Syntax

<div ng-include = "’details.htm'"></div>

Example

details.htm

<table border="1">
<tr>
<td>Id:</td>
<td><input type="number" ng-model="id"></td></tr>
<tr><td>Name: </td>
<td><input type="text" ng-model="name"></td></tr>
<br><tr>
<td>Details of Employee:</td>
<td>{{id + ", " + name}}</td>
</tr>
</table>

Angular vs React Tutorial Video

employeedetails.htm

<!DOCTYPE html>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>
<div ng-app="details" ng-controller="employeeCtrl">
<div ng-include = "'details.htm'"></div>  // include details.htm file
</div>
<script>
var details= angular.module('details', []);
details.controller('employeeCtrl', function($scope) {
$scope.id = 20;
$scope.name = "abc";
});
</script>
</body>
</html>

 Output
o21

Course Schedule

Name Date Details
Web Development Courses 20 Jul 2024(Sat-Sun) Weekend Batch
View Details
Web Development Courses 27 Jul 2024(Sat-Sun) Weekend Batch
View Details
Web Development Courses 03 Aug 2024(Sat-Sun) Weekend Batch
View Details

About the Author

Atif Khan
Atif Khan
Senior UI Developer

Atif Khan, a seasoned Senior UI Developer with 7+ years of experience, excels in crafting captivating digital experiences. He is proficient in HTML, CSS, and JavaScript, and he transforms complex requirements into user-friendly interfaces while staying updated with industry trends to deliver innovative solutions.

Find Best AngularJS Training in Other Regions

Bangalore Hyderabad Chennai Mumbai