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



我收到以下错误:

错误: $injector:unpr 未知提供程序
未知提供程序:_planetsProvider <- _planets <- 搜索控制器

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

这是我的代码:(Plunker链接(

应用.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();
                                    }
                                }
                            })
                                
      });

搜索控制器.js

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

我的服务.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;
        
    }
});

索引.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:UsersPublicPicturesSample PicturesDesert.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 链接: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",它应该可以解决您遇到的问题。

希望对您有所帮助!

相关内容

最新更新