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

【问题标题】：Angularjs: load contents from local json fileAngularjs：从本地 json 文件加载内容
【发布时间】：2017-05-01 19:00:06
【问题描述】：

这是我的代码，我正在尝试显示 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);
});

【问题讨论】：

什么意思“这是整个html代码”？显示您所看到的示例
@charlietfl 我粘贴的第一个代码！！
@charlietfl：当我直接将 $scope.books 分配给 JSON 时，它工作得非常好
这没有解释当前返回的内容以及 "html" 的含义
@charlietfl 我添加了截图

标签： javascript angularjs json

【解决方案1】：

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

新方法：

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

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

【讨论】：

但是现在它不是渲染 index.html.. 只是显示 JSON 文本
您可以通过另一个 Web 服务器提供 HTML 静态文件，例如 nginx，或者只是简单的Web Server for Chrome。这种方法将服务器端和客户端分开。如果你想从客户端读取 json 文件，就像这样$http.get('books.json').then(function(response) { console.log('books.json', response); });

【解决方案2】：

我注意到，当 Angular 无法找到 $http.get() 请求中指定的文件时，就会发生这种情况。此外，从角度 $http.get() 函数返回的.success 已被弃用。相反，请使用 Angular 文档中所述的 $http.get(...).then 方法：

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

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

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

https://httpd.apache.org/

最后，如果你刚刚学习 AngularJS，你可能想从一个示例项目开始，看看 Angular 项目是如何构建的，比如下面这个官方的小种子项目。

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

希望对您有所帮助。

【讨论】：