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.

Example,

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Angular Demo</title>
    
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.5/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("AngularApp",['ngRoute']);
        myApp.config(['$routeProvider',
            function ($routeProvider) {
                $routeProvider.when('/test1', {templateUrl: 'test1.html'})
                        .when('/test2', {templateUrl: 'test2.html'})
                        .when('/test3',{templateUrl:'test3.html'});
            }
        ]);
        myApp.controller('exampleController', function($scope) {
            $scope.text = 'Hello';
        });
    </script>
</head>

<body ng-app="AngularApp">
<div ng-controller="exampleController">
    <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>
        Loading...
    </div>
</div>
</body>
</html>

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...
http://www.code-sample.com
http://www.code-sample.xyz

3 comments:

Bhuvana Kandhan3 October 2018 at 23:04
Thanks a lot very much for the high quality and results-oriented help. I won’t think twice to endorse your blog post to anybody who wants and needs support about this area.We are providing AngularJS training in Velachery.

For more details: AngularJs training in velachery
Bhuvana20 October 2018 at 08:08
I accept there are numerous more pleasurable open doors ahead for people that took a gander at your site.Those guidelines additionally worked to become a good way to recognize that other people online have the identical fervor like mine to grasp great deal more around this condition.WE are providing AngularJs training in Velachery.
For more details:AngularJs training in Velachery
Royal Service11 January 2019 at 07:16
This template is for those who are in need of new and refreshing themes. This template introduces new and refreshing ideas that you will definitely like if you are bogged down by the same old website themes. nagy plüss maci