Skip to content
Related Articles

Related Articles

AngularJS ng-include Directive

Improve Article
Save Article
  • Last Updated : 01 Aug, 2022
Improve Article
Save Article

AngularJS has a built-in directive to include the functionality from other AngularJS files by using the ng-include directive. The primary purpose of the ng-include directive is used to fetch, compile, and include an external HTML file in the main AngularJS application. These are added as child nodes in the main application. The ng-include attribute’s value can also be an expression, that returns a filename. It is supported by all HTML elements. 

Syntax:

<element ng-include="filename" 
         onload="expression" 
         autoscroll="expression" >
    Content...
</element>

Note: Here the onload and autoscroll parameter are optional, onload define an expression to evaluate when the included file is loaded and autoscroll define whether or not the included section should be able to scroll into a specific view.

Example 1: This example describes the AngularJS ng-include Directive by fetching the data from the child.html file.

External HTML file: Save this file as child.html

HTML




<!-- child.html -->
 
<p>Hello Geeks from include component.</p>

index.html: 

HTML




<!DOCTYPE html>
<html>
 
<head>
    <title>AngularJS ng-include Directive</title>
    <script src=
    </script>
</head>
 
<body ng-app="" style="text-align: center">
    <h1 style="color:green">GeeksforGeeks</h1>
    <h3>ng-include Directive</h3>
    <div ng-include="'child.html'"></div>
</body>
 
</html>

Output:

Example 2: This example describes the AngularJS ng-include Directive by fetching the data in the tabular format from the table.html file.

External HTML file: Save this file as table.html. 

HTML




<!-- table.html -->
<table>
  <tr ng-repeat="Subject in tutorials">
    <td>{{ Subject.Name }}</td>
    <td>{{ Subject.Description }}</td>
  </tr>
</table>

index.html: 

HTML




<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content=
    "width=device-width, initial-scale=1.0">
    <title>AngularJS ng-include Directive</title>
    <script src=
    </script>
</head>
 
<body ng-app="main-app">
    <center>
        <h1 style="color: green;">
            GeeksforGeeks
        </h1>
         
        <h3>ng-include Directive</h3>
         
        <div ng-controller="AngularController">
            <div ng-include="'table.html'"></div>
        </div>
    </center>
 
    <script>
        var main_app = angular.module('main-app', []);
        main_app.controller('AngularController',
        function ($scope) {
            $scope.tutorials = [{
                Name: "AngularJS",
                Description: "Front End Framework"
            }, {
                Name: "NodeJS",
                Description: "Server side JavaScript"
            }, {
                Name: "ExpressJS",
                Description: "Server side JS Framework"
            }];
        });
    </script>
</body>
 
</html>

Output:


My Personal Notes arrow_drop_up
Related Articles

Start Your Coding Journey Now!