Angularjs Examples

AJS Examples


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>

Live Example