Uncaught Error: [$injector:unpr] Unknown provider Ionic Framework/AngularJS

Question

Following the local storage tutorial on the Ionic blog, I'm trying to set/get a localStorage value when my Ionic app runs but I get the error message:

Uncaught Error: [$injector:unpr] Unknown provider: $localstorageProvider <- $localstorage

My app.js code:

angular.module('starter', ['ionic', 'starter.controllers', 'starter.services'])

.run(function($ionicPlatform, $localstorage) {
  $ionicPlatform.ready(function() {
    // Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
    // for form inputs)
    if(window.cordova && window.cordova.plugins.Keyboard) {
      cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
    }
    if(window.StatusBar) {
      // org.apache.cordova.statusbar required
      StatusBar.styleDefault();
    }

    $localstorage.set('name', 'Ian');
    console.log($localstorage.get('name'));
  });
})

And services.js:

angular.module('starter.services', [])

.factory('localstorage', ['$window', function($window) {
  return {
    set: function(key, value) {
      $window.localStorage[key] = value;
    },
    get: function(key, defaultValue) {
      return $window.localStorage[key] || defaultValue;
    },
    setObject: function(key, value) {
      $window.localStorage[key] = JSON.stringify(value);
    },
    getObject: function(key) {
      return JSON.parse($window.localStorage[key] || '{}');
    }
  }
}]);

Not sure what I'm missing here.

EDIT: If I change my app.js code to the following, it works as expected:

angular.module('starter', ['ionic', 'starter.controllers', 'starter.services'])

.run(function($ionicPlatform, $localstorage) {
  $ionicPlatform.ready(function() {
    // Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
    // for form inputs)
    if(window.cordova && window.cordova.plugins.Keyboard) {
      cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
    }
    if(window.StatusBar) {
      // org.apache.cordova.statusbar required
      StatusBar.styleDefault();
    }

    window.localStorage.setItem('name', 'Ian');
    console.log(window.localStorage.getItem('name'));

  });
})

Solution 1

Circling back to this, I was able to fix it by injecting $window:

.run(function($ionicPlatform, $window ) {

Then I was able to get/set by using:

$window.localStorage.setItem( 'name', 'Ian' );
$window.localStorage.getItem( 'name' ); // Ian

Solution 2

Had the same problem with the Ionic tutorial implementation: http://learn.ionicframework.com/formulas/localstorage/

It worked when I removed the $ sign in front of localstorage.

.run(function($ionicPlatform, localstorage)

Comments

[Whisher]

yeah it works but why on earth works ? :) I've tried to put the snippet in a simple angular app (using $localstorage) and it works with no trouble so .....

[Whisher]

PS it works changing name like myStorage or whatever but not only removed the $ in front of localstorage

[divyenduz]

Because it is not inbuilt. That is a custom factory name. Which in your case, you have written as .factory('localstorage', ['$window', function($window) { and in the tutorial it is #localstorage