Introduction
In my previous articles I told you about:
This article explains the ng-Include Directive of AngularJS.
In my last article I showed how multiple partial templates can be included in a single application, ng-include is another method that can help us to include multiple templates.
Step 1
First of all you need to add an external Angular.js file to your application, "angular.min.js".
For this you can go to the AngularJS official site or can download my source code and then fetch it or you can click on this link to download it: ANGULARJS.
After downloading the external file you need to add this file to the Head section of your application.
<head runat="server">
<title></title>
<script src="angular.min.js"></script>
</head>
Step 2
Now after adding the external JS file the first thing you need to do is to add ng-app in the <HTML> Tag otherwise your application will not run.
<html ng-app xmlns="http://www.w3.org/1999/xhtml">
Now I will create a simple application that will help you yo understand this directive.
First I will create a JavaScript function in which some initial values will be passed.
<script>
function x($scope) {
$scope.templatePages =
[{ temp: 'firstPage.html', url: 'firstPage.html' }
, { temp: 'secondPage.html', url: 'secondPage.html' }];
$scope.tempPage = $scope.templatePages[0];
}
</script>
Here I first created a function named "x", in this function a variable is declared, in this variable the name of our templates and their URL are linked.
Step 3
Now I will work on the View Model of this application.
<div ng-app>
<div ng-controller="x">
<select ng-model="tempPage" ng-options="p.temp for p in templatePages">
<option value="">(Empty)</option>
</select>
<div ng-include="tempPage.url">
</div>
</div>
<script type="text/ng-template" id="firstPage.html">
Hey!! You are on First template
</script>
<script type="text/ng-template" id="secondPage.html">
Hey!! You are on Second template
</script>
</div>
The function name is bound to the Div using the ng-controller.
After this a dynamic list is created using the ng-options, this list will be shown in the drop down list.
A dynamic list will contain the URL of templates that are included in our application. Whatever name or URL is selected from the drop down regarding the data will be shown in the div that is bound to tempPage using the ng-include directive.
After this you can see two script tags in which two templates are provided, as in my previous article I told you that for creating the template you need to use the ng-template; you can see that I have also used that.
Now our application is created and is ready for execution.
Output
On running the application you will see a drop down in which the first URL will be checked by default:
![ng-include]()
Now if I click on the drop down then all of the Template URL will be shown:
![ng-include]()
I have selected the second URL and you can see that different data is shown:
![ng-include]()
The complete code of this application is as follows:
<html ng-app xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script src="angular.min.js"></script>
<script>
function x($scope) {
$scope.templatePages =
[{ temp: 'firstPage.html', url: 'firstPage.html' }
, { temp: 'secondPage.html', url: 'secondPage.html' }];
$scope.tempPage = $scope.templatePages[0];
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div ng-app>
<div ng-controller="x">
<select ng-model="tempPage" ng-options="p.temp for p in templatePages">
<option value="">(Empty)</option>
</select>
<div ng-include="tempPage.url">
</div>
</div>
<script type="text/ng-template" id="firstPage.html">
Hey!! You are on First template
</script>
<script type="text/ng-template" id="secondPage.html">
Hey!! You are on Second template
</script>
</div>
</form>
</body>
</html>