加载JSON数据与AngularJS厂 [英] Loading json data with an AngularJS factory

问题描述

我在我的控制了巨大的JSON对象，我想outsorce到一个单独的文件。到目前为止，我这样做：

I have a huge json object in my controller that I would like to outsorce to a seperate file. So far I'm doing this:

myApp.controller('smController', ['$scope', function($scope) {
  ...
  var stadtmobilRates = {
    classic: {
      A: {
        night: 0,
        hour: 1.4,
        day: 21,
        week: 125,
        km000: 0.2,
        km101: 0.18,
        km701: 0.18
      },
      ...
    }
  };

我使用了一个工厂，并承诺为解释这里＃2：

myApp.factory('stadtMobilRates', function($http) {
  var promise = null;

  return function() {
    if (promise) {
      // If we've already asked for this data once,
      // return the promise that already exists.
      return promise;
    } else {
      promise = $http.get('stadtmobilRates.json');
      return promise;
    }
  };
});

myApp.controller('smController', ['$scope', function($scope, stadtMobilRates) {
  var stadtmobilRates = null;
  stadtMobilRates().success(function(data) {
    stadtmobilRates = data;
  });

现在我得到一个类型错误：未定义是不是功能在 stadtMobilRates（）成功（功能（数据）{行。为什么 stadtMobilRates 工厂不接受虽然我它注入控制器？

Now I'm getting a TypeError: undefined is not a function at the stadtMobilRates().success(function(data) { line. Why is the stadtMobilRates factory not accepted although I've injected it into the controller?

编辑＃1：我已经添加了工厂到阵列的名称由对虾的建议。

Edit #1: I've added the name of the factory to the array as suggested by prawn.

myApp.controller('smController', ['$scope', 'stadtMobilRates', function($scope, stadtMobilRates) {
  var stadtmobilRates = null;
  stadtMobilRates().success(function(data) {
    stadtmobilRates = data;
  });

  console.log(stadtmobilRates);

不过stadtmobilRates是空？

编辑＃2：我创建我的应用程序的简化版本，在 Plunker 。那么它的工作原理。在充分应用我有不同的路线，在哪里工作 stadtmobilRates 仍然空。我无法创建路由的全部应用程序的Plunker。因此，这里是 GitHub的满code。上面的code是线159 。我猜它是与我的路线？

Edit #2: I've created a simplified version of my app on Plunker. Well it works. On the full app I'm working with different routes, where stadtmobilRates still remains null. I'm unable to create a Plunker of the full app with the routes. So here is the full code on GitHub. The code above is from Line 159. I guess it has something to do with my routes?

推荐答案

您忘了合格出厂数组中的名称。通常情况下你传递一个数组，其元素组成的字符串，后跟函数本身的列表。一定要保持数组中的同步与函数声明的参数。这种方式的喷射器知道哪些服务要注入的功能。

You forgot to pass the name of the factory in the array. Typically you pass an array whose elements consist of a list of strings followed by the function itself. Be sure to keep the array in sync with the parameters in the function declaration. This way the injector knows what services to inject into the function.

myApp.controller('smController', ['$scope', 'stadtMobilRates', function($scope, stadtMobilRates) {

修改

这是我会怎么做......当路由使用我喜欢用决心这样得到的数据加载一次并存储。所以在 $ routeProvider ，我将在该smController部分更改为以下...

This is how I would do it...When routes are used I like to use resolve so the data gets loaded once and is stored. So in the $routeProvider, I would change the the smController part to the following...

 when('/sm', {
      templateUrl: 'partials/sm.html',
      controller: 'smController',
      resolve:{
              load:function(stadtMobilRates){
                  return stadtMobilRates.LoadData();
          }
    }).

我也修改了工厂

myApp.factory('stadtMobilRates', function ($q, $http) {
var mobilRates = null;

function LoadData() {
    var defer = $q.defer();
    $http.get('stadtmobilRates.json').success(function (data) {
        mobilRates = data;
        defer.resolve();
    });
    return defer.promise;
}

return {
    GetData: function () { return mobilRates ; },
    LoadData:LoadData
}
});

因此​​被载入这条路之前，它会调用在工厂 LoadData 功能。一旦数据被加载，它解决了诺言所以这个 LoadData 函数只被调用一次。一旦承诺解决，它会继续和加载的看法。

So before this route is loaded, it's going to call the LoadData function in the factory. Once the data gets loaded, it resolves the promise so this LoadData function will only get called once. Once the promise resolves, it will go ahead and load the view.

所以在你的控制器，只要你想要得到的数据现在，你需要做的就是调用函数的GetData

So now in your controller, whenever you want to get the data, all you have to do is call the function GetData

myApp.controller('smController', ['$scope', 'stadtMobilRates', function($scope, stadtMobilRates) 
{
     var stadtmobilRates = stadtMobilRates.GetData();
});

这篇关于加载JSON数据与AngularJS厂的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！