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>
        </div>

Index.html

<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: #FF9900;
        }
        table tr:nth-child(even) {
           background-color: #FFFFCC;
        }
        </style>
        </head>
        <body>
        <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>
        </div>
        <script>
        var mainApp = angular.module("mainApp", []);
        
        mainApp.controller('userController', function($scope) {
           $scope.user = {
              firstName: "Pramod",
              lastName: "Kumawat",
              fees:500,
                  frends:[
                 {name:'Pramod',last:'kumawat'},
                 {name:'Vishvendra',last:'Beniwal'},
                 {name:'Veependra',last:'Jat'},
                 {name:'Kamal',last:'kumawat'},
                 {name:'Shrwar Mal',last:'Yadav'}
                 
              ],
              fullName: function() {
                 var userObject;
                 userObject = $scope.user;
                 return userObject.firstName + " " + userObject.lastName;
              }
           };
        });
        </script>
        </body>
        </html>

main.html

<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>
</table>

friends.html

<p>Frends:</p>

<table>
   <tr>
      <th>Name</th>
      <th>last</th>
   </tr>
   <tr ng-repeat="frends in user.frends">
      <td>{{ frends.name }}</td>
      <td>{{ frends.last }}</td>
   </tr>
</table>
angularjsincludefileexample

angularjsincludefileexample

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