AngularJS：$喷油器：使用ngAnimate时unpr错误 [英] AngularJS: $injector:unpr error when using ngAnimate

问题描述

我试图 ngAnimate 添加到我的角度应用程序的依赖关系。这里是我的角度app文件：

  VAR carApp = angular.module（carApp，[ngAnimate]）;
 

下面是我的 TableBodyCtrl 控制器：

  carApp.controller（TableBodyCtrl功能（$范围，$ HTTP）{
    $ scope.loading = FALSE;
    ...
}）;
 

下面是我的 TablePanelCtrl ：

  carApp.controller（TablePanelCtrl功能（）{
    this.tab = 1;
    ...
}）;
 

我的控制器都在控制器不同的文件文件夹中。

下面是角库脚本加载：

 ＆LT;脚本类型=文/ JavaScript的SRC =JS / angular.min.js＆GT;＆LT; / SCRIPT＆GT;
＆LT;脚本类型=文/ JavaScript的SRC =JS /角animate.min.js＆GT;＆LT; / SCRIPT＆GT;
 

下面是我的角度应用程序文件的脚本负荷：

 ＆LT;脚本类型=文/ JavaScript的SRC =JS / carApp.js＆GT;＆LT; / SCRIPT＆GT;
 

下面是我的控制器的负载脚本：

 ＆LT;脚本类型=文/ JavaScript的SRC =JS /控制器/ TablePanelCtrl.js＆GT;＆LT; / SCRIPT＆GT;
＆LT;脚本类型=文/ JavaScript的SRC =JS /控制器/ TableBodyCtrl.js＆GT;＆LT; / SCRIPT＆GT;
 

当我运行我的web应用程序我得到这个错误：

 未知提供商：$$ qProvider＆LT;  -  $$ Q＆LT;  -  $有生＆LT;  -  $编译https://docs.angularjs.org/error/$injector/unpr?p0=$$qProvider%20%3C-%20$$q%20%3C-%20$animate%20%3C-%20$compile
 

此错误才开始显示出来我加ngAnimate之后，我的角度应用的依赖关系。

我该如何解决呢？

解决方案

我已经设置了完全相同的设置为你在这个的 plnkr

有没有错误出现。你在做什么是正确的。

文件的顺序，模块创建与'ngAnimate'作为依赖

  VAR carApp = angular.module（carApp，[ngAnimate]）;
 

是做正确的方式。

Altough，但有一点要记住：

从Angularjs 文档

  

有两种类型的角脚本的URL可以指向，一个用于
  发展，一个用于生产

  
  

angular.js - 这是人类可读，无精缩版，
  适合于Web开发。 angular.min.js - 这是缩小的
  版本，我们强烈建议您在生产中使用。

同样为角animate.js。

这将帮助你在发展的同时，它会告诉你更好的错误报告。

另外一点是，即使使用精缩angularjs版本时，你会得到一个链接到长描述错误味精，并通过查找在 <一个href=\"https://docs.angularjs.org/error/$injector/unpr?p0=$$qProvider%20%3C-%20$$q%20%3C-%20$animate%20%3C-%20$compile\"相对=nofollow>链接 您提供您的错误味精，我看到这样的：

  

未知的提供程序错误也可以由意外引起的
  使用angular.module API重新定义的模块，如图中
  下面的例子。

  angular.module（MyModule的，[]）
。服务（'myCoolService'，函数（）{/ * ... * /}）;angular.module（MyModule的，[]）
// Mymodule中已创建！这不是你想要的！
.directive（'myDirective'，['myCoolService'，函数（myCoolService）{
  //这个指令定义抛出未知的供应商，因为myCoolService
  //已毁。
}]）;
 

  
  

要解决此问题，请确保您只定义每个模块与angular.module在您的整个（姓名，[要求]）语法一次
  项目。检索它随后与angular.module（名称）的使用。该
  固定示例如下所示。

  angular.module（MyModule的，[]）
。服务（'myCoolService'，函数（）{/ * ... * /}）;angular.module（MyModule的'）
.directive（'myDirective'，['myCoolService'，函数（myCoolService）{
  //这个指令定义不扔不明供应商。
}]）;
 

I am trying to add ngAnimate to my angular app dependencies. Here is my angular app file:

var carApp = angular.module("carApp", ["ngAnimate"]);

Here is my TableBodyCtrl controller:

carApp.controller("TableBodyCtrl", function($scope, $http){
    $scope.loading = false;
    ...
});

Here is my TablePanelCtrl:

carApp.controller("TablePanelCtrl", function(){
    this.tab = 1;
    ...
});

My controller are in different files in the controller folder.

Here is the script loads of angular libraries:

<script type="text/javascript" src="js/angular.min.js"></script>
<script type="text/javascript" src="js/angular-animate.min.js"></script> 

Here is the script load of my angular app file:

<script type="text/javascript" src="js/carApp.js"></script>

Here is the script loads of my controllers:

<script type="text/javascript" src="js/controllers/TablePanelCtrl.js"></script>
<script type="text/javascript" src="js/controllers/TableBodyCtrl.js"></script>

When I run my web-app I get this error:

Unknown provider: $$qProvider <- $$q <- $animate <- $compile

https://docs.angularjs.org/error/$injector/unpr?p0=$$qProvider%20%3C-%20$$q%20%3C-%20$animate%20%3C-%20$compile

This error only started to show up after I add "ngAnimate" to my angular app dependencies.

How can I fix that?

解决方案

I've set up the exact same setup as you provided in this plnkr,

There are no errors there. What you're doing is correct.

The order of files and the module creation with 'ngAnimate' as dependency

var carApp = angular.module("carApp", ["ngAnimate"]);

is the right way to do it.

Altough, one point to keep in mind:

from Angularjs docs

There are two types of angular script URLs you can point to, one for development and one for production:

angular.js — This is the human-readable, non-minified version, suitable for web development. angular.min.js — This is the minified version, which we strongly suggest you use in production.

same goes for angular-animate.js.

This will help you in development while it'll show you better error reports.

Another point is even when using minified angularjs version, you get a link to the 'long descriptive' error msg, and by looking the link your provided with your error msg, I saw this:

An unknown provider error can also be caused by accidentally redefining a module using the angular.module API, as shown in the following example.

angular.module('myModule', [])
.service('myCoolService', function () { /* ... */ });

angular.module('myModule', [])
// myModule has already been created! This is not what you want!
.directive('myDirective', ['myCoolService', function (myCoolService) {
  // This directive definition throws unknown provider, because myCoolService
  // has been destroyed.
}]);

To fix this problem, make sure you only define each module with the angular.module(name, [requires]) syntax once across your entire project. Retrieve it for subsequent use with angular.module(name). The fixed example is shown below.

angular.module('myModule', [])
.service('myCoolService', function () { /* ... */ });

angular.module('myModule')
.directive('myDirective', ['myCoolService', function (myCoolService) {
  // This directive definition does not throw unknown provider.
}]);

这篇关于AngularJS：$喷油器：使用ngAnimate时unpr错误的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！