Angular ng-template directive

What is a ng-template directive?

The “ng-template” directive is used to load the content of a <script> element into $templateCache, and this is done to further used by ng-Include, ng-View, template etc.

There is one rule which we must have to follow when we use ng-template directive and that is the type of the <script> element must be specified astext/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.

In the below example we have used ng-template in script tag to load the HTML and It contains "id" attribute which is used by $routeProvider to map the view with a controller.


<!DOCTYPE html>
<html lang="en">
    <title>Angular Demo</title>
    <script src=""></script>
    <script src=""></script>
    <script >
        var myApp = angular.module("AngularApp",['ngRoute']);
            function ($routeProvider) {
                $routeProvider.when('/test1', {templateUrl: 'test1.html'})
                        .when('/test2', {templateUrl: 'test2.html'})
        myApp.controller('exampleController', function($scope) {
            $scope.text = 'Hello';

<body ng-app="AngularApp">
<div ng-controller="exampleController">
    <script type="text/ng-template" id="test1.html">
        This list denotes the first list element.
    <script type="text/ng-template" id="test2.html">
        <h3>This is the header of the second list.</h3>
    <script type="text/ng-template" id="test3.html">
        <b>The ng-template directive is magical</b>
        <li><a href="#/test1">list1</a></li>
        <li><a href="#/test2">list2</a></li>
        <li><a href="#/test3">list3</a></li>
    <div ng-view>

The live Result,

About Blogger


Hey! I am Anil Singh. I am Active Blogger, Writer and Programmer. I love learning new technologies, programming, blogging and participating the forum discussions more...

    Blogger Comment
    Facebook Comment
SQL Server NodeJs TypeScript JavaScript Angular SQL Server My Book