Hi everyone in this blog I’m explaining about angularjs Includes.


HTML does not support embedding html pages within html page. To achieve this functionality following ways are used.

1.       Using Ajax - Make a server call to get the corresponding html page and set it in innerHTML of html control.

2.       Using Server Side Includes - JSP, PHP and other web side server technologies can include html pages within a dynamic page.

Using AngularJS, we can embedded HTML pages within a HTML page using ng-include directive.

<div ng-app="" ng-controller="studentController">
   <div ng-include="'main.htm'"></div>
   <div ng-include="'subjects.htm'"></div>

    <title>Angular JS Includes</title>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
        table, th, td {
            border: 1px solid grey;
            border-collapse: collapse;
            padding: 5px;
            table tr:nth-child(odd) {
                background-color: #f2f2f2;
            table tr:nth-child(even) {
                background-color: #ffffff;
    <h2>AngularJS Sample Application</h2>
    <div ng-app="mainApp" ng-controller="studentController">
        <div ng-include="'main.html'"></div>
        <div ng-include="'subject.html'"></div>
        var mainApp = angular.module("mainApp", []);
        mainApp.controller('studentController', function ($scope) {
            $scope.student = {
                firstName: "Kamlakar",
                lastName: "Singh",
                fees: 500,
                subjects: [
                   { name: 'Physics', marks: 70 },
                   { name: 'Chemistry', marks: 80 },
                   { name: 'Biology', marks: 65 },
                   { name: 'English', marks: 75 },
                   { name: 'Hindi', marks: 67 }
                fullName: function () {
                    var studentObject;
                    studentObject = $scope.student;
                    return studentObject.firstName + " " + studentObject.lastName;

<table border="0">
            <td>Enter first name:</td>
                <input type="text" ng-model="student.firstName"></td>
            <td>Enter last name: </td>
                <input type="text" ng-model="student.lastName"></td>
            <td>Name: </td>
        <tr ng-repeat="subject in student.subjects">
            <td>{{ subject.name }}</td>
            <td>{{ subject.marks }}</td>

To run this example, you need to deploy textAngularJS.htm, main.htm and subjects.htm to a webserver. Open textAngularJS.htm using url of your server in a web browser. See the result.

  Modified On Feb-17-2018 12:50:50 AM

Leave Comment