Advance: Includes

Adding includes to your application to load external files is similar to routing. However, when you use includes, the files are loaded at run-time and not when an event happens like a click to load content when using routing. The ng-include directive is used to add external files to your app.

First create a file that you would like to include in another file.

myExternalFile.html

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>External File</title>
</head>
<body>
  <h1>Hello from an external file</h1>
</body>
</html>

Beginner Include

Now, create a new file, name it index.html and then write the following highlighted code.

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Host File</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
</head>

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

</html>

NOTE: You can include basic HTML content using the ng-include directive.

Include Demo

Intermediate Include

The include file can also “include” other AngularJS expressions.

First, create the file that you want to include and name it myExternalTable.html.

myExternalTable.html

<style>
table, th, td{
border: 1px solid grey;
border-collapse: collapse;
padding: 5px;
font-family: Arial;
font-weight: bold;
}
table th{background-color:black; color:white;}
table tr:nth-child(odd){
background-color:#94BFF1; color: white;
}
table tr:nth-child(even){
background-color:antiquewhite;
}
</style>

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

Write the JSON object for the data and name it family.php

{ "family_member" : [
{"Name": "Cornelius Chopin", "City": "Round Rock", "Gender": "Male"},
{"Name": "Sheila Chopin", "City": "Round Rock", "Gender": "Female"},
{"Name": "Joshua Chopin", "City": "Round Rock", "Gender": "Male"},
{"Name": "Josiah Chopin", "City": "Round Rock", "Gender": "Male"}
]}

Then, create a new file and add the following highlighted code:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Demo</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>

<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $http){
$http.get("family.php")
.then(function (response) {$scope.names = response.data.family_member;});
});
</script> 

</head>
       
<body>

<div ng-app="myApp" ng-controller="myCtrl"> 
   <div ng-include="'myExternalTable.html'"></div>
</div> 

</body>
</html>

NOTE: It is important to note that BOTH the HTML file (myExternalTable.html) and the JSON object with the data () are being retrieved from external files.

Include with External File and Data

Advanced Include

To include files from another domain, you can add a whitelist of legal files and/or domains in the config function of your application. You also need to ensure that that the server on the destination allows cross domain file access.

<!doctype html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
       
<script>
var app = angular.module('myApp', [])
app.config(function($sceDelegateProvider) {
$sceDelegateProvider.resourceUrlWhitelist(['http://richmediacs.com/**']);
});
</script>
       
<body ng-app="myApp">
  <div ng-include="'http://richmediacs.com/myIncludeFile.php'"></div>
</body>

</html>