Maylin Anne Maylin Anne - 1 month ago 13
AngularJS Question

Angular JS routing doesnt display my html file

Already spent half day to debug and still stuck on this.
I run it using nginx-1.11.4

The codes doesn't display the html file called by main.module.js
oddly enough, it's background still shows.

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', []);

Answer

The problem here is you are trying to consume two different modules, it will be the main module, and route is configured.

angular.module('mainModule', ['ngRoute','handsetExplorerModule'])

.config(function($routeProvider) {
    $routeProvider
    .when("/", {
       templateUrl : "modules/handset-explorer/CompareDetails/compareDetails.html"
    });
});

Remove ng-app from compareDetails and use ng-view in the main.html,

<div ng-view></div>
Comments