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

Posted 2023-03-07

【中文标题】将 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 旁边

【讨论】：

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