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

这是我的代码，我试图显示JSON内容，当我在控制台中检查时，返回的data是整个html代码，而不是json数据。我哪里错了？Angularjs：从本地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); 
});

来源

2016-12-16 MrRobot9

你是什么意思是*“它是整个html代码”*？显示你所看到的样本 – charlietfl

@charlietfl我粘贴的第一个代码！ – MrRobot9

@charlietfl：当我直接将$ scope.books分配给JSON – MrRobot9

AngularJS用于创建SPA应用程序，您需要将它与后端分开运行。但是，你似乎使用节点来为静态文件提供服务，并且还想从中获取book.json。

新的方法：

在服务器端，只需创建一个通过API返回book.json的API /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!') 
})

客户端，调用该服务器

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

来源

2016-12-16 04:26:32 Finn

但是现在它不会渲染index.html..just显示JSON文本 – MrRobot9

您可以通过其他网络服务器（例如nginx）或者简单的'Web Server for Chrome'来提供HTML静态文件。这种方法分开了服务器端和客户端。如果您想从客户端读取json文件，（'books.json'）。然后（函数（响应）{console.log（'books.json'，response）; }）;''' – Finn