AngularJS Includes

With AngularJS, you can include HTML from an external file.

* AngularJS Includes

With AngularJS, you can include HTML content using the ng-include directive:

Example:
<body ng-app="">

<div ng-include="'myfile.html'"></div>

</body>

* Include AngularJS Code

The HTML files you include with the ng-include directive can also contain AngularJS code:

mytable.html:

<table>
<tr ng-repeat="x in names">
<td>{{ x.Name }}</td>
<td>{{ x.Country }}</td>
</tr>
</table>

Include the file "mytable.html" on your web page, and all AngularJS code will be executed, even the code inside the included file:

Include the file "mytable.html" on your web page, and all AngularJS code will be executed, even the code inside the included file:

Example:

<body>

<div ng-app="myapp" ng-controller="customersCtrl">
<div ng-include="'mytable.html'"></div>
</div>

<script>
var app = angular.module('myapp', []);
app.controller('customersCtrl', function($scope, $http) {
$http.get("customers.php").then(function (response) {
$scope.names = response.data.records;
});
});
</script>

* Include Cross Domains

By default, the ng-include directive does not allow you to include files from other domains.

To include files from another domain, you can add a whitelist of legal files and/or domains in the config function of your application:

Example:

<body ng-app="myapp">

<div ng-include="'angular_include.php'"></div>

<script>
var app = angular.module('myapp', [])
app.config(function($sceDelegateProvider) {
$sceDelegateProvider.resourceUrlWhitelist([
'https://www.dhavalwork.com/**'
]);
});
</script>

</body>

Note: Be sure that the server on the destination allows cross domain file access.

AngularJS Includes