在使用 AngularJS 进行前端开发时，经常会遇到错误信息：“Unknown Provider”。这个错误通常是由于依赖注入（Dependency Injection）出现问题导致的。其中一个常见的情况就是在使用 angular-animate 模块时出现了该错误。
本文将通过详细的分析和示例代码，介绍如何解决在 AngularJS 应用中使用 angular-animate 模块时出现的 Unknown Provider 错误。
什么是依赖注入？
在 AngularJS 中，依赖注入是指将一个对象或函数所依赖的其它对象或函数作为参数传递给它，从而实现它们之间的关联。这种技术可以使应用程序更加模块化、可测试和易于维护。
例如，下面是一个简单的 AngularJS 控制器：
angular.module('myApp', [])
.controller('MyController', function($scope) {
// 控制器代码
});在这个控制器中，我们通过 $scope 参数来引用 AngularJS 的作用域对象。AngularJS 就是通过依赖注入将 $scope 对象传递给控制器的。
为什么会出现 Unknown Provider 错误？
当我们在应用程序中使用一个模块或服务时，AngularJS 首先会查找当前模块是否已经包含该模块或服务。如果没有找到，它会继续搜索父模块，直到找到为止。
如果依赖关系不存在或者没有正确注入依赖，就会出现 Unknown Provider 错误。例如，在使用 angular-animate 模块时，需要将其作为依赖注入到主模块中：
angular.module('myApp', ['ngAnimate'])
.controller('MyController', function($scope) {
// 控制器代码
});如果我们没有正确地将 ngAnimate 作为依赖注入到主模块中，就会出现 Unknown Provider 错误。
如何解决 Unknown Provider 错误？
下面是一些可能导致 Unknown Provider 错误的常见问题以及它们的解决方案。
1. 模块未加载
如果你没有在你的应用程序中加载依赖模块，就会出现 Unknown Provider 错误。例如，在使用 ngAnimate 模块时，需要确保它已经被加载了。可以在 HTML 文件中通过 <script> 标签加载它：
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.9/angular-animate.min.js"></script>
也可以在主模块中将它作为依赖注入：
angular.module('myApp', ['ngAnimate'])
.controller('MyController', function($scope) {
// 控制器代码
});2. 模块名不正确
如果你的模块名称拼写错误、大小写不正确或者没有被正确命名，就会出现 Unknown Provider 错误。在下面的代码中，我们将 nganimate 模块的名称拼写错误：
angular.module('myApp', ['nganimate'])
.controller('MyController', function($scope) {
// 控制器代码
});这个错误可以通过将模块名称更正为 ngAnimate 来解决：
angular.module('myApp', ['ngAnimate'])
.controller('MyController', function($scope) {
// 控制器代码
});3. 服务名称不正确
如果你使用了错误的服务名称，就会出现 Unknown Provider 错误。例如，在下面的代码中，我们试图注入一个名为 $animte 的服务：
angular.module('myApp', ['ngAnimate'])
.controller('MyController
> 来源：[JavaScript中文网](https://www.javascriptcn.com/post/25495) ，转载请注明来源
[https://www.javascriptcn.com/post/25495](https://www.javascriptcn.com/post/25495)