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

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"><a href="/create" class="btn btn-primary" role="button">Add Student</a></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>
                <a href="/edit/{{stud.rollNo}}" class="glyphicon glyphicon-edit"></a>
            </td>
            <td>
                <a href="/delete/{{stud.rollNo}}" class="glyphicon glyphicon-trash"></a>
            </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);
}

What is the URL you are trying to access ? Also, please include **only relevant code** related to the problem. — Shyju, May 12 '16 at 15:54
An web api project does not need a startup.cs file, I'm confused why you need that file — Danny, May 12 '16 at 16:56
Yes Dan, you are absolutely right. It is just for reference. — Shiv Shankar Maiti, May 13 '16 at 08:50
Copying and pasting random code from your project will not help us find the problem. — Federico Dipuma, May 13 '16 at 12:36

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

0 Answers0