ng include directive example in AngularJS

This article explain you to about ng include directive in AngularJS
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>

<!DOCTYPE html>
<html xmlns="">
    <title>ng Include Example</title>
    <script src="../scripts-angular/angular.js"></script>

    <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>
        <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 style="margin: auto; width: 50%;" >
    <h1>This is Home Page</h1>


<div style="margin: auto; width: 50%;" >
    <h1>This is About Page</h1>


<div style="margin: auto; width: 50%;" >
    <h1>This is Contact Page</h1>



Blogger Tips and TricksLatest Tips And TricksBlogger Tricks