Question

我是Anjular.Js的新手，无法读取保存在服务器中的.JSON文件（todo.json）。我有基本的快递服务器，我的所有静态文件都保存在公共＆＃39;夹。我可以直接从浏览器访问todo.json文件。

我是Java Script的新手，我们将不胜感激。

以下是jsdemo.html：

的代码

<!DOCTYPE html>
<html ng-app="demo">
 <head >
 <meta charset="utf-8">
 <meta http-equiv="X-UA-Compatible" content="IE=edge">
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <title>Java Script Demo</title>

<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<script src="js/angular.js"></script>

<script type="text/javascript">
var myApp = angular.module("demo", []);

myApp.controller("demoCtrl", function ($scope, $http) {
var promise = $http.get("/todo.json");
promise.success(function (data) {
$scope.todos = data;
  });
});

</script>

<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
 <!--[if lt IE 9]>
  <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
  <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->   
</head>

 <body ng-controller="demoCtrl">
 <H1>This is the javascript demo file</H1>
 <div class="panel">
<h1>To Do</h1>
<table class="table">
<tr><td>Action</td><td>Done</td></tr>
<tr ng-repeat="item in todos">
<td>{{item.action}}</td>
<td>{{item.done}}</td>
</tr>
</table>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<!--
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular.min.js"></script>
-->


<script src="js/bootstrap.min.js"></script>

<script src="js/todoApp.js"></script>

</body>
</html>

这是我的server.js的代码 //server.js

//Modules===================================================
var express=require ('express');
var app=express();
var bodyParser=require('body-parser');
var methodOverride=require ('method-override');


// set our port
var port = process.env.PORT || 3000; 

// parse application/json 
app.use(bodyParser.json()); 

// parse application/vnd.api+json as json
app.use(bodyParser.json({ type: 'application/vnd.api+json' })); 

// parse application/x-www-form-urlencoded
app.use(bodyParser.urlencoded({ extended: true })); 

// override with the X-HTTP-Method-Override header in the request. simulate DELETE/PUT
app.use(methodOverride('X-HTTP-Method-Override')); 

// set the static files location /public/img will be /img for users
app.use(express.static(__dirname + '/public')); 

app.get('/', function(req, res) {
        res.sendfile('./public/views/index.html'); // load our public/index.html file
    });


 // start app ===============================================
 // startup our app at http://localhost:3000
 app.listen(port);               

// shoutout to the user                     
console.log('Magic happens on port ' + port);

// expose app           
exports = module.exports = app;

Answer 1

这是我的Node.js Express应用程序的目录结构：

expressTest
├── public
│   ├── css
│   │   └── bootstrap.min.css
│   ├── js
│   │   ├── angular.js
│   │   ├── bootstrap.min.js
│   │   └── todoApp.js (this script is currently empty)
│   ├── todo.json
│   └── views
│       └── index.html
└── server.js

Twitter Bootstrap和Angular.js的版本与您在发布的 jsdemo.html 上指定的版本相同。我使用 wget 和您的网址将它们下载到项目中。

index.html文件包含您在此处放置的HTML jsdemo.html 。 server.js 代码与我在阅读时发布的完全相同。

我的 todo.json 文件如下所示：

[
    {
        "action": "Action #1",
        "done": false
    },
    {
        "action": "Action #2",
        "done": true
    },
    {
        "action": "Action #3",
        "done": false
    },
    {
        "action": "Action #4",
        "done": true
    }
]

我安装了 node.js 要求。我使用 node.js 版本 0.10.35 。

npm install express
npm install body-parser
npm install method-override

然后，从命令行控制台，我运行了服务器：

node server.js

鉴于所有这些条件，该示例有效。我在浏览器的地址栏中输入了网址：

http://localhost:3000

该表显示了所需的数据：

Web page with data showing

您的 todo.json 的语法可能存在问题。那发生在我身上（最后我添加了一个额外的逗号，数据没有显示在页面上）。请修改您的帖子以包含该文件的内容，如果你需要更多的帮助。

<强>更新

您的JSON语法是：

[
    {
        action: "Buy Flowers", 
        done: false
    }, 
    {
        action: "Get Shoes", 
        done: false
    }, 
    {
        action: "Collect Tickets", 
        "done": true
    }, 
    {
        action: "Call Joe", 
        done: false
    }
]

您需要在双引号符号中指定属性名称，如下所示：

[
    {
        "action": "Buy Flowers", 
        "done": false
    }, 
    {
        "action": "Get Shoes", 
        "done": false
    }, 
    {
        "action": "Collect Tickets", 
        "done": true
    }, 
    {
        "action": "Call Joe", 
        "done": false
    }
]

此外，我的express安装在命令行上发出此错误消息：

express deprecated res.sendfile: Use res.sendFile instead server.js:27:13

您可能希望将此弃用函数的新语法用于将来的代码。

Answer 2

我认为您的服务器视图引擎使用花括号{{ }}以及角度。

您可以尝试覆盖角度绑定表达式符号

var myApp = angular.module("demo", []).config(function($interpolateProvider){
    $interpolateProvider.startSymbol("[[").endSymbol("]]");
});

然后在HTML中使用

<td>[[item.action]]</td>

或者您可能更喜欢使用ng-bind

<td ng-bind="item.action"></td>

无法读取JSON文件

2 个答案: