Skip to content
Related Articles

Related Articles

Improve Article

AngularJS | Includes

  • Last Updated : 21 Jun, 2019

Embedding html page within html is not supported by HTML that’s why we used AngularJS Include Directives. By using ng-controller directive we can easily do the task.

Syntax:

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

Example:




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

Output:

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

Example:



GeeksforGeeks.html table:




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

Code:




<!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.
Sample code:




<!DOCTYPE html>
<html>
  <script src=
  </script>
<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>



My Personal Notes arrow_drop_up
Recommended Articles
Page :