Skip to content
Related Articles

Related Articles

AngularJS Includes

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

The ng-include directive can be utilized for including the HTML from the external file, i.e. it can be used for embedding an HTML page within HTML, which is not supported by HTML. The ng-controller directive also facilitates adding the AngularJS code into the HTML file. Adding the AngularJS code to the external HTML file will also be executed, even though, it is included in the external file. This helps to accomplish the overall tasks in an easier manner. In order to allow & include the Cross Domains, the ng-controller directive, by default, does not allow adding the include files that belong to other domains. In this case, if we need to accomplish the task then we need to add the whitelist of legal files and/or domains inside the config function of the application.

Syntax:

<element ng-include=" ">
    content...
<element>

Example 1: This example describes the basic use of the ng-controller directive in AngularJS.

HTML




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


geeks.html:

HTML




<!DOCTYPE html>
<html lang="en">
  
<head>
    <meta charset="UTF-8">
    <meta name="viewport" 
          content="width=device-width,
                   initial-scale=1.0">
    <title>GFG data</title>
</head>
  
<body>
    <p>
        It is strongly recommended to
        add image/video created by
        you only. We have also
        recently changed the
        guidelines on how to add an
        image. Please see this for
        modified guidelines on image
        insertion How are my articles
        published? The articles are
        reviewed by reviewers and
        then published. The reviewers
        basically check for correctness
        and basic plagiarism.
    </p>
</body>
</html>


Output:

 

Including AngularJS code: Similar to the previous case where you include the HTML file by using ng-include, similarly, it can contain AngularJS code. 

Example 2: This example describes the use of the ng-controller directive in AngularJS by including the external HTML file that contains the AngularJS code.

Geekstable.html:

<table>
    <tr ng-repeat="x in courses">
         <td>{{ x.Course }}</td>
         <td>{{ x.Duration }}</td>
    </tr>
</table>

Code: 

HTML




<!DOCTYPE html>
<html>
  
<head>
    <script src=
    </script>
</head>
  
<body>
    <div ng-app="geeks" ng-controller="customersCtrl">
        <div ng-include="'Geekstable.html'"></div>
    </div>
    <script>
        var app = angular.module('geeks', []);
        app.controller('customersCtrl', function($scope, $http) {
            $http.get("customers.php").then(function(response) {
                $scope.courses = response.data.records;
            });
        });
    </script>
</body>
</html>


Output:

Include Cross Domains: If you want to include files from another domain then you can add a whitelist of legal files or domains in the config function of your application. 

Example 3: This example describes the basic use of the ng-controller directive in AngularJS by including the files that belong from another origin.

HTML




<!DOCTYPE html>
<html>
  
<head>
    <script src=
    </script>
</head>
  
<body ng-app="myApp">
    <div ng-include="'filel_path_from_anotherDomain'"></div>
    <script>
        var app = angular.module('myApp', [])
        app.config(function($sceDelegateProvider) {
            $sceDelegateProvider.resourceUrlWhitelist(
                  ['filel_path_from_anotherDomain']);
        });
    </script>
</body>
</html>


Note: This file will not execute as the belonging files will be loaded from another origin that requires adding the whitelist of legal files and/or domains.


My Personal Notes arrow_drop_up
Related Articles

Start Your Coding Journey Now!