Блог

Главная - Вопросы по программированию - Угловая маршрутизация JS не отображает мой html-файл

Угловая маршрутизация JS не отображает мой html-файл

#javascript #html #css #angularjs #nginx

#javascript #HTML #css #angularjs #nginx

Вопрос:

Уже потратил полдня на отладку и все еще застрял на этом. Я запускаю его с помощью nginx-1.11.4

Коды не отображают html-файл, вызываемый main.module .js, как ни странно, его фон все еще отображается.

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>

Сравнительные данные.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', []);

Ответ №1:

Проблема здесь в том, что вы пытаетесь использовать два разных модуля, это будет основной модуль, и маршрут настроен.

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

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

Удалите ng-app из compareDetails и используйте ng-view в main.html,

 <div ng-view></div>

Ответ №2:

Кажется, потому, что вы прикрепили маршрутизацию к «MainModule» вместо «handsetExplorerModule»