Question

我在mainMenu.json中有一些虚拟数据，服务器将填充一个列表，该列表将是app启动时由angular framework加载的第一个模板。

chrome控制台报告没有错误。

但是我得到一个白色＆＃34;空白＆＃34;页面＆＃34;右图像＆＃34;而且不确定我哪里出错了。感谢

＆＃13;

//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;
    });
}]);

＆＃13;

* {
    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;
}

＆＃13;

<!--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>

＆＃13;

Answer 1

您的代码中有错误

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

应该是

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

要在$http.get承诺上发现错误，请执行以下操作：

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

第一个功能是您的success回调，第二个功能是您的error回调。有关$http的更多信息，请访问HERE

Angular App没有显示json本地文件中的列表

1 个答案: