CODEWITHSUNDEEP
javascripthtmlcssangularjs
Bestin John
Bestin John

Reputation: 1803

AngularJS Error: [$injector:unpr] Unknown provider: $achorScrollProvider <- $achorScroll <- MainController

I am trying to build a custom service in AngularJS. It is throwing some error which I am not able to understand since I am new to AngularJS.

I saw a similar question in StackOverflow but the solution to that is not solving my problem(solution).

This is the console error during execution of the program:

angular.js:13920 Error: [$injector:unpr] Unknown provider: $achorScrollProvider <- $achorScroll <- MainController
http://errors.angularjs.org/1.5.8/$injector/unpr?p0=%24achorScrollProvider%20%3C-%20%24achorScroll%20%3C-%20MainController
    at angular.js:68
    at angular.js:4511
    at Object.getService [as get] (angular.js:4664)
    at angular.js:4516
    at getService (angular.js:4664)
    at injectionArgs (angular.js:4688)
    at Object.invoke (angular.js:4710)
    at $controllerInit (angular.js:10354)
    at nodeLinkFn (angular.js:9263)
    at compositeLinkFn (angular.js:8620)

HTML code:

<!DOCTYPE html>
<html ng-app="githubViewer">

  <head>
    <script data-require="angular.js@*" data-semver="1.5.8" src="https://code.angularjs.org/1.5.8/angular.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
    <script src="github.js"></script>
  </head>

  <body ng-controller="MainController">
    <h1>{{message}}</h1>

    <div>
    {{error}}
    </div>
    {{countdown}}
    <form name="searchUser" ng-submit="search(username)">
      <input type="seach" placeholder="User to find" ng-model="username" required>
      <input type="submit" placeholder="Search" >
    </form>

    <div ng-include="'userDetails.html'" ng-show="user">
    </div>

  </body>

</html>

Javascript(script.js):

// Code goes here
(function() {

  var app = angular.module("githubViewer", []);


  var MainController = function($scope, $github, $interval, $log, $anchorScroll, $location) {

    var onRepo = function(data) {
      $scope.repos = data;
      $location.hash("userDetails");
      $anchorScroll();
    };

    /*   var onUserComplete = function(response) {
        $scope.user = response.data;
        $http.get($scope.user.repos_url)
       .then(onRepos,onError)
  };*/

    var onUserComplete = function(data) {
      $scope.user = data;
      $github.getRepos($scope.user).then(onRepo, onError);
    };


    var onError = function(reason) {
      $scope.error = "Error fetching data";
    };


    $scope.search = function(username) {
      $log.info("search for " + username);
      $github.getUser(username).then(onUserComplete, onError);
      if (countDownInterval) {
        $interval.cancel(countDownInterval);
        $scope.countdown = null;
      }

    };

    var decrementCountdown = function() {
      $scope.countdown--;
      if ($scope.countdown === 0) {
        $scope.search($scope.username);
      }
    };

    var countDownInterval = null;

    function startCountDown() {
      countDownInterval = $interval(decrementCountdown, 1000, $scope.countdown);
    }

    $scope.username = "angular";
    $scope.message = "GitHub Viewer";
    $scope.repoSortOrder = "-stargazers_count";
    $scope.countdown = 5;
    startCountDown();
  };

  //written like this incase of minification
  //app.controller("MainController",["$scope","$http","$interval",MainController]);

  //normal method
  app.controller("MainController", MainController);

  MainController.$inject = ['$scope', 'github', '$interval', '$log', '$achorScroll', '$location'];

}());

javascript(github.js):

(function(){

 var github=function($http){

   var getUser=function(username){

    return $http.get("https://api.github.com/users/"+username).then(function(response){
            return response.data;
          }); 


   };

   var getRepos=function(user){

      return $http.get(user.repos_url).then(function(response){
                    return response.data;
                  });


   };

   return{
          getUser:getUser,
          getRepos:getRepos

   };
 };


var module=angular.module("githubViewer");
module.factory("github",github);

 //angular.module("githubViewer").factory("github",github);


}());

I am attaching plunk of my code:plunk

Upvotes: 0

Views: 635

Answers (1)

David R
David R

Reputation: 15639

You have missed an n in your $anchorScroll. (It was mentioned as $achorScroll in your code.)

After correcting it, the code seems to be running fine.

Here is the updated/working plunker URL : https://plnkr.co/edit/5JOGtDlhoRBFjIjwJjaV?p=preview

Hope this helps!

Upvotes: 4

Related Questions