Javascript 调用角度资源后未加载角度页面
我正在使用angular为当地出租车公司制作一个调度系统。我不是angular的专业人士,它的所有功能都很好,所以我需要以下方面的帮助。我正在设置angular route,以便将html页面插入到主html文档中,然后我设置了一个工厂,从我使用springboot用java编写的REST服务请求数据。成功接收数据后,我注意到,如果浏览器控制台没有给我任何错误,我的测试页面将不再加载 这些是我的文件: main index.html:Javascript 调用角度资源后未加载角度页面,javascript,html,angularjs,Javascript,Html,Angularjs,我正在使用angular为当地出租车公司制作一个调度系统。我不是angular的专业人士,它的所有功能都很好,所以我需要以下方面的帮助。我正在设置angular route,以便将html页面插入到主html文档中,然后我设置了一个工厂,从我使用springboot用java编写的REST服务请求数据。成功接收数据后,我注意到,如果浏览器控制台没有给我任何错误,我的测试页面将不再加载 这些是我的文件: main index.html: <!DOCTYPE html> <html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>dispatch</title>
<!--bootstrap stylesheet-->
<link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.min.css"/>
<!--custom stylesheet-->
<link rel="stylesheet" href="css/index.css"/>
</head>
<body ng-app="DispatchApp">
<ng-view ng-controller="AppCtrl">
</ng-view>
<!--import libraries-->
<script src="node_modules/angular/angular.min.js"></script>
<script src="node_modules/angular-resource/angular-resource.min.js"></script>
<script src="node_modules/angular-route/angular-route.min.js"></script>
<script src="node_modules/jquery/dist/jquery.min.js"></script>
<script src="node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
<!--application imports-->
<script src="index.js"></script>
<script src="modules/views/index.js"></script>
<script src="modules/views/vehicles/index.js"></script>
<script src="modules/services/index.js"></script>
<script src="modules/services/api/index.js"></script>
<script src="modules/services/api/vehicles/index.js"></script>
</body>
</html>
我的测试视图的控制程序:
angular.module('DispatchApp.views.vehicles', ['ngRoute'])
.config(['$routeProvider', function($routeProvider) {
$routeProvider.when('/vehicles',
{
templateUrl: 'modules/views/vehicles/index.html',
controller: 'viewsVehiclesController',
reloadOnSearch: false,
resolve:
{
resolvedVehiclesListing: [ 'VehicleApi', function(VehicleApi)
{
return VehicleApi.query().$promise;
}]
}
});
}])
.controller('viewsVehiclesController',['$scope', 'resolvedVehiclesListing', function ($scope, resolvedVehiclesListing)
{
//console.log(resolvedVehiclesListing.data);
//$scope.vehicles = resolvedVehiclesListing.data;
}])
用于从后端获取数据的api服务和工厂:
angular.module('DispatchApp.services.api', ['ngResource', 'DispatchApp.services.api.vehicles'])
.service('PrefixService', [function()
{
var prefix = 'http://localhost:8080/';
var Prefix = function()
{
return prefix;
};
return {Prefix : Prefix};
}])
.factory('DispatchApiResource', ['$resource', 'PrefixService', function($resource, PrefixService)
{
return function(endpoint, a, config)
{
return $resource(PrefixService.Prefix() + endpoint, a , config);
};
}])
.factory('VehicleApi', ['DispatchApiResource', function(DispatchApiResource)
{
return DispatchApiResource('vehicle/:id', null,
{
'query': {method: 'GET', isArray: false},
'update': {method: 'PUT', params: {id: "@id"}}
});
}]);
我不知道为什么测试html文件没有被注入到ng视图标记中,即使从后端接收到数据,要显示的html文件正在加载到我的bowser(google chrome)的网络选项卡中,并且我在控制台中没有错误
以下是我的完整目录结构:
/dispatch-frontend
index.html
index.js
/css
index.css
/modules
/services
index.js
/api
index.js
/vehicles
index.js
/views
index.js
/vehicles
index.html
index.js
很抱歉发了这么长的帖子,但我在这里感到绝望。您有一个
解析
函数,它接受VehicleApi
服务,但该服务已在DispatchApp.services.api
中注册,该函数未在任何地方引用,因此解析将挂起:
angular.module('DispatchApp.services.api', ..)
.factory('VehicleApi', ['DispatchApiResource', function(DispatchApiResource)
{
..
}]);
我认为您忘记了对api模块设置依赖项:
angular.module('DispatchApp.views.vehicles', [
'ngRoute',
'DispatchApp.services.api'
])
您有一个
resolve
函数,它接受VehicleApi
服务,但该服务已在DispatchApp.services.api
中注册,该服务未在任何地方引用,因此解析将挂起:
angular.module('DispatchApp.services.api', ..)
.factory('VehicleApi', ['DispatchApiResource', function(DispatchApiResource)
{
..
}]);
我认为您忘记了对api模块设置依赖项:
angular.module('DispatchApp.views.vehicles', [
'ngRoute',
'DispatchApp.services.api'
])
您的
'modules/views/vehicles/index.html'
模板是什么样的?也许它只是因为它是空的而没有显示任何内容?不幸的是,它确实包含了以下伟大的成功。当我从“DispatchApp.views.vehicles”模块中删除“resolve”时,页面加载正常。免费提示:调试时不要使用缩小的库。使用angular.js
代替谢谢你的提示。我想我没有太多的必要去嗅探我使用的框架的代码。你的'modules/views/vehicles/index.html'
模板是什么样子的?也许它只是因为它是空的而没有显示任何内容?不幸的是,它确实包含了以下伟大的成功。当我从“DispatchApp.views.vehicles”模块中删除“resolve”时,页面加载正常。免费提示:调试时不要使用缩小的库。使用angular.js
代替谢谢你的提示。我想我没有太多的需要去嗅探我使用的框架的代码。我已经在一个模块DispatchApp中注册了该服务。服务也同样在主DispatchApp模块中注册。问题是,由于控制台中没有错误,所以我没有太多的事情要做。我试过你的建议,结果也一样……是的,你的主管知道服务,主管知道观点,但是您想要使用服务的模块不知道服务。我不认为这是真的,因为服务被调用,数据从服务器中提取。我已经使用模块DispatchApp注册了该服务。服务也同样注册到主DispatchApp模块。问题是,由于控制台中没有错误,所以我没有太多的事情要做。我尝试了你的建议,结果也是一样……是的,你的Main知道服务,Main知道视图,但是你想使用服务的模块不知道服务,我认为这是不对的,因为服务被调用,数据从服务器中提取。