AngularJS | ng-include Directive

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. All HTML element supports this.

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

  • External HTML file: Save this file as child.html.
    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!-- child.html -->
    <p>Hello Geeks from include component.</hp>
    <!--I am a partial, i don't require head and body tags.-->

    chevron_right

    
    

  • Code:
    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

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

    chevron_right

    
    

  • Output:
    Example 2:

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

    edit
    close

    play_arrow

    link
    brightness_4
    code

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

    chevron_right

    
    

  • Code:
    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <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>
      
       
    <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>

    chevron_right

    
    

  • Output:


My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.