<!DOCTYPE html>
<html ng-app="StudentApp">
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div ng-view></div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.28/angular.js"></script>
<script src="https://code.angularjs.org/1.2.28/angular-route.js"></script>
<script src="app.js"></script>
<script src="StudentController.js"></script>
<script src="EnrollmentController.js"></script>
<script src="StudentService.js"></script>
<script src="EnrollmentService.js"></script>
<script src="AppSettingConstant.js"></script>
<script src="AppSettingValue.js"></script>
</body>
</html>
/* Styles go here */
<h2>{{ AppSettingConstant.Name }} </h2>
<ul ng-repeat="student in Students">
<li>{{student.Name}} - {{student.City}}
<a href="#/Enrollment/{{ student.StudentId }}/{{student.Name}}">View Enrollment</a>
</li>
</ul>
var app = angular.module('StudentApp', ['ngRoute']);
app.config(function($routeProvider) {
$routeProvider
.when('/', {
controller: 'StudentController',
templateUrl: 'Student.html'
})
.when('/Enrollment/:StudentId/:Name', {
controller: 'EnrollmentController',
templateUrl: 'Enrollment.html'
})
.otherwise({
redirectTo: '/'
});
});
var StudentController = function($scope, StudentService,AppSettingConstant) {
$scope.Students = StudentService.GetStudents();
$scope.AppSettingConstant = AppSettingConstant;
};
angular.module('StudentApp').controller('StudentController', StudentController);
<h2>{{ Name }} - Enrollment Term - {{ AppSettingValue.Term}}</h2>
<table>
<tr>
<th>Class</th>
<th>Fee</th>
</tr>
<tr>
<td>{{ Enrollments.Class }}</td>
<td>{{ Enrollments.Fee | currency }}</td>
</tr>
</table>
var EnrollmentController = function($scope, $routeParams, EnrollmentService,AppSettingValue) {
var StudentId = $routeParams.StudentId;
$scope.Name = $routeParams.Name;
$scope.Enrollments = EnrollmentService.GetEnrollmentByStudentId(StudentId);
$scope.AppSettingValue=AppSettingValue;
};
angular.module('StudentApp').controller('EnrollmentController', EnrollmentController);
var StudentService = function() {
var Students = [{
StudentId: 1,
Name: 'Eric Guthmann',
City: 'Omaha'
}, {
StudentId: 2,
Name: 'Taylor Clark',
City: 'Chicago'
}, {
StudentId: 3,
Name: 'Mike Friedman',
City: 'Des Moines'
}];
this.GetStudents = function() {
return Students;
};
};
angular.module('StudentApp').service('StudentService', StudentService);
var EnrollmentService = function() {
var Enrollments = [{
StudentId: 1,
Class: 'CSharp',
Fee: 500
}, {
StudentId: 2,
Class: 'Angular',
Fee: 700
}, {
StudentId: 3,
Class: 'SQL Server',
Fee: 850
}];
this.GetEnrollmentByStudentId = function(StudentId) {
for (var i = 0, len = Enrollments.length; i < len; i++) {
if (Enrollments[i].StudentId === parseInt(StudentId)) {
return Enrollments[i];
}
}
return {};
};
};
angular.module('StudentApp').service('EnrollmentService', EnrollmentService);
angular.module('StudentApp').constant('AppSettingConstant', {
Name: 'Student Enrollment (using Constant)'
});
angular.module('StudentApp').value('AppSettingValue', {
Term: 'Fall (using Value)'
});