Angular App不顯示json本地文件列表

我在mainMenu.json中有一些虛擬數據，它將服務器填充一個列表，這將成爲應用程序啓動時由角框架加載的第一個模板。Angular App不顯示json本地文件列表

Chrome控制檯報告沒有錯誤。

但我得到一個白色的「空白」頁面「正確的形象」，並不確定我出錯的地方。由於

//mainMenu.json 
 
[{ 
 
    "name": "item1", 
 
    "image": "item1_" 
 
}, { 
 
    "name": "item2", 
 
    "image": "item2_" 
 
}, { 
 
    "name": "item3", 
 
    "image": "item3_" 
 
}] 
 

 
//-------------------------------------------------------------------- 
 
//app.js 
 
var myApp = angular.module('myApp', [ 
 
    'ngRoute',   //turn on deep linking 
 
    'appControllers' //js to handle the route 
 
]); 
 

 
//Configure how the partials are going to run 
 
myApp.config(['$routeProvider', function($routeProvider) { 
 
    $routeProvider. 
 
     when('/list', { 
 
     templateUrl: 'partials/mainMenu.html', 
 
     controller: 'MainMenuCtrl' 
 
    }).otherwise({  //home page 
 
     redirectTo: '/list' 
 
    }); 
 
}]); 
 

 
//-------------------------------------------------------------------- 
 
// controlers.js 
 
var appControllers = angular.module ('appControllers', []); 
 

 
appControllers.controller ('MainMenuCtrl', ['$scope', '$http', function ($scope, $http){ 
 
    $http.get('js/mainMenu.json').success (function (data){ 
 
     
 
     $scope.menuItems = data; 
 
    }); 
 
}]);

* { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
html, body { 
 
    height: 100%; 
 
} 
 

 
header > button { 
 
    height: 1.5em; 
 
    width: 1.5em; 
 
    font-size: 1.5em; 
 
    top: 0; 
 
} 
 

 
label.pageTitle { 
 
    display: inline-block; 
 
    width: calc(100% - 5em); 
 
    text-align: center; 
 
} 
 

 
header { 
 
    border-bottom: 1px solid black; 
 
    width: 100%; 
 
    position: fixed; 
 
    top: 0; 
 
} 
 

 
main { 
 
    margin-top: 40px; 
 
    margin-bottom: 40px; 
 
    padding: 0.5em; 
 
} 
 

 

 
footer { 
 
    position: fixed; 
 
    bottom: 0; 
 
    width: 100%; 
 
} 
 

 
footer > button { 
 
    font-size: 1em; 
 
    padding: 0.5em 1em; 
 

 
} 
 
input { 
 
    font-size: 1em; 
 
    width: 100%; 
 
} 
 

 
header, footer { 
 
    background-color: white; 
 
} 
 

 
footer > button { 
 
    padding: 0.5em 1em; 
 
    width: 31.33%; 
 
    margin: 0 1%; 
 
    float: left; 
 
    box-sizing: border-box; 
 
}

<!--index.html--> 
 
<!doctype html> 
 
<html lang="en"> 
 
<head> 
 
    <meta charset="UTF-8"> 
 
    <title>Document</title> 
 
    <link rel="stylesheet" href="css/index.css"> 
 
    <script src="angular.js"></script> 
 
    <script src="angular-route.js"></script> 
 
    <script src="js/app.js"></script> 
 
    <script src="js/controllers.js"></script> 
 
    <meta name="viewport" content="width=device-width" /> 
 
</head> 
 

 
<body> 
 
<header> 
 
    <button class="menuLeft" type="button" >&#9776;</button> 
 
    <label class="pageTitle">Title of Page</label> 
 
    <button class="menuRight" type="button">&#8942;</button> 
 
</header> 
 

 
<main ng-view></main> 
 

 
<footer> 
 
    <button class="menuLeft" type="button" >NO</button> 
 
    <button class="menuLeft" type="button" >EXTRA</button> 
 
    <button class="menuRight" type="button">YES</button> 
 
</footer> 
 

 
</body> 
 
</html> 
 

 
//-------------------------------------------------------------------- 
 
<!--mainMenu.html--> 
 
<section> 
 
    <ul> 
 
     <li ng-repeat="item in menuItems"> 
 
      <br/> 
 
      <p>dummy</p> 
 
      <h2>{{item.name}}</h2> 
 
     </li> 
 
    </ul> 
 
</section>

來源

2016-01-14 Fred J.

控制檯中的任何錯誤？ –

什麼是angularModule？可能是：'''var appControllers = angular.module（'appControllers'，[]）;''' – ema

是的。只是注意到它，並修復它，但仍然是空白屏幕。因此，我將刪除更新，以便其他「新」讀者不會浪費時間。 :) –

您有一個錯誤在你的代碼

var appControllers = angularModule ('appControllers', []);

應該

var appControllers = angular.module ('appControllers', []);

捉對$http.get承諾的錯誤做這樣的事情：

$http.get(your_options).then(function(data){ 
}, function(err){ 
});

第一個功能是您success回調，第二個是你error回調。有關$http的更多信息可以發現HERE

來源

2016-01-14 08:32:48 Kosmog

注意到並修復無濟於事。同樣的問題存在。 –

你的瀏覽器控制檯是否仍然存在錯誤或者一切正常，但是你有一個空白頁面？那'警報'被觸發？ – Kosmog

沒有控制檯錯誤了。空白頁仍然存在。我不明白你的最後一個問題 –

Angular App不顯示json本地文件列表

回答

相關問題