使用ngAnimate作爲依賴項時出現MVC4＆AngularJS錯誤

Question

我是Angular和依賴注入的新手。我在頁面加載時收到以下錯誤。我試圖在.Net/MVC4中創建一個表單嚮導，如this example。任何幫助是極大的讚賞。

Uncaught Error：[$注射器：unpr]未知提供商：$$ qProvider < - $$ q < - $動畫< - $編譯

腳本鑑於磁頭裝載：

<script src="@Url.Content("/Scripts/bower_components/angular/angular.js")"></script> 
<script src="@Url.Content("/Scripts/bower_components/angular-ui-router/release/angular-ui-router.js")"></script> 
<script src="@Url.Content("/Scripts/bower_components/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標記

<div class="application"> 

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

</div> 

LongFormApp.js腳本

(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腳本

(function() { 

    'use strict'; 

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

    // do stuff 

    }]); 

})(); 

Answer 1

您所創建的模塊的兩倍，正在加載的第二個替換第一個。我不知道你想你依賴什麼樣的順序中，但你可能只是想要一個應用程序：

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

後來加載器的腳本，並通過不通過的依賴列表angular.module它添加到您的exising模塊：

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

Answer 2

我重構了您發佈的代碼並添加了評論。試試這個，看看你是否收到另一個錯誤？

這是假設您正在加載：第一個片段>二片段

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

Answer 3

我只是固定我的項目這個確切的問題。根本原因是我依賴於「angular-animate」：「〜1.3.0」，所以bower使用了Angular v1.3，即使項目的其餘部分依賴於Angular 1.2。

在bower.json文件只需使用

"angular-animate": "~1.2.0" 

，而不是

"angular-animate": "~1.3.0" 

。經過一個bower install一切應該工作！