AngularJS Includes

AngularJS Tutorial

AngularJS Examples

AngularJS Examples

AngularJS Reference Manual

AngularJS Includes

In AngularJS, you can include HTML files within HTML.

Including HTML Files in HTML

In HTML, there is currently no built-in support for including HTML files.

Server-Side Includes

Most server-side scripts support including files (SSI: Server Side Includes).

Using SSI, you can include HTML files within HTML and send them to the client browser.

PHP Example

<?php require("navigation.php"); ?>

Client-Side Includes

There are many ways to include HTML files in HTML through JavaScript.

Typically, we use HTTP requests (AJAX) to fetch data from the server, and the returned data can be written into HTML elements using innerHTML.

AngularJS Includes

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

Example

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

Try it Yourself »

The steps are as follows:

Code for the .htm file:

<h1></h1>
<p>This is an included HTML page, implemented using the ng-include directive!</p>

Including AngularJS Code

The ng-include directive can not only include HTML files, but also include AngularJS code:

Code for the sites.htm file:

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

The included file "sites.php" contains AngularJS code, and it will be executed normally:

Example

<div ng-app="myApp" ng-controller="sitesCtrl"> 
  <div ng-include="'sites.htm'"></div>
</div>
 
<script>
var app = angular.module('myApp', []);
app.controller('sitesCtrl', function($scope, $http) {
    $http.get("sites.php").then(function (response) {
        $scope.names = response.data.records;
    });
});
</script>

Try it Yourself »

Cross-Domain Includes

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

If you need to include files from other domains, you need to set up a domain access whitelist:

Code for the sites.htm file:

<body ng-app="myApp">
 
<div ng-include="''"></div>
 
<script>
var app = angular.module('myApp', [])
app.config(function($sceDelegateProvider) {
    $sceDelegateProvider.resourceUrlWhitelist([
        ''
    ]);
});
</script>
 
</body>

Try it Yourself »

Additionally, you also need to configure the server to allow cross-domain access. For configuration methods, refer to: PHP Ajax Cross-Domain Best Solutions.

Code for the angular_include.php file:

<?php
// Allow all domains to access
header('Access-Control-Allow-Origin:*');
 
echo '<b style="color:red">I am cross-domain content</b>';
?>

YouTip

Angularjs Include

AngularJS Includes

AngularJS Tutorial

AngularJS Examples

AngularJS Reference Manual

AngularJS Includes

Including HTML Files in HTML

Server-Side Includes

PHP Example

Client-Side Includes

AngularJS Includes

Example

Including AngularJS Code

Example

Cross-Domain Includes

📂 Categories