AngularJS – Includes

Pritty October 9, 2018 Angular Js, Web Development Leave a comment 1,037 Views

The HTML does not support to include the client side code from the other files. Consider the example, if you want to develope the application for numberic operations. If we define or write the functionality in a separate files; that separate files can re-used across multiple application where we want. For performing this application we just include the functionality file( already specified). This technique norally include statment. But the include statments are available in java and .net programming.

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

Client Side includes
Server Side Includes
How to include HTML file in AngularJS

Client Side includes

The Javascript is the common way to include the HTML code.
Which can be used to manipulate the content in an HTML page on the fly because JavaScript is a programming language.
The below steps shows how this can be accomplished.

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

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

<div>

This is an included file

</div>

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

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 ‘Subpage.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(“Subpage.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("Subpage.html"); 
				});
			</script> 
		</head> 
		<body> 
			<div id="Content"></div>
		</body> 
		</html>

<html>

<head>

$(function(){

$("#Content").load("Subpage.html");

});

</script>

</head>

<body>

</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.

Navigation menu
Page Header
Page Footer

How to include HTML file in AngularJS

The ng-include directives helps to include the functionality from other AngularJS files. In the main AngularJS application, the primary purpose of the “ng-include directive” is used to compile, fetch and include an external HTML fragment.

Syntax

<div ng-include = “’includefile.html'”></div>

Example

includefile.html

<table border="1"> <tr> <td>Id:</td> <td><input type="number" ng-model="empid"></td></tr> <tr><td>Name: </td> <td><input type="text" ng-model="empname"></td></tr> <br><tr> <td>Details of Employee:</td> <td>{{empid + ", " + empname}}</td> </tr> </table>

1
2
3
4
5
6
7
8
9
10
11

<table border="1">
<tr>
<td>Id:</td>
<td><input type="number" ng-model="empid"></td></tr>
<tr><td>Name: </td>
<td><input type="text" ng-model="empname"></td></tr>
<br><tr>
<td>Details of Employee:</td>
<td>{{empid + ", " + empname}}</td>
</tr>
</table>

employeedetails.html

<!DOCTYPE html> <html> <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script> <body> <div ng-app="details" ng-controller="employeeCtrl"> <div ng-include = "'includefile.html'"></div> </div> <script> var details= angular.module('details', []); details.controller('employeeCtrl', function($scope) { $scope.empid = 20; $scope.empname = "John"; }); </script> </body> </html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

<!DOCTYPE html>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>
<div ng-app="details" ng-controller="employeeCtrl">
<div ng-include = "'includefile.html'"></div>
</div>
<script>
var details= angular.module('details', []);
details.controller('employeeCtrl', function($scope) {
$scope.empid = 20;
$scope.empname = "John";
});
</script>
</body>
</html>

2018-10-09
Pritty