Using AngularJS create a SPA that shows Teacher Profile who are
teaching SYBBA (CA) with photo.
< html>
<html ng-app="TeacherProfileApp">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
</head>
<body ng-controller="TeacherProfileController">
<h1>Teacher
Profiles for SYBBA (CA)</h1>
<div
ng-repeat="teacher in teachers">
<div
class="teacher-profile">
<img
ng-src="{{ teacher.photo }}" alt="{{ teacher.name }}">
<h2>{{
teacher.name }}</h2>
<p>Subject: {{ teacher.subject }}</p>
</div>
</div>
<script>
var app =
angular.module('TeacherProfileApp', []);
app.controller('TeacherProfileController', function ($scope) {
$scope.teachers
= [
{
name:
'Teacher 1',
subject:
'SYBBA (CA)',
photo:
'teacher1.jpg'
},
{
name:
'Teacher 2',
subject:
'SYBBA (CA)',
photo:
'teacher2.jpg'
},
{
name:
'Teacher 3',
subject:
'SYBBA (CA)',
photo: 'teacher3.jpg'
},
{
name:
'Teacher 4',
subject:
'SYBBA (CA)',
photo:
'teacher4.jpg'
}
];
});
</script>
<style>
.teacher-profile {
border: 1px
solid #ccc;
margin: 10px;
padding: 10px;
text-align:
center;
}
img {
max-width:
200px;
max-height:
200px;
}
</style>
</body>
</html>
