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.
Whether you're preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape,
GeeksforGeeks Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we've already empowered, and we're here to do the same for you. Don't miss out -
check it out now!