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. In this tutorial, you will learn-
Client Side includes Server Side Includes How to include HTML file in AngularJS
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. 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,
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. There is a reference to a jquery script. JQuery is a scripting language built on top of Javascript which makes DOM manipulation even easier. 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.
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.
Page header Page footer 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;
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. 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
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’”>
