I'm new to Angular and dependency injection. I'm receiving the following error on page load. I'm attempting to create a form wizard like this example in .Net/MVC4. Any help is greatly appreciated.

Uncaught Error: [$injector:unpr] Unknown provider: $$qProvider <- $$q <- $animate <- $pile

Scripts loading in view head:

<script src="@Url.Content("/Scripts/bower_ponents/angular/angular.js")"></script>
<script src="@Url.Content("/Scripts/bower_ponents/angular-ui-router/release/angular-ui-router.js")"></script>
<script src="@Url.Content("/Scripts/bower_ponents/angular-animate/angular-animate.js")"></script>
<script src="@Url.Content("/Scripts/modules/long-form-app-module/LongFormApp.js")"></script>
<script src="@Url.Content("/Scripts/modules/long-form-app-module/LongFormController.js")"></script>

HTML Markup

<div class="application">

  <!-- Inject partial view from router -->
  <section ui-view></section>

</div>

LongFormApp.js Script

(function () {

  'use strict';

  // Create our app and inject ngAnimate and ui-router 
  angular.module('GllApp', ['longFormController'])
    .config(function ($stateProvider, $urlRouterProvider) {

    // Catch all route
    // By default send user to question one
    $urlRouterProvider.otherwise('/home');

    $stateProvider

      // Route to show start of form
      .state('home', {
        url: '/home',
        templateUrl: 'LongForm.html',
        controller: 'LongFormController'
      })

      // Route to show start of form
      .state('home.q01', {
        url: '/home/q01',
        templateUrl: 'LongFormQuestion01.html'
      });

  });

})();

LongFormController.js Script

(function () {

  'use strict';

  angular.module('longFormController', ['ngAnimate', 'ui.router'])
  .controller('LongFormController', ['$scope', function ($scope) {

    // do stuff

  }]);

})();

I'm new to Angular and dependency injection. I'm receiving the following error on page load. I'm attempting to create a form wizard like this example in .Net/MVC4. Any help is greatly appreciated.

Uncaught Error: [$injector:unpr] Unknown provider: $$qProvider <- $$q <- $animate <- $pile

Scripts loading in view head:

<script src="@Url.Content("/Scripts/bower_ponents/angular/angular.js")"></script>
<script src="@Url.Content("/Scripts/bower_ponents/angular-ui-router/release/angular-ui-router.js")"></script>
<script src="@Url.Content("/Scripts/bower_ponents/angular-animate/angular-animate.js")"></script>
<script src="@Url.Content("/Scripts/modules/long-form-app-module/LongFormApp.js")"></script>
<script src="@Url.Content("/Scripts/modules/long-form-app-module/LongFormController.js")"></script>

HTML Markup

<div class="application">

  <!-- Inject partial view from router -->
  <section ui-view></section>

</div>

LongFormApp.js Script

(function () {

  'use strict';

  // Create our app and inject ngAnimate and ui-router 
  angular.module('GllApp', ['longFormController'])
    .config(function ($stateProvider, $urlRouterProvider) {

    // Catch all route
    // By default send user to question one
    $urlRouterProvider.otherwise('/home');

    $stateProvider

      // Route to show start of form
      .state('home', {
        url: '/home',
        templateUrl: 'LongForm.html',
        controller: 'LongFormController'
      })

      // Route to show start of form
      .state('home.q01', {
        url: '/home/q01',
        templateUrl: 'LongFormQuestion01.html'
      });

  });

})();

LongFormController.js Script

(function () {

  'use strict';

  angular.module('longFormController', ['ngAnimate', 'ui.router'])
  .controller('LongFormController', ['$scope', function ($scope) {

    // do stuff

  }]);

})();

• javascript
• angularjs
• asp-mvc-4
• dependency-injection

Share Improve this question Follow edited Oct 16, 2014 at 20:06 Jason Spence asked Oct 16, 2014 at 19:10 Jason SpenceJason Spence 56466 silver badges1919 bronze badges 2

• where you have angular.module('GllApp', ['longFormController']... do you have a module named longFormController? also, syntax error? (IE LongFormController). – dannypaz Commented Oct 16, 2014 at 19:34
• I updated the code above with new code being used. I'm still receiving the same errors. – Jason Spence Commented Oct 16, 2014 at 21:06

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 7

I just fixed this exact problem with my project. The root cause was I was depending on "angular-animate": "~1.3.0", so bower was using Angular v1.3 even though the rest of the project was depending on Angular 1.2.

Just use

"angular-animate": "~1.2.0"

instead of

"angular-animate": "~1.3.0"

in your bower.json file. After a bower install everything should work!

You are creating the module twice, the second one you are loading replaces the first one. I'm not sure what order you want your dependencies in, but you probably just want one app:

var myGllApp = angular.module('GllApp', ['ngAnimate', 'ui.router']);

And load your controller script later and add it to your exising module by not passing the dependency list to angular.module:

angular.module('GllApp')
  .controller('LongFormController', ['$scope', function ($scope) {

I've refactored the code you posted and added ments. Try this and see if you receive another error?

This is assuming you are loading: First Snippet > Second Snippet

(function () {
    //use this inside of the SC function or else use strict will be used globally
    //and cause unexpected results
    'use strict';

    // Create our app and inject ngAnimate and ui-router
    // You don't need to create this variable if it is for scoping reasons, 
    // since you have already created a defined scope within the Self-Calling function
    angular.module('GllApp', ['ngAnimate', 'ui.router'])
        .config(function ($stateProvider, $urlRouterProvider) {
            // Catch all route
            // By default send user to question one
            $urlRouterProvider.otherwise('/home');

            $stateProvider
                // Route to show start of form
                .state('home', {
                    url: '/home',
                    templateUrl: 'form.html',
                    controller: 'LongFormController'
                })
                // Route to show start of form
                .state('home.q01', {
                    url: '/home/q01',
                    templateUrl: 'form-q01.html'
                });
        });
    })();

(function () {
    'use strict';

    angular.module('GllApp', ['ngAnimate']) //since you are not using stateProvider here you do not need to inject ui.router
        .controller('LongFormController', ['$scope', function ($scope) {
            // do stuff
        }]);
})();