AngularJS ng-template Directive with Example

Here we will learn ng-template directive in angularjs with the example, use of ng-template directive in angularjs and we will learn to use the ng-template directive in angularjs application with example

AngularJS ng-template Directive

In angularjs, the ng-template directive is used to load the content of a <script> element into $templateCache, and this is done further by using ng-include, ng-view, template, etc.

 

There is one rule which we need to follow when we use ng-template directive in angularjs application. In ng-template the type of the <script> element must be specified as text/ng-template, and a cache name for the template must be assigned through the element's id, which can then be used as a directive's templateUrl.

AngularJS ng-template Directive Syntax

Following is the syntax of using ng-template directive in angularjs application

 

var app = angular.module("AngularApp", ['ngRoute']);

app.config(['$routeProvider', function ($routeProvider) {

$routeProvider.when('/test1', { templateUrl: 'test1.html' })

}

]);

app.controller('exampleController', function ($scope) {

$scope.text = 'Hello';

});

<div ng-app="AngularApp">

<div ng-controller="exampleController">

<script type="text/ng-template" id="test1.html">

This list denotes the first list element.

</script>

<div ng-view></div>

</div>

</div>

We will see full example to use ng-template in angularjs with example.

AngularJS ng-template Directive Example

Following is the full example to use ng-template directive in angularjs application

 

Live Preview

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<title>

AngularJs ng-template Directive Example

</title>

<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.5/angular-route.min.js"></script>

<script >

var myApp = angular.module("AngularngtemplateApp", ['ngRoute']);

myApp.config(['$routeProvider',

function ($routeProvider) {

$routeProvider.when('/test1', { templateUrl: 'test1.html' })

.when('/test2', { templateUrl: 'test2.html' })

.when('/test3', { templateUrl: 'test3.html' });

}

]);

myApp.controller('ngtemplatectrl', function ($scope) {

$scope.text = 'Hello';

});

</script>

</head>

<body ng-app="AngularngtemplateApp">

<div ng-controller="ngtemplatectrl">

<script type="text/ng-template" id="test1.html">

This list denotes the first list element.

</script>

<script type="text/ng-template" id="test2.html">

<h3>This is the header of the second list.</h3>

</script>

<script type="text/ng-template" id="test3.html">

<b>The ng-template directive is magical</b>

</script>

<ul>

<li><a href="#/test1">list1</a></li>

<li><a href="#/test2">list2</a></li>

<li><a href="#/test3">list3</a></li>

</ul>

<div ng-view>

</div>

</div>

</body>

</html>

In the above example we used a ng-template in script tag to load the HTML. It contains "id" attribute which is used by $routeProvider to map the view with a controller. Now we will run and see the output of application.

Output of AngularJS ng-template Example

Following is the result of ng-template directive example in angularjs.

 

Angularjs ng-template directive example output or result