1
我正在使用角度爲當地的出租車公司製作調度系統。我不是一個職業角色，所有的功能，所以我需要一些幫助下面。我設置了角度路由，這樣我就可以將html頁面注入到主html文檔中，然後建立一個工廠來請求我使用springboot在java中編寫的REST服務中的數據。在我成功接收了我的數據後，我注意到，如果瀏覽器控制檯沒有給我任何錯誤，我的測試頁不會再加載。角度資源被調用后角度頁面不加載
這是我的證件：
主要的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>
我做了一個測試的HTML文件，看它是否在NG-view標記被加載 它只是包含了AP與標籤一些文字。
的所有視圖主控制器：
angular.module("DispatchApp.views",['ngRoute', 'DispatchApp.views.vehicles'])
//Default Route
.config(function($routeProvider) {
$routeProvider.otherwise("/vehicles");
})
.controller('AppCtrl', ['$scope', function($scope){
}]);
我的測試圖的位指示：
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-view標籤中，從後端接收，要顯示的html文件正在加載到我的bowser（谷歌瀏覽器）的網絡選項卡中，並且在控制檯中沒有錯誤。
這裏是我的完整目錄結構：
/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
對不起，長職位，但我絕望這裏。
你的''modules/views/vehicles/index.html''模板是什麼樣的？也許它只是不顯示任何東西，因爲它是空的？ – devqon
不幸的是它確實包含以下內容
偉大的成功
。當我從'DispatchApp.views.vehicles'模塊中刪除「解析」時，頁面加載得很好。 –免費提示：調試時不要使用縮小的庫。使用'angular.js'而不是 – devqon