Bestin John Bestin John - 1 month ago 32
AngularJS Question

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

I am trying to build a custom service in AnjularJS. 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

Answer

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!

Comments