AngularJS Includes pages

AngularJS Includes pages

AngularJS Includes pages, HTML does not support embedding html pages within html page. To achieve this functionality following ways to incude pages used:

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

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

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

        <div ng-app="" ng-controller="userController">
           <div ng-include="'main.htm'"></div>
           <div ng-include="'friends.htm'"></div>


        <title>Angular JS Includes</title>
        <script src=""></script>
        table, th , td {
           border: 1px solid grey;
           border-collapse: collapse;
           padding: 5px;
        table tr:nth-child(odd) {
           background-color: #FF9900;
        table tr:nth-child(even) {
           background-color: #FFFFCC;
        <h2>AngularJS Include File Example</h2>
        <div ng-app="mainApp" ng-controller="userController">
        <div ng-include="'main.html'"></div>
        <div ng-include="'friends.html'"></div>
        var mainApp = angular.module("mainApp", []);
        mainApp.controller('userController', function($scope) {
           $scope.user = {
              firstName: "Pramod",
              lastName: "Kumawat",
                 {name:'Shrwar Mal',last:'Yadav'}
              fullName: function() {
                 var userObject;
                 userObject = $scope.user;
                 return userObject.firstName + " " + userObject.lastName;


<table border="0">
   <tr><td>Enter first name:</td><td><input type="text" ng-model="user.firstName"></td></tr>
   <tr><td>Enter last name: </td><td><input type="text" ng-model="user.lastName"></td></tr>
   <tr><td>Name: </td><td>{{user.fullName()}}</td></tr>



   <tr ng-repeat="frends in user.frends">
      <td>{{ }}</td>
      <td>{{ frends.last }}</td>


Share Button

About admin

Leave a Reply

Your email address will not be published. Required fields are marked *


Author: pramod kumar kumawat Mob: 9269727062
Free WordPress Themes - Download High-quality Templates