THE WORLD'S LARGEST WEB DEVELOPER SITE
HTMLCSSJAVASCRIPTSQLPHPBOOTSTRAPJQUERYANGULARXML
 

AngularJS Includes


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


AngularJS Includes

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

Example

<body ng-app="">

<div ng-include="'myFile.htm'"></div>

</body>
Try it Yourself »

Include AngularJS Code

The HTML documents you include with the ng-include mandate, can likewise contain AngularJS code:

myTable.htm:

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

Include the document "myTable.htm" in your site 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.htm'"></div>
</div>

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

Include Cross Domains

By default, the ng-include order does not enable you to include records from other domains.

To include records from another area, you can include a whitelist of legitimate documents and additionally areas in the config capacity of your application:

Example:

<body ng-app="myApp">

<div ng-include="'http://www.welookups.com/angular_include.asp'"></div>

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

</body>
Try it Yourself »