AngularJS ng-include Directive Last Updated : 01 Aug, 2022 Summarize Suggest changes Share Like Article Like Report 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= "https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"> </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= "http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"> </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: Advertise with us Next Article AngularJS ng-if Directive P Pankaj_Singh Follow Similar Reads AngularJS ng-hide Directive The ng-hide Directive in AngluarJS is used to show or hide the specified HTML element. If the expression given in the ng-hide attribute is true then the HTML elements hide. In AngularJS there is a predefined class named ng-hide which is used to set the display to none. Syntax: <element ng-hide="e 2 min read AngularJS ng-init Directive The ng-init Directive is used to initialize AngularJS Application data. It defines the initial value for an AngularJS application and assigns values to the variables. The ng-init directive defines initial values and variables for an AngularJS application. Syntax: <element ng-init = "expression" 1 min read AngularJS ng-if Directive The ng-if Directive in AngularJS is used to remove or recreate a portion of the HTML element based on an expression. The ng-if is different from the ng-hide directive because it completely removes the element in the DOM rather than just hiding the display of the element. If the expression inside it 2 min read AngularJS ng-focus Directive The ng-focus Directive in AngluarJS is used to apply custom behavior when an element is focused. It can be used to show/hide some element or it can pop up an alert when an element is being focused. It is supported by <a>, <input>, <select> and <textarea> elements. Syntax: 1 min read AngularJS ng-model Directive The ngModel directive is a directive that is used to bind the values of the HTML controls (input, select, and textarea) or any custom form controls, and stores the required user value in a variable and we can use that variable whenever we require that value. It also is used during form validations. 4 min read AngularJS ng-href Directive The ng-href directive is used when we have an angular expression inside the href value. If href attribute is used then the problem is that if in case the link is clicked before AngularJS has replaced the expression with its value then it may go to the wrong URL and the link will be broken and will m 2 min read Article Tags : Web Technologies AngularJS AngularJS-Directives Like