javascript - Loading json data with an AngularJS factory - Stack Overflow

admin管理员组

文章数量:1400126

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
      },
      ...
    }
  };

I have used a factory and promises as explained here on Stackoverflow:

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

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?

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

However stadtmobilRates is null?

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?

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
      },
      ...
    }
  };

I have used a factory and promises as explained here on Stackoverflow:

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

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?

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

However stadtmobilRates is null?

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?

• javascript
• json
• angularjs
• factory

Share Improve this question Follow edited May 23, 2017 at 12:33 CommunityBot 111 silver badge asked Dec 30, 2014 at 23:21 mlesmles 3,4961414 gold badges5959 silver badges105105 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 6

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) {

EDIT

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();
          }
    }).

I've also modified the factory

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

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.

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

本文标签： javascriptLoading json data with an AngularJS factoryStack Overflow