Angular JS应用程序无法从Web Service加载数据

Question

我正在将Web服务使用到angular js应用程序中。在Web服务中，我正在调用一种方法来获取所有雇员列表，但是我在Google chrome控制台窗口中出现以下错误并且未显示记录。

angular.min.js:sourcemap:123 Error: transition superseded
    at $StateProvider.$get (angular-ui-router.js:2903)


angular.min.js:sourcemap:123 Error: transition aborted

    at Object.invoke (angular.min.js:sourcemap:44) "Possibly unhandled rejection: {}"

angular.min.js:123 Error: [$injector:unpr] 
$state.transition.resolved.then.$state.transition @ angular-ui-router.js:3352

angular.min.js:123 Error: [$injector:unpr] http://errors.angularjs.org/1.6.5/$injector/unpr?p0=%24routeProvider%20%3C-
$state.transition.resolved.then.$state.transition @ angular-ui-router.js:3352

angular.min.js:123 Error: [$injector:unpr] http://errors.angularjs.org/1.6.5/$injector/unpr?p0=%24routeProvider%20%3C-

这是脚本代码。

var app = angular
    .module("Demo", ["ui.router"])
    .config(function ($stateProvider) {

        $stateProvider
            .state("home", {
                url: "/home",
                templateUrl: "Templates/home.html",
                controller: "homeController",
                controllerAs: "homeCtrl"
            })
            .state("courses", {
                url: "/courses",
                templateUrl: "Templates/courses.html",
                controller: "coursesController",
                controllerAs: "coursesCtrl"
            })
            .state("studentDetails", {
                url: "/students/:id",
                templateUrl: "Templates/studentDetails.html",
                controller: "studentDetailsController",
                controllerAs: "studentDetailsCtrl"
            })
            .state("students", {
                url: "/students",
                templateUrl: "Templates/students.html",
                controller: "studentsController",
                controllerAs: "studentsCtrl",
                resolve: {
                    studentslist: function ($http, $location) {
                        return $http.get("StudentService.asmx/GetAllStudents")
                            .then(function (response) {
                                return response.data;
                            })
                    }
                }
            })
            .config(function ($urlRouterProvider) {
                $urlRouterProvider.otherwise("/home");
            })
    })

    .controller("homeController", function () {
        this.message = "Home Page";
    })
    .controller("coursesController", function () {
        this.courses = ["C#", "VB.NET", "ASP.NET", "SQL Server"];
    })

    .controller("studentsController", function (studentslist, $state, $location) {
        var vm = this;

        vm.studentSearch = function () {
            $state.go("studentsSearch", { name: vm.name });
        }

        vm.reloadData = function () {
            $state.reload();
        }

        vm.students = studentslist;
    })

    .controller("studentDetailsController", function ($http, $stateParams) {
        var vm = this;
        $http({
            url: "StudentService.asmx/GetStudent",
            method: "get",
            params: { id: $stateParams.id }
        }).then(function (response) {
            vm.student = response.data;
        })
    })
    .controller("studentsSearchController", function ($http, $stateParams) {
        var vm = this;

        if ($stateParams.name) {
            $http({
                url: "StudentService.asmx/GetStudentsByName",
                method: "get",
                params: { name: $stateParams.name }
            }).then(function (response) {
                vm.students = response.data;
            })
        }
        else {
            $http.get("StudentService.asmx/GetAllStudents")
                .then(function (response) {
                    vm.students = response.data;
                })
        }
    })

这是HTML代码。

<!DOCTYPE html>
<html ng-app="Demo">
<head>
    <meta charset="utf-8" />
    <title></title>
    <base href="/" />
    <script src="Script/angular.min.js"></script>
    <script src="Script/angular-ui-router.js"></script>

    <script src="Script/script.js"></script>
    <link href="StyleSheet.css" rel="stylesheet" />


</head>
<body>
    <table style="font-family: Arial">
        <tr>
            <td colspan="2" class="header">
                <h1>
                    WebSite Header
                </h1>
            </td>
        </tr>
        <tr>
            <td class="leftMenu">

                <a ui-sref="home">Home</a>
                <a ui-sref="courses">Courses</a>
                <a ui-sref="students">Students</a>

            </td>
            <td class="mainContent">
                <ui-view></ui-view>
            </td>
        </tr>
        <tr>
            <td colspan="2" class="footer">
                <b>Website Footer</b>
            </td>
        </tr>
    </table>

</body>
</html>

这是我运行应用程序时的屏幕截图。

Answer 1

我唯一看到的就是您在$ stateProvider状态末尾附加了一个配置块。 我不认为$ stateProvider API上有实际的配置功能。 将$ urlRouterProvider注入合并到主配置块中，并添加$ urlRouterProvider.otherwise（“ / home”）; 可能在$ stateProvider.state（...）调用之后，在该配置块中的某个位置调用。

我希望这能够帮到你。

Angular JS应用程序无法从Web Service加载数据

问题描述

1 个解决方案

解决方案1
1 已采纳 2017-10-30 04:13:35

Angular JS应用程序无法从Web Service加载数据

问题描述

1 个解决方案

解决方案1 1 已采纳 2017-10-30 04:13:35

解决方案1
1 已采纳 2017-10-30 04:13:35