使用 ngAnimate 作为依赖项时出现 MVC4 和 AngularJS 错误

Question

我是 Angular 和依赖注入的新手。我在页面加载时收到以下错误。我正在尝试在 .Net/MVC4 中创建像 this example 这样的表单向导。非常感谢任何帮助。

Uncaught Error：[$injector:unpr] 未知提供者：$$qProvider

在视图头中加载脚本：

<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

我刚刚在我的项目中解决了这个确切的问题。根本原因是我依赖于“angular-animate”：“~1.3.0”，所以即使项目的其余部分依赖于 Angular 1.2，bower 也使用 Angular v1.3。

随便用

"angular-animate": "~1.2.0"

而不是

"angular-animate": "~1.3.0"

在您的 bower.json 文件中。在bower install 之后，一切都应该正常了！

Answer 2

您正在创建模块两次，您正在加载的第二个替换第一个。我不确定您希望依赖项的顺序是什么，但您可能只想要一个应用程序：

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

稍后加载您的控制器脚本并将其添加到现有模块中，方法是不将依赖项列表传递给angular.module：

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

Answer 3

我已经重构了您发布的代码并添加了 cmets。试试这个，看看你是否收到另一个错误？

这是假设您正在加载：第一个片段 > 第二个片段

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