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

这是我的代码，我试图显示JSON内容，当我在控制台中签入时，返回的

数据

是整个html代码，而不是JSON数据。我哪里做错了

Angular.js
var BooksApp=angular.module（'BooksApp'，[]）；
控制器（“BookCtrl”[“$scope”，“$http”，函数（$scope，$http）{
$http.get（'books.json'）.success（函数（数据）{
$scope.books=数据；
控制台日志（数据）；
});
}]);
Angular.js
书名
书价
{{entry.name}

books.json

{
“书籍”：[{
“id”：2081，
“名称”：“python”，
“价格”：“1000”
}, {
“id”：8029，
“名称”：“c++”，
“价格”：“2000”
}],
“计数”：2
}

app.js

var http=require（'http'），
fs=要求（'fs'）；
fs.readFile（'./index.html'，函数（err，html）{
如果（错误）{
犯错误；
}       
http.createServer（函数（请求、响应）{
writeHeader（200，{“内容类型”：“text/html”}）；
response.write（html）；
response.end（）；
}).听（8000）；
});

我注意到，如果Angular无法找到

$http.get（）

请求中指定的文件，就会发生这种情况。另外，从$http.get（）函数返回的

.success

已被弃用。相反，请使用

$http.get（…）

。然后按照文档中的说明执行此操作：

$http

您还可能希望使用文档中所述的errorCallback，并将错误信息输出到控制台-这可能会为您提供有关发生了什么的更多信息

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

最后，如果您刚刚学习AngularJS，您可能希望从一个示例项目开始，看看AngularJS项目是如何构造的，例如下面的官方小型种子项目

---

希望有帮助。

我注意到，如果Angular无法找到

$http.get（）

请求中指定的文件，则可能会发生这种情况。另外，从$http.get（）函数返回的

.success

已被弃用。相反，请使用

$http.get（…）

。然后按照文档中的说明执行此操作：

$http

您还可能希望使用文档中所述的errorCallback，并将错误信息输出到控制台-这可能会为您提供有关发生了什么的更多信息

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

最后，如果您刚刚学习AngularJS，您可能希望从一个示例项目开始，看看AngularJS项目是如何构造的，例如下面的官方小型种子项目

---

希望对您有所帮助。

AngularJS用于创建SPA应用程序，您需要将其与后端分开运行。但是，似乎您使用node来服务静态文件，也希望从中获取book.json

新方法：

在服务器端，只需创建一个api，通过api

/books

返回

book.json

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!')
})

客户端，调用该服务器

$http.get('http://localhost/books').success(function(data) {
   $scope.books = data;
   console.log(data);
});

---

AngularJS用于创建SPA应用程序，您需要将其与后端分开运行。但是，似乎您使用node来服务静态文件，也希望从中获取book.json

新方法：

在服务器端，只需创建一个api，通过api

/books

返回

book.json

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!')
})

客户端，调用该服务器

$http.get('http://localhost/books').success(function(data) {
   $scope.books = data;
   console.log(data);
});

---

“这是整个html代码”是什么意思？展示你想要的样品see@charlietfl我粘贴的第一个代码@charlietfl：当我直接将$scope.books分配给JSONTH时，它工作得非常好。它没有解释当前返回的内容以及“html”的含义@charlietfl我添加了一个屏幕快照“这是整个html代码”是什么意思？展示你想要的样品see@charlietfl我粘贴的第一个代码@charlietfl：当我直接将$scope.books分配给JSONTH时，它工作得非常好。它没有解释当前返回的内容以及“html”的含义@charlietfl我添加了一个屏幕快照，但现在它没有呈现index.html。只显示JSON文本您可以通过另一个web服务器，例如nginx，为html静态文件提供服务，或者只需简单的Chrome

Web服务器

。这种方法将服务器端和客户端分开。如果您想从客户端读取json文件，只需按如下方式获取它（函数（response）{console.log（'books.json'，response）；}）但现在它没有呈现index.html..只显示JSON文本您可以通过另一个web服务器（例如nginx）或Chrome的简单

web服务器提供html静态文件。这种方法将服务器端和客户端分开。如果您想从客户端读取json文件，只需按如下方式获取它（函数（response）{console.log（'books.json'，response）；}）