• Articles
  • Tutorials
  • Interview Questions

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.

Angular JS Expert

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

Video Thumbnail

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 23 Nov 2024(Sat-Sun) Weekend Batch View Details
30 Nov 2024(Sat-Sun) Weekend Batch
07 Dec 2024(Sat-Sun) Weekend Batch

About the Author

Technical Research Analyst - Full Stack Development

Kislay is a Technical Research Analyst and Full Stack Developer with expertise in crafting Mobile applications from inception to deployment. Proficient in Android development, IOS development, HTML, CSS, JavaScript, React, Angular, MySQL, and MongoDB, he’s committed to enhancing user experiences through intuitive websites and advanced mobile applications.