Question

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

Uncaught Error ：[$ injector：unpr]未知提供商：$$ qProvider＆lt; - $$ q＆lt; - $ animate＆lt; - $ compile

在视图头中加载的脚本：

<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

我刚刚用我的项目解决了这个问题。根本原因是我依赖于“角度 - 动画”：“~1.3.0”，所以凉亭使用Angular v1.3，即使项目的其余部分依赖于Angular 1.2。

只需使用

"angular-animate": "~1.2.0"

而不是

"angular-animate": "~1.3.0"

在你的bower.json文件中

。在bower install之后一切都应该有效！

Answer 2

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

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

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

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

Answer 3

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

假设您正在加载：第一个代码段＆gt;第二个片段

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

MVC4＆amp;使用ngAnimate作为依赖项时出现AngularJS错误

3 个答案: