[英]angular page not loading after angular resource is called
I am making a Dispatchsystem for the local taxi company using angular. 我正在为当地出租车公司使用角度制作一个Dispatchsystem。 I am not a pro at angular and all it's functionalities so I need some help with the following. 我不是专业角色和所有功能,所以我需要一些帮助以下。 I was setting up angular-route so I can inject html pages in to the main html document and after that I set up a factory to request the data from my REST-service I had written in java using springboot. 我正在设置angular-route,所以我可以将html页面注入到主html文档中,然后我建立了一个工厂来请求我使用springboot用java编写的REST服务中的数据。 After I had succesfully recieved my data I noticed that my test page did not load anymore without the browser console giving me any errors. 在我成功收到我的数据后,我注意到我的测试页面没有加载,如果没有浏览器控制台给我任何错误。
These are my documents: 这些是我的文件:
main index.html: 主index.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>
I made a test html file to see if it gets loaded in the ng-view tag it just contains ap tag with some text. 我做了一个测试html文件,看它是否在ng-view标签中加载它只包含带有一些文本的ap标签。
main controller of all the views: 所有观点的主要控制者:
angular.module("DispatchApp.views",['ngRoute', 'DispatchApp.views.vehicles'])
//Default Route
.config(function($routeProvider) {
$routeProvider.otherwise("/vehicles");
})
.controller('AppCtrl', ['$scope', function($scope){
}]);
The contoller of my test view: 我的测试视图的控制器:
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;
}])
the api service and the factory i use to fetch the data from the backend: 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"}}
});
}]);
I don't know why the test html file is not being injected into the ng-view tag eventhough the data was received from the backend, the html file to be displayed is being loaded in the network tab of my bowser (google chrome) and I have no errors in the console. 我不知道为什么测试html文件没有被注入到ng-view标签中,尽管从后端接收到数据,要显示的html文件正在我的bowser(谷歌浏览器)的网络选项卡中加载,我在控制台中没有错误。
here is my complete directory structure: 这是我完整的目录结构:
/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
Sorry for the long post but I am desperate here. 对不起,很长的帖子,但我在这里绝望。
You have a resolve
function, which takes a VehicleApi
service, but that service is registered in the DispatchApp.services.api
, which isn't referenced anywhere, so the resolve will hang: 您有一个resolve
函数,它接受VehicleApi
服务,但该服务在DispatchApp.services.api
注册,该服务未在任何地方引用,因此解析将挂起:
angular.module('DispatchApp.services.api', ..)
.factory('VehicleApi', ['DispatchApiResource', function(DispatchApiResource)
{
..
}]);
I think you forgot to lay a dependency on your api module: 我想你忘了依赖你的api模块:
angular.module('DispatchApp.views.vehicles', [
'ngRoute',
'DispatchApp.services.api'
])
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.