AngularJS ng-include Directive: The ng-include Directive in angular JS is used to compile and include one HTML page to another HTML page. In HTML we cant include one HTML page to another HTML page for that we need to use some custom specifications like Ajax and HTML through server-side programming.
However, in Angular JS we use ng-include Directive to access this functionality. The Angular JS ng-include Directive will help to compile and include any external HTML document.
AngularJS ng-include Syntax
<div ng-include src="path of your page"/>
In the above syntax of Angular JS ng-include Directive, we used the URL of the page in the “src tag”.
Let’s see an example that explains Angular JS ng-include in detail
AngularJS ng-include Example
1. At first, create a new HTML document with the name sample1.html that should contain the following code.
<b>Sample1 Template Page</b>
2. Now Create another HTML document with the name as sample2.html and contains the code as follows.
<b>Sample2 Template Page</b>
3. Here create a document as ngincludesample.html and write the as given below.
<!DOCTYPE html>
<head>
<title>
AngularJs ng-include Directive Example
</title>
<script
src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script>
var app = angular.module("AngularngincludeApp", []);
app.controller("ngincludectrl", function ($scope) {
$scope.items = ['--select--','sample1.html', 'sample2.html'];
$scope.selectval = "--select--";
});
</script>
</head>
<body ng-app="AngularngincludeApp">
<div ng-controller="ngincludectrl">
Select Item: <select ng-model="selectval" ng-options="item foritem in items">
</select>
<br /><br />
<div style="border:1px solid #000; padding:10px; width:20%">
<div ng-include="selectval"></div>
</div>
</div>
</body>
</html>
AngularJS ng-include Example Output
