0
私は、角度のjsアプリケーションにWebサービスを消費しています。側のWebサービスは、私は従業員のすべてのリストを取得するメソッドを呼び出していますが、コンソールウィンドウとそのレコードを表示しない。Angular JS Applicationは、Webサービスからデータを読み込むように偽装しました。
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-
ここにスクリプトコードがあります。ここでHTMLコード
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;
})
}
})
..私は、アプリケーションを実行したときにここで
<!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>
