将 JSON 文件导入运行在 Grunt 服务器上的 Angular 应用程序

关键词：

【中文标题】将 JSON 文件导入运行在 Grunt 服务器上的 Angular 应用程序【英文标题】：Importing JSON file into Angular application running on Grunt server 【发布时间】：2013-10-17 04:40:50 【问题描述】：

我正在学习基本的 Angular 教程，需要在其中包含一个 JSON 文件。 我用 Yeoman 启动了我的应用程序，它在 grunt 上运行。

var phonecatApp = angular.module('phonecatApp', []);

phonecatApp.controller('PhoneListCtrl', function PhoneListCtrl($scope) 

  $http.get('phones/phones.json').success(function(data) 
    $scope.phones = data;
  );

);

但是，当我转到 localhost:9000 时，我收到一堆控制台错误：

ReferenceError: $http is not defined
    at new PhoneListCtrl (http://localhost:9000/scripts/controllers/main.js:17:3)
    at invoke (http://localhost:9000/bower_components/angular/angular.js:3000:28)
    at Object.instantiate (http://localhost:9000/bower_components/angular/angular.js:3012:23)
    at http://localhost:9000/bower_components/angular/angular.js:4981:24
    at http://localhost:9000/bower_components/angular/angular.js:4560:17
    at forEach (http://localhost:9000/bower_components/angular/angular.js:137:20)
    at nodeLinkFn (http://localhost:9000/bower_components/angular/angular.js:4545:11)
    at compositeLinkFn (http://localhost:9000/bower_components/angular/angular.js:4191:15)
    at compositeLinkFn (http://localhost:9000/bower_components/angular/angular.js:4194:13)
    at publicLinkFn (http://localhost:9000/bower_components/angular/angular.js:4096:30) 

任何帮助将不胜感激！

【问题讨论】：

【参考方案1】：

将 json 文件包含在工厂服务中可能会更好。这样你就可以缓存它并继续在不同的控制器上使用它。

我遇到了类似的问题，然后就这样解决了……

var App = angular.module('App', []);

// Setting up a service to house our json file so that it can be called by the controllers
App.factory('service', function($http) 
    var promise;
    var jsondata = 
        get: function() 
            if ( !promise ) 
                var promise =  $http.get('src/data_json.js').success(function(response) 
                    return response.data;
                );
                return promise;
            
        
    ;
    return jsondata;
);




App.controller('introCtrl', function (service , $scope) 
    service.get().then(function(d) 
        $scope.header = d.data.PACKAGE.ITEM[0]
    )
);

App.controller('secondCtrl', function (service , $scope) 
    service.get().then(function(d) 
        $scope.title = d.data.PACKAGE.ITEM[1]
    )
);

【讨论】：

【参考方案2】：

将$http 添加为依赖项，在function PhoneListCtrl($scope, $http) 中的$scope 旁边

【讨论】：

我想我现在明白了。谢谢。

将数据从 MYSQL 导入网络服务器上的 JSON 文件

】将数据从MYSQL导入网络服务器上的JSON文件【英文标题】：ImportingdatafromMYSQLtoJSONfileonwebserver【发布时间】：2016-12-2616:33:55【问题描述】：我有一个问题：我在RaspberryPi上设置了本地LAMPWebServer。在那里(http://ipaddress/inpData)可以输入... 查看详情

在 Heroku 上运行 Grunt Build 时出错

...tor生成的简单Backbone应用程序。我有一个非常简单的node.js服务器文件来提供Backbone应用程序，但由于缺少依赖项而无法部署到Heroku：输出：remote: 查看详情

在 XAMPP 上运行的 GRUNT + LESS + BROWSERSYNC

...Grunt的BrowserSync版本有一点大问题。问题：如果我编辑.php文件-BrowserSync工作良好，但如果我编辑.less文件，则什么都没有发生，但在bash中我仍然可以看到：[BS]文件已更改：d:\\loc 查看详情

在 Heroku 上运行预部署 Grunt 任务

...含grunt任务的预部署脚本。这些任务基本上是缩小css和js文件并执行更多操作，例如更新文件中的应用程序版本等。我现在能想到的唯一方法是提交gitrepo本身中的 查看详情

为什么在npm中使用插件的对等依赖？(代码片段)

...白。例我正在使用AppGyverSteroids，它使用Grunt任务将我的源文件构建到/dist/文件夹中，以便在本地设备上提供。我在npm和grunt都很新，所以我想完全理解发生了什么。到目前为止我得到了这个：[rootfolder]/package.json告诉npm它依赖于用... 查看详情

postman——集合——执行集合——分享（导出导入）集合运行结果

...在运行上时出现的下载图标。然后，您可以将生成的JSON文件保存在任意位置。您还可以选择一个收集运行，然后单击“跑步者”标题中的“ 导出结果”按钮。然后，将生成的JSON文件保存在任意位置。导入运行要... 查看详情

grunt

...建Grunt项目1.新建项目目录2.在项目目录下新建index.html,js文件夹，js文件夹下新建index.js3.运行命令npminit，填写项目的基本信息，生成package.json文件，生成package.json文件（如果老项目本身就是包含package.json的node项目则可以忽略这一... 查看详情

在 Grunt 任务中运行命令

...了澄清，我正在尝试使用闭包模板，“任务”应该调用jar文件将Soy文件预编译为javascript文件。我正在从命令行运行这个jar， 查看详情

在 ElasticBeanstalk 上运行 Grunt

】在ElasticBeanstalk上运行Grunt【英文标题】：RunGruntonElasticBeanstalk【发布时间】：2015-09-2505:36:00【问题描述】：我有一个节点应用程序需要grunt执行“构建”才能成功执行应用程序。（运行源代码的concat/minification/revving等）。我已... 查看详情

将现有 JavaScript 项目导入 Grunt/Brunch 项目

】将现有JavaScript项目导入Grunt/Brunch项目【英文标题】：ImportanExistingJavaScriptProjectintoaGrunt/BrunchProject【发布时间】：2012-07-0910:29:20【问题描述】：我观看了PaulIrish宣布Yeoman(www.yeoman.io)的演讲，我迷上了运行连续构建环境的概念。... 查看详情

如何在没有 grunt 或 gulp 的情况下将 typescript 编译器作为 package.json 脚本运行

...15-10-2308:32:43【问题描述】：我不想使用grunt或gulp来编译ts文件。我只想在我的package.json中这样做："scripts":"build": 查看详情

grunt入门学习-gruntfile具体示例

　　经过前面的学习，将测试的Gruntfile整合在一起！/***CreatedbyAdministratoron2017/6/22.*/module.exports=function(grunt){"usestrict";grunt.initConfig({pkg:grunt.file.readJSON("package.json"),//将存储在package.json文件中的grunt版本信 查看详情

grunt：从终端运行时找不到命令

...置Grunt。我按照here的说明操作，然后创建了一个包含以下文件的项目文件夹。当我尝试通过在终端中输入“grunt”来运行时，我得到commandnotfound。我还修改了 查看详情

如何将 json 文件导入 Blender？

】如何将json文件导入Blender？【英文标题】：HowdoyouimportjsonfilestoBlender?【发布时间】：2021-02-1811:03:29【问题描述】：我在YouTube上关注ChrisP的“在Blender中可视化真实世界的JSON数据（3D图表动画节点教程）”，但我似乎在导入数据... 查看详情

python将json格式文件导入redis，多种方法(代码片段)

...接redis安装redis与导入使用代码连接Redis写入键值操作JSON文件写入redis使用Python连接redis如果希望将JSON文件导入到 查看详情

将 Json 文件导入 Mongoose

】将Json文件导入Mongoose【英文标题】：ImportJsonfileintoMongoose【发布时间】：2017-01-0200:15:22【问题描述】：我需要将JSON文件导入数据库Mongoose。这应该是一个应该每天运行的脚本。我的JSON如下：["grant_title":"nameSRL","id":"30579843531","tot... 查看详情

在 Grunt 任务中读取文件名

】在Grunt任务中读取文件名【英文标题】：ReadfilenameinGrunttask【发布时间】：2018-03-1413:09:49【问题描述】：我已经将Grunt设置为使用grunt-replace，这样我就可以在几百个HTML页面中找到一个div，并将div中的文本替换为它所在的HTML文件... 查看详情

用于开发/生产环境的备用 grunt.js 任务

...：我正在尝试设置我的grunt.js文件，以便它仅在我的生产服务器上运行时运行min任务-在我的本地开发服务器上运行时我不想min我的代码与每个改变，因为它是不必要的。关于grunt.js如何区分开发/生产环境有什么想法吗？【问 查看详情