AngularJS Includes
AngularJS includes, also called as ng-include directive, allows you to insert external HTML content dynamically into an AngularJS application. This capability is particularly useful for modularizing applications, improving code organization, and enhancing code reusability.
Syntax:
<element ng-include=" ">
content...
<element>Key Features of AngularJS
- Dynamic Template Loading:
ng-includeprovides the dynamic loading of HTML templates into an AngularJS application. This allows developers to load content based on runtime conditions or user interactions. - Code Reusability: By separating HTML templates into reusable components, developers can efficiently reuse components across different parts of the application, reducing redundancy and improving maintainability.
- Modular Architecture: AngularJS includes provides a modular architecture by breaking down complex UIs into smaller, manageable components. Each component can have its own controller and associated behavior.
- Enhanced Developer Productivity: Developers can work more efficiently by focusing on building individual components or modules, which can then be easily integrated into the main application using
ng-include.
Example 1: This example describes the basic use of the ng-includes directive in AngularJS.
<!DOCTYPE html>
<html>
<head>
<script src=
"https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js">
</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:
<!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-includes 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:
<!DOCTYPE html>
<html>
<head>
<script src=
"https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js">
</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-includes directive in AngularJS by including the files that belong from another origin.
<!DOCTYPE html>
<html>
<head>
<script src=
"https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js">
</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.
