Angular JS routing doesnt display my html file

Question

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 1

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>

Answer 2

似乎是因为您将路由附加到了“ mainModule”而不是“ handsetExplorerModule”

Angular JS routing doesnt display my html file

Question

2 answers

solution1
0 ACCPTED 2016-10-12 02:45:18

solution2
0 2016-10-12 02:50:42

Angular JS routing doesnt display my html file

Question

2 answers

solution1 0 ACCPTED 2016-10-12 02:45:18

solution2 0 2016-10-12 02:50:42

solution1
0 ACCPTED 2016-10-12 02:45:18

solution2
0 2016-10-12 02:50:42