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"> <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...
|
Blogger Comment
Facebook Comment