ng include directive example in AngularJS

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.
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

nginclude

Blogger Tips and TricksLatest Tips And TricksBlogger Tricks