AngularJS Templates

In AngularJS, templates consists of HTML DOM elements with AngularJS attributes. AngularJS combines the template with information from the model and controller to render the dynamic view that an user can see in the browser.

AngularJS have a nice directive called ng-include which helps you to organize your UI modules. In order to include HTML page inside an HTML page you probably use either Ajax or any server side script like PHP, ASP, JSP etc. AngularJS makes it possible for you now.

Using ng-include directive, you can embed/include HTML pages within an HTML page.

Syntax

<div ng-include="'yourHTML.htm'"></div>

AngularJS Templates Example

<html>
<head>
<title>My first AngularJS Include code</title>
<Script SRC="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.13/angular.js">
</Script>
<Script type="text/ng-template" id="htmlPage1.html">
</Script>
<Script type="text/ng-template" id="htmlPage2.html">
</Script>
</head>
<body>
<div ng-app="">
<ng-include src="'htmlPage1.html'"></ng-include>
<ng-include src="'htmlPage2.html'"></ng-include>
</div>
</body>
</html>

See Live Example

« Previous

AngularJS Code Examples

AngularJS Live Demo

ASP.NET Code Examples

Javascript Code Examples

Interview Q & A

Google MAP API Live Demo

Google MAP API Code Examples

Utility Tools

Articles

Angularjs Tutorials

Angularjs References

Angularjs Examples

AngularJS Templates

AngularJS Templates Example

Recent Articles