MVC4 & AngularJS Error When Using NgAnimate As A Dependency

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 grea

Solution 1:

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!

Solution 2:

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

Solution 3:

I've refactored the code you posted and added comments. 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
        }]);
})();