Prev Page
Next Page  
AngularJS Includes
AngularJS include HTML from an external file. You can include HTML content using the ng-include directive. 

Ajax :  Make a server call to get the corresponding html page and set it in innerHTML of html control.
Server Side Includes : JSP, PHP and other web side server technologies can include html pages within a dynamic page.

Using AngularJS, we can embed HTML pages within a HTML page using ng-include directive.
<div ng-app="" ng-controller="employeeController">
   <div ng-include="'include-forms.html'"></div>
   <div ng-include="'includes-employee.html'"></div>
</div>
AngularJS Includes Example
includes.html
<!DOCTYPE html>
<html>
<head>
    <title>AngularJS Includes</title>
    <script type="text/javascript" src="../../js/angular.min.js"></script>
</head>
 
<style type="text/css">
 table, th , td {
border: 1px solid #0099da;
border-collapse:collapse;
padding:5px;
 }
 
 table tr:nth-child(odd) {
background-color:#F2F2F2;
 }
 
 table tr:nth-child(even) {
background-color:#F9F9F9;
 }
</style>
   <body>
      
      <h2>AngularJS Sample Application</h2>
      
        <div ng-app="mainApp" ng-controller="employeeController">
           <div ng-include="'include-forms.html'"></div>
           <div ng-include="'includes-employee.html'"></div>
        </div>
      
      <script type="text/javascript">
         var mainApp = angular.module("mainApp", []);
         
         mainApp.controller('employeeController', function($scope) {
            $scope.employee = {
               firstName: "V V Ramana",
               lastName: "Reddy",
               Salary:90000,
               
               years:[
                  {year:'2014',salary:6000},
                  {year:'2015',salary:8000},
                  {year:'2016',salary:12000},
                  {year:'2017',salary:20000},
                  {year:'2018',salary:90000}
               ],
               
               fullName: function() {
                  var employeeObject;
                  employeeObject = $scope.employee;
                  return employeeObject.firstName + " " + employeeObject.lastName;
               }
            };
         });
      </script>
      
   </body>
</html>
include-forms.html
<table border="0">
   <tr>
      <td>Enter first name:</td>
      <td><input type="text" ng-model="employee.firstName"></td>
   </tr>
   
   <tr>
      <td>Enter last name: </td>
      <td><input type="text" ng-model="employee.lastName"></td>
   </tr>
   
   <tr>
      <td>Name : </td>
      <td>{{employee.fullName()}}</td>
   </tr>
</table>
include-employee.html
<h4>Year wise salary :</h4>
<table border="1">
   <tr>
      <th>Year</th>
      <th>Salary</th>
   </tr>
   
   <tr ng-repeat="employee in employee.years">
      <td>{{ employee.year }}</td>
      <td>{{ employee.salary }}</td>
   </tr>
</table>
Output :
  Prev Page
Next Page