ng-include in AngularJS: How to include HTML File [Example]

By : James Hartman James Hartman
Hours Updated

By default, HTML does not provide the facility to include client-side code from other files. It’s normally a good practice in any programming language to distribute functionality across various files for any application.

For example, if you had logic for numeric operations, you would normally want to have that functionality defined in one separate file. That separate file could then be re-used across multiple applications by just including that file.

This is normally the concept of Include statements which are available in programming languages such as .Net and Java.

This tutorial looks at other ways files (files which contain external HTML code) can be included in the main HTML file.

Client Side includes

One of the most common ways is to include HTML code is via Javascript. JavaScript is a programming language which can be used to manipulate the content in an HTML page on the fly. Hence, Javascript can also be used to include code from other files.

The below steps shows how this can be accomplished.

Step1) Define a file called Sub.html and add the following code to the file.

<div>
	This is an included file
</div>

Step 2) Create a file called Sample.html, which is your main application file and add the below code snippet.

Below are the main aspects to note about the below code,

  1. In the body tag, there is a div tag which has an id of Content. This is the place where the code from the external file ‘Sub.html’ will be inserted.
  2. There is a reference to a jquery script. JQuery is a scripting language built on top of Javascript which makes DOM manipulation even easier.
  3. In the Javascript function, there is a statement ‘$(“#Content”).load(“Sub.html”);’ which causes the code in the file Sub.html to be injected in the div tag which has the id of Content. 
    <html> 
	  <head> 
	    <script src="jquery.js"></script> 
	    <script> 
	    $(function(){
	      $("#Content").load("Sub.html"); 
	    });
    </script> 
  </head> 

<body> 
     <div id="Content"></div>
  </body> 
</html>

Server Side Includes

Server Side Includes are also available for including a common piece of code throughout a site. This is normally done for including content in the below parts of an HTML document.

  1. Page header
  2. Page footer
  3. Navigation menu.

For a web server to recognize a Server Side Includes, the file names have special extensions. They are usually accepted by the web server such as .shtml, .stm, .shtm , .cgi.

The directive used for including content is the “include directive”. An example of the include directive is shown below;

<!--#include virtual="navigation.cgi" -->
  • The above directive allows the content of one document to be included in another.
  • The “virtual” command above code is used to specify the target relative to the domain root of the application.
  • Also, to the virtual parameter, there is also the file parameter which can be used. The “file” parameters are used when one needs to specify the path relative to the directory of the current file.

Note:

The virtual parameter is used to specify the file (HTML page, text file, script, etc.) that needs to be included. If the web server process does not have access to read the file or execute the script, the include command will fail. The ‘virtual’ word is a keyword that is required to be placed in the include directive.

How to include HTML file in AngularJS

Angular provides the function to include the functionality from other AngularJS files by using the ng-include directive.

The primary purpose of the “ng-include directive” is used to fetch, compile and include an external HTML fragment in the main AngularJS application.

Let’s look at the below code base and explain how this can be achieved using Angular.

Step 1) let’s write the below code in a file called Table.html. This is the file which will be injected into our main application file using the ng-include directive.

The below code snippet assumes that there is a scope variable called “tutorial.” It then uses the ng-repeat directive, which goes through each topic in the “Tutorial” variable and displays the values for the ‘name’ and ‘description’ key-value pair.

<table>
    <tr ng-repeat="Topic in tutorial">
        <td>{{ Topic.Name }}</td>
        <td>{{ Topic.Country }}</td>
    </tr>
</table>

Step 2) let’s write the below code in a file called Main.html. This is a simple angular.JS application which has the following aspects

  1. Use the “ng-include directive” to inject the code in the external file ‘Table.html’. The statement has been highlighted in bold in the below code. So the div tag ‘ <div ng-include=”‘Table.html'”></div>’ will be replaced by the entire code in the ‘Table.html’ file.
  2. In the controller, a “tutorial” variable is created as part of the $scope object. This variable contains a list of key-value pairs.

In our example, the key value pairs are

  1. Name – This denotes the name of a topic such as Controllers, Models, and Directives.
  2. Description – This gives a description of each topic

The tutorial variable is also accessed in the ‘Table.html’ file.

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Event Registration</title>
        <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
</head>
<body ng-app="sampleApp">
<div ng-controller="AngularController">
    <h3> Guru99 Global Event</h3>
		<div ng-include="'Table.html'"></div>
</div>
<script>

    var sampleApp = angular.module('sampleApp',[]);
    sampleApp.controller('AngularController', function($scope) {
        $scope.tutorial =[
            {Name: "Controllers" , Description : "Controllers in action"},
            {Name: "Models" , Description : "Models and binding data"},
            {Name: "Directives" , Description : "Flexibility of Directives"}
        ];

    });
</script>
</body>
</html>

When you execute the above code, you will get the following output.

Output:

Include HTML file in AngularJS

Summary

  • By default, we know that HTML does not provide a direct way to include HTML content from other files like other programming languages.
  • Javascript along with JQuery is the best-preferred option for embedding HTML content from other files.
  • Another way of including HTML content from other files is to use the <include> directive and the virtual parameter keyword. The virtual parameter keyword is used to denote the file which needs to be embedded. This is known as server-side includes.
  • Angular also provides the facility to include files by using the ng-include directive. This directive can be used to inject code from external files directly into the main HTML file.
You Might Like: