我收到以下错误:
错误: $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"
,它应该可以解决您遇到的问题。
希望对您有所帮助!