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

Importing JSON file into Angular application running on Grunt server

本文关键字：运行 Angular 应用程序 服务器 文件 JSON 导入 Grunt      更新时间：2023-09-26

我正在遵循基本的Angular教程，需要在其中包含一个JSON文件。我用Yeoman启动了我的应用程序，它正在咕噜咕噜地运行。

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)

任何帮助将不胜感激！

最好将

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]
    })
});

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

相关文章：