Home > DeveloperSection > Blogs > AngularJs Includes

AngularJs Includes

Angular JS Angularjs Scope  Angularjs Controller 
0 Comment(s)
 698  View(s)
Rate this:

AngularJs Includes

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.

Don't want to miss updates? Please click the below button!

Follow MindStick