Get Started

You need to be a premium member to use this feature. To access it, you'll have to upgrade your membership.

Become a sharper developer and jumpstart your career.

Basic

$0

$

. 00

monthly

For Basic members:

  • Standard Profile
  • Access learning courses
  • Access free e-books
  • 1x point

Premium

$20

$

. 00

monthly

For Premium members:

  • Earn 2x reward points
  • Premium profile with Verified check
  • Premium Avatar with status update
  • Learning courses
  • Unlimited Certifications and badges on profile
  • Unlimited Book downloads
  • Access to Premium content
  • Online Training
  • Unlimited PDF conversions and downloads
  • Professional Resume Writing
  • Interview Preparations Guide
  • 25 messages per month
  • 1 "Kodzu" avatar, basic
Angular

ng-Include In Angular

AngularJS has a special directive to embed an HTML page within another HTML page. The ng-include directive compiles and includes one HTML page in another page.

Syntax of ng-include

  1. <div ng-include="path of page"></div>  
Example of ng-include

 

In the below example, we will demonstrate the use of ng-include. We will call an HTML page within another HTML page using Angular. In the first page, we will simply call our second page where we’ve created our HTML page. And, we will display this table in the first page.

FirstPage.html

  1. <!DOCTYPE html>  
  2. <html ng-app="myApp">  
  3.   
  4. <head>  
  5.     <script src="scripts/angular.js"></script>  
  6.     <script src="script.js"></script>  
  7.     <title></title>  
  8.     <meta charset="utf-8" /> </head>  
  9.   
  10. <body>  
  11.     <div ng-controller="myCtrl">  
  12.         <div ng-include="'secondPage.html'"></div>  
  13.     </div>  
  14. </body>  
  15.   
  16. </html>  
SecondPage.html

 

  1. <table border="1">  
  2.     <tr>  
  3.         <th>Name</th>  
  4.         <th>Gender</th>  
  5.         <th>Email</th>  
  6.     </tr>  
  7.     <tr ng-repeat="student in students">  
  8.         <td> {{ student.name }} </td>  
  9.         <td> {{ student.gender}} </td>  
  10.         <td> {{ student.email}} </td>  
  11.     </tr>  
  12. </table>  
Script.js

 

  1. var app = angular.module("myApp", []);  
  2. app.controller("myCtrl", function($scope) {  
  3.     var student = [{  
  4.         name: "Rahul",  
  5.         gender: "Male",  
  6.         email: "[email protected]"  
  7.     }, {  
  8.         name: "Priya",  
  9.         gender: "Female",  
  10.         email: "[email protected]"  
  11.     }, {  
  12.         name: "Akshay",  
  13.         gender: "Male",  
  14.         email: "[email protected]"  
  15.     }, {  
  16.         name: "Neha",  
  17.         gender: "Female",  
  18.         email: "[email protected]"  
  19.     }, {  
  20.         name: "Sunny",  
  21.         gender: "Male",  
  22.         email: "[email protected]"  
  23.     }]  
  24.     $scope.students = student;  
  25. });  
Output

 
Ebook Download
View all
Learn
View all