javascript - 从 angularjs 中的文件系统加载

Question

我有一个 json 文件，我想在我的 Angular 应用程序中提供该文件的内容。我正在读in this thread关于使用 $http.get 从文件系统加载 json。我无法让它工作，当我运行在控制台中加载它的代码(通过 $injector.get)时，我不断收到“http://localhost:9000/jsonFile.json未找到”。我使用 yeoman 生成我的应用程序，结构如下所示:

app
  --scripts
    --services
      --jsonLoader.js
    --app.js
  --index.html
  --jsonFile.json

jsonLoader.js 文件是

angular.module('jsonLoader', [])
.service('loader', function($http){
  var schema = {};
  $http.get('jsonFile.json')
  .then(function(res){
    schema = res.data;
  });
  return schema;
});

我已经尝试了可能引用 json 文件位置的所有路径组合，但当我尝试访问该服务时仍然收到 404 错误。任何帮助将不胜感激!

Answer 1

您的问题与 Angular 无关，但很可能与您的 Grunt 设置有关。 您的 Grunt 没有监视 JSON 文件，因此您的 Angular 应用程序无法访问您尝试访问的 JSON 文件。

要使 JSON 文件可访问，您需要将以下内容添加到 grunt 文件中，该文件是 Yeoman for Angular 的一部分:

  livereload: {
    options: {
      livereload: '<%= connect.options.livereload %>'
    },
    files: [
      '<%= yeoman.app %>/{,*/}*.html',
      '<%= yeoman.app %>/{,*/}*.json', //added this line
      '.tmp/styles/{,*/}*.css',
      '<%= yeoman.app %>/images/{,*/}*.{png,jpg,jpeg,gif,webp,svg}'
    ]