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

About the Author

Ayaan Alam

Software Developer | Technical Research Analyst Lead | Full Stack & Cloud Systems

Ayaan Alam is a Software Developer and Technical Research Analyst Lead with around 3 years of experience in full-stack development, Artificial Intelligence, cloud computing, and system design. He specializes in building scalable applications and creating industry-focused technical content on AI, programming, web development, cloud technologies, and modern software engineering.