0
既にデバッグに半日を費やしていましたが、まだこれに固執しています。 nginx-1.11.4を使用して実行します。Angular JSルーティングは自分のhtmlファイルを表示しません
コードには、main.module.jsによって呼び出されるhtmlファイルが表示されません。
index.htmlを
<!DOCTYPE html>
<html lang="en-US">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/w3CSS/w3.css"/>
<link rel="stylesheet" href="css/compareCSS.css"/>
<script src="js/angular/angular.min.js"></script>
<script src="js/angular/angular-route.js"></script>
<script src="main.module.js"></script>
<script src="modules/handset-explorer/handsetExplorer.module.js"></script>
<script src="modules/handset-explorer/CompareDetails/compareDetails.controller.js"></script>
<script src="modules/handset-explorer/CompareDetails/compareDetails.service.js"></script>
<body>
<div ng-app="mainModule">
</div>
</body>
</html>
main.module.js
angular.module('mainModule', ['ngRoute','handsetExplorerModule'])
.config(function($routeProvider) {
$routeProvider
.when("/", {
templateUrl : "modules/handset-explorer/CompareDetails/compareDetails.html"
});
});
compareDetails.html
<div ng-app="handsetExplorerModule">
<div id="divBody">
<div id="divHeader">
<div id="divTitle">
<p class="helvetica">COMPARE SPECIFICATIONS</p>
</div>
<div id="divCategories">
<table class="categories">
<tr>
<td class="three"> </td>
<td class="three"><img class="catImage" src="./src/Comp_Screen.png" /></td>
<td class="three"><img class="catImage2" src="./src/Comp_Storage.png" /></td>
<td class="three"><img class="catImage" src="./src/Comp_Camera.png" /></td>
<td class="three"><img class="catImage" src="./src/Comp_Battery.png" /></td>
<td class="three"><img class="catImage" src="./src/Comp_Network.png" /></td>
<td class="three"><img class="catImage" src="./src/Comp_Sim.png" /></td>
</tr>
</table>
</div>
</div>
<div id="divContent">
<div ng-controller="compareDetailsController">
<table id="Content" ng-repeat="x in images | limitTo:3">
<tr>
<td class="one">
<table>
<tr>
<td><img class="contImage" src="{{x.image}}" alt="{{x.name}}" /></td>
<td class="textAlign">{{x.name}} <button class="viewDetails" type="button">VIEW DETAILS</button></td>
</table>
</td>
<td class="two">{{x.size}}</td>
<td class="one">{{x.storage}}</td>
<td class="two">{{x.camera}}</td>
<td class="one">{{x.battery}}</td>
<td class="two">{{x.network}}</td>
<td class="one">{{x.sim}}</td>
</tr>
</table>
</div>
</div>
</div>
</div>
compareDetails.service.js
angular.module('handsetExplorerModule')
.factory('compareDetailsService', ['$http','$q', function($http, $q) {
var service = {
};
service.getHandsetList = function(){
var deferred = $q.defer();
$http.get("./json/images.json").then(function(response) {
deferred.resolve(response.data);
},
function(response){
deferred.reject("ERROR: Unable to get handsetList data");
}
);
return deferred.promise;
};
return service;
}]);
compareDetails.controller.js
angular.module('handsetExplorerModule')
.controller("compareDetailsController", ['$scope','compareDetailsService', function($scope, compareDetailsService) {
compareDetailsService.getHandsetList()
.then(
function(data){
$scope.images = data.phones;
},
function(error){
//todo: handle error
}
);
}]);
handsetExplorer.module.js
angular.module('handsetExplorerModule', []);
の 'mainModule' にルーティングを取り付けたので、それはそうお手伝いありがとう –