如何修复 AngularJS 中的 $injector:unpr 未知提供程序错误？答案

【问题标题】：How to fix $injector:unpr Unknown Provider Error in AngularJS?如何修复 AngularJS 中的 $injector:unpr 未知提供程序错误？
【发布时间】：2018-03-11 21:43:29
【问题描述】：

我收到以下错误：

Error: $injector:unpr Unknown Provider
Unknown provider: _planetsProvider <- _planets <- SearchController

.API 获取请求工作正常，我的 SearchController.js 也被触发，但我仍然收到上述错误。我已经尝试了 StackOverflow 和官方文档中的几乎所有建议。我该如何解决？

这是我的代码：(Plunker link)

app.js

var myApp = angular.module('myApp', ['ngRoute']);

myApp.config( function($routeProvider) {
    $routeProvider
    .when('/', { templateUrl: '/views/home.html',
                                controller: 'HomeController' })
      .when('/login', { templateUrl: '/views/login.html',
                                controller: 'LoginController' })
                               
      .when('/search',  { templateUrl: '/views/search.html',
                                controller: 'SearchController',
                                resolve:{
                                    _planets: function(myService)
                                    {
                                        console.log("asdas");
                                        return myService.getRequestForPlanets();

                                    }
                                }
                            })
                                
      });

SearchController.js

angular.module('myApp').controller('SearchController', function($scope, myService, _planets, $rootScope) {
    $scope.message = 'This is Show orders screen';
    $scope.planets=_planets;
    console.log(_planets);
});

myService.js

angular.module('myApp').service('myService', function($http, $rootScope, $location, $q)
{   
    $rootScope.loading = false; 

    this.getRequestForPlanets=function()
    {
        $rootScope.loading = true;
        var deferred = $q.defer();
        $http.get('https://swapi.co/api/planets')
        .then(function(response){
            $rootScope.loading = false;
            console.log(response.data.results);
           deferred.resolve(response.data.results);
        })
        .catch(function(response){
          deferred.reject(response);
        });
        
        return deferred.promise;
        
    }

});

index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <link rel="stylesheet" type="text/css" href="myCss.css">
 


</head>
<body  ng-app="myApp">
 <!-- ng-controller="myController" -->
 <div class="spinner" ng-show="loading">
  <div class="loader" ></div>
</div>


<div ng-view></div>

<section class="imgDiv">
    <div  class="container-fluid">
        <!-- <img src="C:\Users\Public\Pictures\Sample Pictures\Desert.jpg" style="width: 100%;"> -->
        <div class="sn_scroll_btn slideInDown ">
           <img src="images/scroll.png" alt="" class="test">
       </div>
    </div>
</section>

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>   
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular-route.js"></script>
  <script type="text/javascript" src="app.js"></script>
    <script type="text/javascript" src="controllers/LoginController.js"></script>
  <script type="text/javascript" src="controllers/SearchController.js"></script>
  <script type="text/javascript" src="services/myService.js"></script>
  <script type="text/javascript" src="controllers/HomeController.js"></script>

</body>
</html>

【问题讨论】：

编辑：如果您可以创建一个小提琴来说明这一点，那将有助于回答这个问题
plnkr.co/edit/WRh3z5HTGby6nT1G8ovi?p=preview
你确定这些行吗？ $scope.planets=_planets; console.log(_planets);
这个 _planets 注入服务来自哪里？您是否错过了在 html 文件中包含任何脚本标签？
@Rakesh Burbure - 我按照下面的链接在 app.js 中使用解析属性 odetocode.com/blogs/scott/archive/2014/05/20/…

标签： angularjs

【解决方案1】：

根据您提供的 plnkr 链接：https://plnkr.co/edit/WRh3z5HTGby6nT1G8ovi?p=preview

你的控制器被实例化了两次，一次在你的路由中，在app.js这里：

.when('/search',  { templateUrl: '/views/search.html',
                        controller: 'SearchController',
                        ...

再次在search.html 中查看：

<div ng-controller="SearchController">
<p>{{message}}</p>
...

由于 SearchController 已经通过您的路由注入到应用程序中，第二次在视图中实例化它时，它会引发 Unknown Provider 错误。

如果您从search.html 中删除ng-controller="SearchController"，它应该可以解决您遇到的问题。

希望有帮助！

【讨论】：

一切正常。愚蠢的错误！我以为我在 app.js 中的“解析”属性中犯了一些错误。但它是 ng 控制器。非常感谢。