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