Templates
AngularJS templates refer to view which contain HTML elements enriched by Angular elements like directive and attributes. Templates are used to display the information from the model and controller that a user sees in his browser. An angular templates can have Directive, HTML markup, CSS, Filters, Expressions and Form controls.
A simple Angular Template
<html ng-app>
<body ng-controller="MyController">
<input ng-model="name" value="dotnet-tricks.com">
<br/>
Input Value is : {{name}}
<button ng-click="changeValue()">Click me!</button>
<script src="angular.js">
</body>
</html>
Types of Templates
Static Templates
A static template is defined by using script tag. It must has an
idattribute with a unique value and atypeattribute with valuetext/ng-template. Also, a static template must be inside the scope of the ng-app directive otherwise it will be ignored by Angular.<script type="text/ng-template" id="person.html"> {{person.name}} : {{person.address}} </script>A static template can be rendered by using ng-include directive.
<div ng-include="'person.html'"></div>
Example of Static Template
JS BinDynamic Templates
A dynamic template is an html page which is compiled and rendered by Angular on demand. The above static template can be created as a HTML page within templates folder of your app like as:
person.html
{{person.name}} : {{person.address}}A dynamic template can be rendered by using ng-include directive.
<div ng-include="'templates/person.html'"></div>
Example of Dynamic Template
AngularJS Dynamic Templates
Note
Always put the single quotes around the name of template with ng-include directive, since it accept an expression. Hence to indicate to Angular that template (person.html) is a string value you have to put single quotes around it's name.
What do you think?
I hope, now you have better understanding of AngularJS Templates. I would like to have feedback from my blog readers. Your valuable feedback, question, or comments about this article are always welcome.
