Question

我是AngularJs的新手。我开发了一个小型应用程序，它将进行CRUD操作。这是我的项目结构

我能够成功运行我的webapi并检索数据。为了调用我的WebApi，我在下面创建了一个Angular服务（studentServices.js）：

＆＃13;

(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;
    }

})();

＆＃13;

我在单独的JS（Constant.js）文件中定义了我的CONSTANTS.WEBAPIPATH，如下所述：

＆＃13;

 (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;        
    //});
}());

＆＃13;

这是我的app.js文件

＆＃13;

(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'];
})();

＆＃13;

最后这是我的2 Angular Controller addController.js

(function () {
'use strict';

angular
    .module('StudentViewer')
    .controller('addController', ['$scope', '$http', '$rootScope', 'studService',  addController]);

// addController。$ inject = [＆＃39; $ scope＆＃39;];

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;
    }
}

}）（）;

这是控制器列表（function（）{ ＆＃39;使用严格的＆＃39;;

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;
    }

}

}）（）;

这是我的index.html

＆＃13;

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

＆＃13;

这是我的列表视图页面，它将在我的应用程序运行时在索引页面内调用。

＆＃13;

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

＆＃13;

我已经设置了我的解决方案多项目启动。我的应用程序运行时没有任何错误，但显示404错误（找不到页面）。 Anyboy可以帮助我运行我的应用程序。

这是我的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);
}

无法在Asp.Net Angularjs webAPI中显示主页

0 个答案: