Not able to display the home page in Asp.Net Angularjs webAPI - angularjs

Question

I am new in AngularJs. I have developed a small application which will conduct CRUD Operation. This is my Project Structure
I am able to run my webapi successfully and retrieve the data. To call my WebApi I have created a Angular service (studentServices.js) mention below:
(function () {
'use strict';
angular
.module('StudentViewer')
.factory('studService', ['$http', '$rootScope', '$location', 'CONSTANTS', StudentService]);
function StudentService($http, $rootScope, $location, CONSTANTS) {
var factory = {
getStudentList: function () {
return $http.get(CONSTANTS.WEBAPIPATH + "student/getAllStudent");
},
getStudent: function (params) {
return $http.get(CONSTANTS.WEBAPIPATH + "student/getStudentByRollNo/" + params);
},
addStudent: function (params) {
return $http.get(CONSTANTS.WEBAPIPATH + "student/addNewStudent", params);
},
updateStudent: function (params) {
return $http.get(CONSTANTS.WEBAPIPATH + "student/UpdateStudentProfile", params);
},
deleteStudent: function (paramr) {
return $http.get(CONSTANTS.WEBAPIPATH + "student/deleteStudentRecord/" + params);
}
};
return factory;
}
})();
I have define my CONSTANTS.WEBAPIPATH in a separate JS(Constant.js) file as mention below:
(function () {
angular
.module('StudentViewer')
.constant('CONSTANTS', {
'WEBAPIPATH': 'http://localhost:2751/api/',
'MAXRECORDSPERPAGE': 15,
'STARTPAGE': 1,
'MAXPAGESTODISPLAY': 5,
'PAGENUMBERSTODISPLAYSTART': 1,
'PAGENUMBERSTODISPLAYEND': 5
});
//.run(function ($rootScope, CONSTANTS, $location) {
// $rootScope.CONSTANTS = CONSTANTS;
//});
}());
And here is my app.js file
(function () {
'use strict'
.module('StudentViewer', ['ngRoute'])
.config(Config);
function Config($httpProvider, $routeProvider) {
$httpProvider.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded; charset=UTF-8';
$httpProvider.defaults.transformRequest = function (data) {
console.log(data);
if (data === undefined) {
return data;
}
return $.param(data);
};
$routeProvider
.when('/student', {
templateUrl: 'app/view/studentList.html',
controller: 'ListController'
})
.when('/student/create', {
templateUrl: 'app/view/add.html',
controller: 'addController'
})
.when('/student/edit/:rollno', {
templateUrl: 'app/view/edit.html',
controller: 'editController'
})
.when('/student/delete/:rollno', {
templateUrl: 'app/view/delete.html',
controller: 'deleteController'
});
}
Config.$inject = ['$httpProvider', '$routeProvider'];
})();
And finally this is my 2 Angular Controller addController.js
(function () {
'use strict';
angular
.module('StudentViewer')
.controller('addController', ['$scope', '$http', '$rootScope', 'studService', addController]);
// addController.$inject = ['$scope'];
function addController($scope, $http, $rootScope, studService) {
$scope.title = 'addController';
$scope.stud = {
rollNo: 0,
name: '',
stClass: 0,
address: '',
phone: '',
email: '',
DOB: new Date().toLocaleDateString()
};
$scope.submit = function (isvalid) {
if (!isvalid) return false;
$scope.successResponse = '';
$scope.failResponse = '';
var param = {
rollNo: 0,
name: $scope.stud.name,
stClass:$scope.stud.stClass,
address: $scope.stud.address,
phone: $scope.stud.phone,
email: $scope.stud.email,
DOB: $scope.stud.DOB
};
studService.addStudent(param).then(onSubmitSuccess, onSubmitFaliure);
};
function onSubmitSuccess(response) {
$scope.rollNo = response.data.rollNo;
}
function onSubmitFaliure(response) {
$scope.failedMessage = response.data.ExceptionMessage;
}
}
})();
This is the list Controller
(function () {
'use strict';
angular
.module('StudentViewer')
.controller('ListController',['$scope', '$http', '$rootScope', 'studService', ListController]);
//ListController.$inject = ['$scope'];
function ListController($scope, $http, $rootScope, studService, $rootParam, $location) {
$scope.title = 'ListController';
studService.getStudentList().then(onListSuccess, onListFaliur);
function onListSuccess(response) {
$scope.studs = respons.data.items;
}
function onListFaliur(response) {
$scope.failedMessage = response.data.ExceptionMessage;
}
}
})();
Here is my index.html
<!DOCTYPE html>
<html ng-app="StudentViewer">
<head>
<meta charset="utf-8" />
<title></title>
<script src="lib/angular/angular.min.js"></script>
<script src="lib/angular-resource/angular-resource.min.js"></script>
<script src="lib/angular-route/angular-route.min.js"></script>
<script src="lib/jquery/dist/jquery.min.js"></script>
<script src="lib/bootstrap/dist/js/bootstrap.min.js"></script>
<link href="lib/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet" />
<script src="app/js/app.js"></script>
</head>
<body>
<div class="container">
<h1>STUDENT AAP</h1>
<div class="col-lg-12">
<div class="col-md-3">Add Student</div>
</div>
<div ng-view>
</div>
</div>
</body>
</html>
Here is my list view page which will be called inside the index page when my application is run.
<h3>Student List</h3>
<div class="table-responsive" ng-controller="ListController">
<table class="table table-striped table-bordered">
<tr>
<th>Roll No</th>
<th>Student's Name</th>
<th>Class</th>
<th>Address</th>
<th>Phone</th>
<th>Email</th>
<!--<th>Date of Birth</th>-->
<th></th>
</tr>
<tr ng-repeat="stud in studs">
<td ng-bind="stud.rollNo"></td>
<td ng-bind="stud.name"></td>
<td ng-bind="stud.stClass"></td>
<td ng-bind="stud.address"></td>
<td ng-bind="stud.phone"></td>
<td ng-bing="stud.email"></td>
<!--<td></td>-->
<td>
</td>
<td>
</td>
</tr>
</table>
</div>
I have set my solution multi project startup. My application is run with out any error, but showing 404 error (No page found). Anyboy can help me out to run my application.
Here is my startup.cs
public class Startup
{
// This method gets called by the runtime. Use this method to add services to the container.
// For more information on how to configure your application, visit http://go.microsoft.com/fwlink/?LinkID=398940
public void ConfigureServices(IServiceCollection services)
{
}
// This method gets called by the runtime. Use this method to configure the HTTP request pipeline.
public void Configure(IApplicationBuilder app)
{
// app.UseIISPlatformHandler();
//app.Run(async (context) =>
//{
// await context.Response.WriteAsync("Hello World!");
//});
}
// Entry point for the application.
public static void Main(string[] args) => WebApplication.Run<Startup>(args);
}