Introduction
This article explains how to include multiple Partial Templates in a single application using ng-Template and config.
Various kinds of text can be shown in different templates using AngularJS. For this we need to use various things like ng-Template and config, config is used just like a controller and ng-template is defined in the script tag.
Let's create a sample application that will help you understand this feature more interestingly.
Step 1
First of all we will work on the JavaScript of this application but before that you need to add an external link to your application as in the following:
<head runat="server">
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.5/angular.js"></script>
</head>
After adding this external link we can work on the JavaScript of this application.
Step 2
Add this code to the head section of your application:
<script>
var x = angular.module('app', []);
x.config(function ($routeProvider) {
$routeProvider.when('/first', { templateUrl: 'firstPaget.html' })
.when('/second', { templateUrl: 'SecondPage.html' });
});
x.controller('control', function ($scope) {
$scope.test = 'Hello';
});
</script>
Here first I have created an angular.module named "app", this will be bound with the ng-app.
After this config is called using the variable x that was declared in the angular.module.
In this config "$routeProvider" is used, routeProvider is used to set the path of the template that is to be bound with the application. This routeProvider will check whether the user has clicked on the "first" or the "second", if the first link is clicked then it will pass the URL of the template that is bound on this click and if the second link is clicked then the second path will be passed.
After this controller is created named "control", in this controller a variable is used in which a default value is passed.
Step 3
Now I will create a template, for this you need to write this code in the body section:
<script type="text/ng-template" id="firstPaget.html">
This is in the First Page
</script>
As I have already said, to use the ng-template you need to use the script tag, here you can also see that I used the <script> tag in which the type is provided as ng-template and in this script some text is provided that will be shown while running the application.
Similarly I have created the second template, so the body section looks like this:
<body ng-app="app" ng-controller="control">
<script type="text/ng-template" id="firstPaget.html">
This is in the First Page
</script>
<script type="text/ng-template" id="SecondPage.html">
This is in the Second Page
</script>
<ul>
<li><a href="#/first">First Page</a></li>
<li><a href="#/second">Second Page</a></li>
</ul>
<div ng-view>
Sry, Some Error Occured
</div>
</body>
After creating the two templates I used the List in which two Anchors are used, in the first anchor "#/first" is passed in the href and in the second anchor "#/second" is passed in the href, in other words that first link is bound with the first template and the second link is bound with the second template.
At the end a div is taken that is bound with the ng-view so this div that will show the text on the click of Anchors.
Now our application is created and is ready for execution.
Output
On running the application you will get an output like this one:
![ng-template]()
Here you can see that two Anchors are available but no text is shown; that's because no Anchor is clicked.
But as I click on the first Anchor then the text of the first Template will be shown as in the following:
![ng-template]()
Click on the second Anchor that will show the data of the second Template as in the following:
![ng-template]()
The complete code of this application is as follows:
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.5/angular.js"></script>
<script>
var x = angular.module('app', []);
x.config(function ($routeProvider) {
$routeProvider.when('/first', { templateUrl: 'firstPaget.html' })
.when('/second', { templateUrl: 'SecondPage.html' });
});
x.controller('control', function ($scope) {
$scope.test = 'Hello';
});
</script>
</head>
<body>
<form id="form1" runat="server">
<body ng-app="app" ng-controller="control">
<script type="text/ng-template" id="firstPaget.html">
This is in the First Page
</script>
<script type="text/ng-template" id="SecondPage.html">
This is in the Second Page
</script>
<ul>
<li><a href="#/first">First Page</a></li>
<li><a href="#/second">Second Page</a></li>
</ul>
<div ng-view>
Sry, Some Error Occured
</div>
</body>
</form>
</body>
</html>