Error using $ionicLoading service


I am having an the following error while trying to use the Loading overlay. Here is my controller declaration.

.controller('SignUpController', function($scope, $http, $window, $ionicLoading){

And here is the error that I see thrown in browser console logs.

Error: [$injector:unpr]$injector/unpr?p0=%24ionicLoadingProvider%20%3C-%20%24ionicLoading
    at Error (native)
    at http://localhost:8000/js/lib/angular/angular.min.js:6:449
    at http://localhost:8000/js/lib/angular/angular.min.js:32:125
    at Object.c [as get] (http://localhost:8000/js/lib/angular/angular.min.js:30:200)
    at http://localhost:8000/js/lib/angular/angular.min.js:32:193
    at c (http://localhost:8000/js/lib/angular/angular.min.js:30:200)
    at d (http://localhost:8000/js/lib/angular/angular.min.js:30:417)
    at Object.instantiate (http://localhost:8000/js/lib/angular/angular.min.js:31:80)
    at http://localhost:8000/js/lib/angular/angular.min.js:61:486
    at http://localhost:8000/js/lib/angular/angular.min.js:49:14 

Not sure what is up there. Check this example and see if you are doing any differently.

If that doesn’t help, what version of Ionic are you using?

Hi Calendee - Thanks for such a quick reply! First of all I would like to say that ionic looks amazing and its so great for someone like me who just cant decide what stack to use for mobile development.

Back to the problem, I am using the basic app that I got while creating the project from CLI and the HTML files reference the files as this.

<!-- ionic/angularjs scripts -->
    <script src="js/lib/ionic/ionic.min.js"></script>
    <script src="js/lib/angular/angular.min.js"></script>
    <script src="js/lib/angular/angular-animate.min.js"></script>
    <script src="js/lib/angular/angular-route.min.js"></script>
    <script src="js/lib/angular/angular-touch.min.js"></script>
    <script src="js/lib/angular/angular-sanitize.min.js"></script>
    <script src="js/lib/angular/angular-resource.min.js"></script>
    <script src="js/lib/ionic/angular-ui-router.min.js"></script>
    <script src="js/lib/ionic/ionic-angular.min.js"></script>

But I see that in the example you have given the page is using just the bundle file for js and one file for css.

Frameworks - Oh boy - I know where you’re coming from. I bounced around all of them and finally settled here. You’ve made a good choice.

CLI : It seems the Ionic CLI tools are a bit behind the times. For right now, I’d go with the bundle as in the example. However, I caution you may need to change that down the road. It seems there’s been some conflict with 3rd party angular-modules. Having said that, the individual files should still work just fine. Here’s a sample with 0.9.26 using individual files:

FYI : You don’t need to use angular-touch nor angular-route as those are replaced with other alternatives in Ionic.

Hi Calendee,

Thank you so much. I have got the ionicLoding working by making use the codepen project. The default app created with CLI did contain a confusing folder structure. Thank you much for your help!