Question

这是我的代码，我试图显示JSON内容，当我在控制台中检查时，返回的data是整个html代码，而不是json数据。我哪里错了？

<html ng-app="BooksApp">

<head>
    <meta charset="utf-8">
    <title>Angular.js </title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>
    <script>
        var BooksApp = angular.module('BooksApp', []);
        BooksApp.controller("BookCtrl", ['$scope', '$http', function ($scope, $http) {
            $http.get('books.json').success(function (data) {
                $scope.books = data;
                console.log(data);
            });
    }]);
    </script>
</head>

<body ng-controller="BookCtrl">
    <h2>Angular.js </h2>
    <table>
        <tr>
            <th>Book Name</th>
            <th>Book Price</th>
        </tr>
        <option ng-repeat="entry in books.books" value="{{entry.name}}">{{entry.name}}</option>
    </table>
</body>

</html>

books.json

{
    "books": [{
        "id": 2081,
        "name": "python",
        "price": "1000"
    }, {
        "id": 8029,
        "name": "c++",
        "price": "2000"
    }],
    "count": 2
}

app.js

var http = require('http'),
    fs = require('fs');


fs.readFile('./index.html', function (err, html) {
    if (err) {
        throw err; 
    }       
    http.createServer(function(request, response) {  
        response.writeHeader(200, {"Content-Type": "text/html"});  
        response.write(html);  
        response.end();  
    }).listen(8000);
});

Answer 1

使用AngularJS创建SPA应用程序，需要将其与后端分开运行。但似乎你使用node来提供静态文件也想从中获取book.json。

新方法：

服务器端，只需通过api创建一个返回Calendar的api book.json

/books

客户端，调用该服务器

var express = require('express');
var app = express();
fs = require('fs');

app.get('/books', function (req, res) {
    fs.readFile('books.json', 'utf8', function (err,data) {
        if (err) {
            return console.log(err);
        }
        console.log(data);
        res.send(data)
    });

})

app.listen(3000, function () {
    console.log('Example app listening on port 3000!')
})

Answer 2

我注意到，当Angular无法找到$http.get()请求中指定的文件时，就会发生这种情况。此外，不推荐使用角度$ http.get（）函数返回.success。相反，使用$http.get(...) .then 方式执行此操作，如角度文档中所述：

https://docs.angularjs.org/api/ng/service/ $ HTTP

您还可能希望使用docs中所述的errorCallback并将错误信息输出到控制台 - 这可能会为您提供有关正在发生的事情的更多信息。

此外，我不知道您为什么要使用文件系统来读取./index.html文件，而不是使用Apache等本地（和免费）网络服务器。如果您最终在托管服务器上托管您的网站，我怀疑您是否可以完全访问文件系统。

https://httpd.apache.org/

最后，如果您只是学习AngularJS，您可能需要从示例项目开始，了解Angular项目的结构，例如以下官方小种子项目。

https://github.com/angular/angular-seed

希望有所帮助。

Angularjs：从本地json文件加载内容

2 个答案: