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