未使用Angular $ HTTP读取JSON文件在MEAN.JS应用程序中获取
我正在开发一个带有MEAN.JS（www.meanjs.org）的Web应用程序，我正在尝试在我的控制器中使用带有JSON文件的AngularJS $ HTTP Get请求，这样我就可以在我的一个页面。 出于某种奇怪的原因，JSON文件（foo.json）从不读取。 即使我只是尝试通过http：// localhost：3000 / foo.json达到文件，它不显示。 它也没有显示在任何错误控制台。 我把JSON文件放在我的模块，根目录，视图目录等任何地方，你把它命名。 只有当我使用像“modules / core / json / foo.json”这样的更长的path名时，我会得到Chrome控制台错误：“无法加载资源：服务器响应状态为404（未find）”错误。 这是我的控制器代码：
angular.module('core').controller('FooController', ['$scope', '$http', function ($scope, $http) { $http.get('foo.json').success(function(data){ console.log(data); $scope.products = data; }); } ]); FOO.JSON文件放置在我的Core模块文件夹的根目录中，在视图中，甚至在应用程序的根目录中。
[ { "id" : 3, "name": "Orange Theme", "description": "Consectetur adipiscing elit. Vestibulum condimentum turpis nec nunc scelerisque convallis. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Maecenas id diam enim.", "type": "Joomla", "price": 12.99, "images": [ { "name": "orange.jpg" } ] }, { "id" : 4, "name": "Gray Theme", "description": "Consectetur adipiscing elit. Vestibulum condimentum turpis nec nunc scelerisque convallis. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Maecenas id diam enim.", "type": "Joomla", "price": 12.99, "images": [ { "name": "gray.jpg" } ] }, { "id" : 5, "name": "Purple Theme", "description": "Consectetur adipiscing elit. Vestibulum condimentum turpis nec nunc scelerisque convallis. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Maecenas id diam enim.", "type": "html5", "price": 9.99, "images": [ { "name": "purple.jpg" } ] } ]
我对这个感到沮丧，因为它看起来很简单！ 不知道是否与JSON文件没有开箱即用，我需要在Express等进行更改。任何帮助，将不胜感激。
由于您的JSON文件无法从浏览器访问，这听起来像您没有从节点提供静态文件。 在您的节点app.js文件中，您需要初始化相关中间件以提供静态文件 – 例如，在节点应用程序内的“public”目录中提供文件，请添加：
app.use(express.static(path.join(__dirname, 'public')));
如果该文件位于Node应用程序的根目录下，则默认情况下将无法通过HTTP访问该文件。 因此，如果将JSON文件放在名为public的目录中，并将上述行包含在节点app.js文件中，则应该可以在http：// localhost：3000 / foo.json
一个可能的解决scheme是将JSON数据添加到mongodb数据库并从那里检索数据。 我已经使用$ hhtp从控制器请求这样的一些数据。
创build一个服务来通过$ http检索数据：
angular .module('yourModule') .factory('YourService', function($http) { var urlBase = '/api/restfull/url'; var aService = {}; aService.getThemes = function() { return $http.get(urlBase); }; return aService; });
在您的控制器中注入YourService并执行此操作：
YourService.getThemes().then(function(data) { vm.themes = data.data; });
在你的服务器端，像这样添加特定的路由'/api/restfull/url'
app.route('/api/restfull/url').all(sitesPolicy.isAllowed) .get(themes.getThemes);
在你的服务器控制器中处理请求并用mongodb JSON数据响应：
exports.getThemes = function(req, res) { Themes.find().exec(function(err, themes) { //Themes is your mongodb instance if (err) { return res.status(400).send({ message: errorHandler.getErrorMessage(err) }); } else { res.jsonp(themes); } }); };
我已经减less了你的例子
<body ng-app="core"> <div ng-controller="FooController"> <div ng-repeat="product in products"> {{ product }} </div> </div> <script> var app = angular.module('core', []); app.controller('FooController', function($scope, $http){ $http.get('foo.json') .success(function(data){ console.log(data); // data appears on console $scope.products = data; }) .catch(function(err){ console.log(err); // error if any }); }) </script> </body>
并使用您的JSON文件我得到正确的输出。
从上面的评论（对不起，我还不能评论），看起来像你的代码中的ng-repeat部分有问题。 如果你正在使用另一个JSON文件，你可能会得到ng-repeat中的重要错误，在这种情况下，以下可能会有所帮助
<div ng-repeat="product in products track by $index"></div>
每个angular度的文档