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>

 
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

Previous Next

Recommended Videos

Leave a Reply

Your email address will not be published. Required fields are marked *