Angularjs: Laden Inhalt von lokalen JSON-Datei

Dies ist mein Code, ich versuche, den JSON-Inhalt anzuzeigen, wenn ich in der Konsole überprüft, die data, die zurückgegeben wurde, war der gesamte HTML-Code, anstelle von JSON-Daten. Wo gehe ich falsch?Angularjs: Laden Inhalt von lokalen JSON-Datei

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

Quelle

2016-12-16 MrRobot9

zu diesem Server nennen, was Sie tun meine * "es ist der ganze HTML Code" *? Beispiel zeigen, was genau Sie sehen – charlietfl

@charlietfl Der erste Code auf der Oberseite, die ich eingefügt habe !! – MrRobot9

@charlietfl: Es funktioniert völlig in Ordnung, wenn ich $ scope.books direkt zuweisen JSON – MrRobot9

AngularJS verwendet, um SPA-App zu erstellen, müssen Sie es separat vom Back-End ausführen. Aber es scheint, dass Sie Knoten verwenden, um die statische Datei auch zu liefern, um book.json daraus zu erhalten.

Der neue Ansatz:

Die Server-Seite, erstellen Sie einfach eine API, die book.json über 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!') 
})

Die Client-Seite zurückzukehren,

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

Quelle

2016-12-16 04:26:32 Finn

Aber jetzt ist es nicht Rendern index.html..just zeigt den JSON-Text – MrRobot9

Sie können die statische HTML-Datei von einem anderen Web-Server, zum Beispiel nginx, oder einfach von "Web Server for Chrome" bereitstellen. Dieser Ansatz ist serverseitig und clientseitig getrennt. Wenn Sie die json-Datei von der Client-Seite lesen möchten, bekomme es einfach so '' '$ http.get ('books.json'). dann (funktion (antwort) { console.log ('books.json', antwort); });' '' – Finn

Ich habe bemerkt, dass dies geschehen kann, wenn Angular nicht in der Lage ist, die Datei zu finden spezifiziert in einer $http.get() Anfrage. Auch die .success Rückgabe von einer eckigen $ http.get() -Funktion ist veraltet. Verwenden Sie stattdessen die $http.get(...).then Art und Weise, dies zu tun, wie in der Winkellagen angegeben:

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

Sie auch eine errorCallback in Bezug auf die in der Dokumentation und Ausgangsfehlerinformationen angegeben verwenden möchten Konsole - dies kann Ihnen mehr Informationen darüber geben, was gerade passiert.

Auch ich weiß nicht, warum Sie das Dateisystem verwenden sollten, um die ./index.html Datei zu lesen, anstatt einen lokalen (und freien) Webserver wie Apache zu verwenden. Ich bezweifle, dass Sie vollständigen Zugriff auf das Dateisystem haben, wenn Sie Ihre Website auf einem gehosteten Server hosten.

https://httpd.apache.org/

Schließlich sind, wenn Sie nur AngularJS lernen, mögen Sie vielleicht mit einem Beispielprojekt, um zu sehen, wie Angular Projekte strukturiert sind wie das folgende offizielle kleines Saatgutprojekt starten.

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

Hoffnung, das hilft.

Quelle

2016-12-16 03:33:17

Angularjs: Laden Inhalt von lokalen JSON-Datei

Antwort

Verwandte Themen