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

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>

书籍.json

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

应用程序.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 /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);
});

Answer 2

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

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

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

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

https://httpd.apache.org/

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

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

希望有帮助。

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

问题描述

2 个解决方案

解决方案1
4 已采纳 2016-12-16 04:26:32

解决方案2
1 2016-12-16 03:33:17

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

问题描述

2 个解决方案

解决方案1 4 已采纳 2016-12-16 04:26:32

解决方案2 1 2016-12-16 03:33:17

解决方案1
4 已采纳 2016-12-16 04:26:32

解决方案2
1 2016-12-16 03:33:17