CODEWITHSUNDEEP
angularjs
D_B
D_B

Reputation: 481

How to fix $injector:unpr Unknown Provider Error in AngularJS?

I'm getting the following error:

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

.API get request is working fine and my SearchController.js is also triggered, but I'm still getting the error above. I have tried almost all suggestions from StackOverflow and official document. How can I fix it?

Here's my code: (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>

Upvotes: 0

Views: 4181

Answers (1)

Sharmila Jesupaul
Sharmila Jesupaul

Reputation: 131

Based on the plnkr link you provided: https://plnkr.co/edit/WRh3z5HTGby6nT1G8ovi?p=preview

Your controller is being instantiated twice, once in your routes, in app.js here: 

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

and again in your view in search.html here:

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

Since the SearchController has already been injected into the app by your routes, the second time it's instantiated in the view, it throws the Unknown Provider error.

If you remove ng-controller="SearchController" from search.html it should fix the issue that you're having.

Hope that helps!

Upvotes: 1

Related Questions