AngularJS Includes
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.
Please Login to comment...