Search This Blog

Saturday, May 21, 2016

Include HTML in Single Page Application

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="IncudeHTMl.aspx.cs" Inherits="AjaxApp.Angular_Js.IncudeHTMl" %>

<!DOCTYPE html>

<html>
   <head>
      <title>Angular JS Includes</title>
   
       <script src="../Script/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 style="background-color:azure">
         <div ng-include = "'/Angular%20Js/main.html'"></div>
         <div ng-include = "'/Angular%20Js/Students.html'"></div>

          </Div>
       
          <br />
          <br />
<div style="background-color:aqua">
 <div ng-controller="studentController1" >
         
         <div ng-include = "'/Angular%20Js/main1.html'"></div>
         <div ng-include = "'/Angular%20Js/Students1.html'"></div>
      </div>

</div>
       
     <div style="background-color:gray">
  <div ng-controller = "shapeController">
            <p>{{message}} <br/> {{type}} </p>
         </div>
         
          <div ng-controller = "circleController">
            <p>{{message}} <br/> {{type}} </p>
         </div>
       
         <div ng-controller = "squareController">
            <p>{{message}} <br/> {{type}} </p>
         </div>

     </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;
                  }
              };
          });
         //var mainApp1 = angular.module("mainApp1", []);
          mainApp.controller('studentController1', function ($scope) {
              $scope.Ram = {
                  firstName: "Ram",
                  lastName: "Vinay",
                  fees: 6666,

                  subjectsRam: [
                     { 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.Ram;
                      return studentObject.firstName + " " + studentObject.lastName;
                  }
              };
          });

          mainApp.controller("shapeController", function ($scope) {
              $scope.message = "In shape controller";
              $scope.type = "Shape";
          });

          mainApp.controller("circleController", function ($scope) {
              $scope.message = "In circle controller";
          });

          mainApp.controller("squareController", function ($scope) {
              $scope.message = "In square controller";
              $scope.type = "Square";
          });
      </script>
     
   </body>
</html>


No comments:

Post a Comment