Question

我收到以下错误：

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>

Answer 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错误。

如果您从ng-controller="SearchController"移除search.html，则应解决您遇到的问题。

希望有所帮助！

如何在AngularJS中修复$ injector：unpr未知提供程序错误？

这是我的代码：（Plunker link）

1 个答案: