THE WORLD'S LARGEST WEB DEVELOPER SITE
HTMLCSSJAVASCRIPTSQLPHPBOOTSTRAPJQUERYANGULARXML
 

AngularJS Includes


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


AngularJS Includes

With AngularJS, you can incorporate 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 incorporate with the ng-incorporate 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-incorporate order does not enable you to incorporate records from other domains.

To incorporate 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.refsnesdata.no/angular_include.asp'"></div>

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

</body>
Try it Yourself »