AngularJS - Includes

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

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

·        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>

</div>

Example

tryAngularJS.htm

<html>

   <head>

      <title>Angular JS Includes</title>

      <script src = "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>

     

      <style>

         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;

         }

      </style>

     

   </head>

   <body>

     

      <h2>AngularJS Sample Application</h2>

     

      <div ng-app = "mainApp" ng-controller="studentController">

         <div ng-include = "'/angularjs/src/include/main.htm'"></div>

         <div ng-include = "'/angularjs/src/include/subjects.htm'"></div>

      </div>

     

      <script>

         var mainApp = angular.module("mainApp", []);

        

         mainApp.controller('studentController', function($scope) {

            $scope.student = {

               firstName: "Mahesh",

               lastName: "Parashar",

               fees:500,

              

               subjects:[

                  {name:'Physics',marks:70},

                  {name:'Chemistry',marks:80},

                  {name:'Math',marks:65},

                  {name:'English',marks:75},

                  {name:'Hindi',marks:67}

               ],

              

               fullName: function() {

                  var studentObject;

                  studentObject = $scope.student;

                  return studentObject.firstName + " " + studentObject.lastName;

               }

            };

         });

      </script>

     

   </body>

</html>

main.htm

<table border = "0">

   <tr>

      <td>Enter first name:</td>

      <td><input type = "text" ng-model = "student.firstName"></td>

   </tr>

  

   <tr>

      <td>Enter last name: </td>

      <td><input type = "text" ng-model = "student.lastName"></td>

   </tr>

  

   <tr>

      <td>Name: </td>

      <td>{{student.fullName()}}</td>

   </tr>

</table>

subjects.htm

<p>Subjects:</p>

<table>

   <tr>

      <th>Name</th>

      <th>Marks</th>

   </tr>

  

   <tr ng-repeat = "subject in student.subjects">

      <td>{{ subject.name }}</td>

      <td>{{ subject.marks }}</td>

   </tr>

</table>

Output

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.