MVC4＆安培;使用ngAnimate作为一个依赖时，AngularJS错误 [英] MVC4 & AngularJS error when using ngAnimate as a dependency

问题描述

我新的角度和依赖注入。我收到在页面加载下面的错误。我试图创建一个表单向导例如 这个例子 在.net / MVC4。任何帮助是极大的AP preciated。

<一个href=\"http://errors.angularjs.org/1.2.26/$injector/unpr?p0=%24%24qProvider%20%3C-%20%24%24q%20%3C-%20%24animate%20%3C-%20%24compile\"相对=nofollow>未捕获的错误 ：[$喷油器：unpr]未知提供商：$$ qProvider＆LT; - $$ Q＆LT; - $有生＆LT; - $编译

脚本鉴于磁头加载：

 ＆LT;脚本的src =@ Url.Content（/脚本/ bower_components /角/ angular.js）＆GT;＆LT; / SCRIPT＆GT;
＆LT;脚本src=\"@Url.Content(\"/Scripts/bower_components/angular-ui-router/release/angular-ui-router.js\")\"></script>
＆LT;脚本src=\"@Url.Content(\"/Scripts/bower_components/angular-animate/angular-animate.js\")\"></script>
＆LT;脚本的src =@ Url.Content（/脚本/模块/长篇应用模块/ LongFormApp.js）＆GT;＆LT; / SCRIPT＆GT;
＆LT;脚本的src =@ Url.Content（/脚本/模块/长篇应用模块/ LongFormController.js）＆GT;＆LT; / SCRIPT＆GT;
 

HTML标记

 ＆LT; D​​IV CLASS =应用程序＆GT;  ＆LT;！ - 从路由器注射局部视图 - ＆GT;
  ＆lt;节UI的视图＆gt;＆LT; /节＆gt;＆LT; / DIV＆GT;
 

LongFormApp.js脚本

 （函数（）{  使用严格的;  //创建我们的应用程序，并注入ngAnimate和UI路由器
  angular.module（'GllApp'，['longFormController']）
    的.config（函数（$ stateProvider，$ urlRouterProvider）{    //捕获所有航线
    //默认情况下发送用户问题1
    $ urlRouterProvider.otherwise（'/家）;    $ stateProvider      //路线展现形式开始
      .STATE（'家'，{
        网址：'/家，
        templateUrl：LongForm.html'，
        控制器：'LongFormController
      }）      //路线展现形式开始
      .STATE（'home.q01'，{
        网址：'/家庭/ Q01，
        templateUrl：LongFormQuestion01.html
      }）;  }）;}）（）;
 

LongFormController.js脚本

 （函数（）{  使用严格的;  angular.module（'longFormController'，['ngAnimate'，'ui.router']）
  .controller（'LongFormController'，['$范围'，函数（$范围）{    // 做东西  }]）;}）（）;
 

解决方案

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

  VAR myGllApp = angular.module（'GllApp'，['ngAnimate'，'ui.router']）;
 

和后加载控制器脚本，并没有通过依赖关系列表将其添加到您的exising模块 angular.module ：

  angular.module（'GllApp'）
  .controller（'LongFormController'，['$范围'，函数（$范围）{
 

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 <- $compile

Scripts loading in view head:

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

  }]);

})();

解决方案

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

这篇关于MVC4＆安培;使用ngAnimate作为一个依赖时，AngularJS错误的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！