角JS路由不显示我的HTML文件

Question

已经花了半天时间进行调试，但仍然停留在这一点上。 我使用nginx-1.11.4运行它

这些代码无法足够奇怪地显示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
       }
    );

}]);

phoneExplorer.module.js

angular.module('handsetExplorerModule', []);

Answer 1

这里的问题是您尝试使用两个不同的模块，它将成为主要模块，并且配置了路由。

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

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

从compareDetails中删除ng-app并在main.html中使用ng-view，

<div ng-view></div>

Answer 2

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

角JS路由不显示我的HTML文件

问题描述

2 个解决方案

解决方案1
0 已采纳 2016-10-12 02:45:18

解决方案2
0 2016-10-12 02:50:42

角JS路由不显示我的HTML文件

问题描述

2 个解决方案

解决方案1 0 已采纳 2016-10-12 02:45:18

解决方案2 0 2016-10-12 02:50:42

解决方案1
0 已采纳 2016-10-12 02:45:18

解决方案2
0 2016-10-12 02:50:42