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

что делают вас mean * "это весь html-код" *? Покажите образец именно того, что вы видите – charlietfl

@charlietfl Первый код сверху, который я вставил! – MrRobot9

@charlietfl: Он отлично работает, когда я напрямую присваиваю $ scope.books JSON – MrRobot9

Использование AngularJS для создания SPA-приложения, вам необходимо запустить его отдельно от бэкэнда. Но кажется, что вы используете узел для обслуживания статического файла, также хотите получить от него book.json.

Новый подход:

на стороне сервера, просто создать API, которые возвращают book.json через апи /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 .. просто показывает текст JSON – MrRobot9

Вы можете обслуживать статический файл HTML другим веб-сервером, например nginx, или просто «веб-сервером для Chrome». Этот подход отличается от стороны сервера и клиента. Если вы хотите прочитать json-файл с клиентской стороны, просто введите его как '' '$ http.get ('books.json'), затем (function (response) { console.log ('books.json', response); });' '' – Finn

Я заметил, что это может произойти, когда Угловая не может найти файл указанной в запросе $http.get(). Кроме того, .success возврат из угловой функции $ http.get() устарел. Вместо этого используйте $http.get(...).then способ сделать это, как указано в угловом документации:

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

Вы также можете использовать errorCallback, как указано в DOCS и вывода информации об ошибках для на console - это может дать вам больше информации о том, что происходит.

Кроме того, я не знаю, почему вы хотите использовать файловую систему для чтения файла ./index.html, а не для использования локального (и бесплатного) веб-сервера, такого как Apache. Я сомневаюсь, что у вас будет полный доступ к файловой системе, если вы разместите свой сайт на сервере.

https://httpd.apache.org/

Наконец, если вы только учитесь AngularJS, вы можете начать с образцом проектом, чтобы увидеть как Угловые проекты структурированы таким образом, как следующие официального проект небольших семян.

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

Надежда, что помогает.

источник

2016-12-16 03:33:17

Angularjs: загрузить содержимое из локального файла json

ответ

Смежные вопросы