AngularJS Include

In AngularJS, you can include HTML files in HTML.

Include HTML Files in HTML

In HTML, including HTML files is not supported yet.

Server-side Includes

Most server-side scripts support the include file functionality (SSI： Server Side Includes)。

Using SSI, you can include HTML files in 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.

Usually we use HTTP requests (AJAX) to get data from the server, we can use the returned datainnerHTMLto write into HTML elements.

AngularJS Includes

Using AngularJS, you can useng-includethe directive to include HTML content:

Example

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

Try it Yourself »

The steps are as follows:

example.htm file code:

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

Include AngularJS code

In addition to including HTML files, the ng-include directive can also include AngularJS code:

sites.htm file code:

<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, which 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 a domain access whitelist:

sites.htm file code:

<body ng-app="myApp"> <div ng-include="'https://c.example.com/exampletest/angular_include.php'"></div> <script> var app = angular.module('myApp', []) app.config(function($sceDelegateProvider) { $sceDelegateProvider.resourceUrlWhitelist([ 'https://c.example.com/exampletest/**' ]); }); </script> </body>

Try it Yourself »

In addition, you also need to configure the server to allow cross-domain access. For the configuration method, refer to:The best solution to PHP Ajax cross-domain issues.

angular_include.php file code:

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