Introduction:
This article explain you to about ng include directive in AngularJS
Description:
HTML does not support embedding html pages within html page. To achieve this functionality following ways are used −
Using Ajax − Make a server call to get the corresponding html page and set it in innerHTML of html control.
Using Server Side Includes − ASP, JSP, PHP and other web side server technologies can include html pages within a dynamic page.
Using AngularJS, we can embedded HTML pages within a HTML page using ng-include directive.
Using Ajax − Make a server call to get the corresponding html page and set it in innerHTML of html control.
Using Server Side Includes − ASP, JSP, PHP and other web side server technologies can include html pages within a dynamic page.
Using AngularJS, we can embedded HTML pages within a HTML page using ng-include directive.
To implement this we need to write the code like as shown below
Syntax :
<div ng-app = "" >
<div ng-include = "'home.htm'"></div>
</div>HTML
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>ng Include Example</title>
<script src="../scripts-angular/angular.js"></script>
</head>
<body>
<div ng-app style="border: 1px solid #000; width: 80%; margin: auto;">
<div style="text-align: center;">
<h1>ng-include directive example in AngularJS</h1>
</div>
<h3 style="text-align: center;">Page-1 :Home.html</h3>
<div ng-include="'Home.html'"></div>
<h3 style="text-align: center;">Page-2 :About.html</h3>
<div ng-include="'About.html'"></div>
<h3 style="text-align: center;">Page-3 :Contact.html</h3>
<div ng-include="'Contact.html'"></div>
</div>
</body>
</html>
Home.html
<div style="margin: auto; width: 50%;" >
<h1>This is Home Page</h1>
</div>
About.html
<div style="margin: auto; width: 50%;" >
<h1>This is About Page</h1>
</div>
Contact.html
<div style="margin: auto; width: 50%;" >
<h1>This is Contact Page</h1>
</div>
DEMO
No comments:
Post a Comment