I'm trying to build my own service by following the example in the documentation for the factory methodology. I think I've done something wrong however because I continue to get the unknown provider error
index.html
<!DOCTYPE html>
<html ng-app="githubViewer">
<head>
<script data-require="angular.js@1.4.3" data-semver="1.4.2" src="https://code.angularjs.org/1.4.2/angular.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
<script src="github.js"></script>
</head>
<body ng-controller="MainController">
<div>
<h1>{{message}}</h1>
</div>
<div>
{{ error }}
</div>
{{ countdown }}
<form name="searchUser" ng-submit="search(username)">
<input type="search" required placeholder="Username to find" ng-model="username">
<input type="submit" value = "search" >
</form>
<div ng-include="userdetails" ng-show = "user"></div>
</body>
</html>
script.js
(function() {
angular
.module("githubViewer", [])
.controller("MainController",MainController);
// .controller("MainController",
// ["$scope", "github","$interval","$log","$anchorScroll","$location", MainController]);
MainController.$inject = ["$scope", "$http","$interval","github"];
function MainController($scope,github,$interval,$log,$achorScroll,$location) {
// var onUserComplete = function(response) {
// $scope.user = response.data;
// $http.get($scope.user.repos_url)
// .then(onRepos,onError)
// };
var onUserComplete = function(data) {
$scope.user = data;
gethub.getRepos($scope.user).then(onRepos,onError)
};
var onRepos = function(data){
$scope.repos = data;
$location.hash("userDetails");
$anchorScroll();
};
var onError = function(reason) {
$scope.error = "could not display data" ;
};
$scope.search = function(username) {
$log.info("searching for "+ username);
github.getUser(username).then(onUserComplete, onError);
if(countdownInterval){
$interval.cancel(countdownInterval)
$scope.countdown = null;
}
};
var decrementCountdown = function(){
$scope.countdown -= 1;
if($scope.countdown < 1){
$scope.search($scope.username)
}
};
var countdownInterval = null;
var startCountdown = function(){
countdownInterval = $interval(decrementCountdown,1000,$scope.countdown);
};
$scope.username = "Angular";
$scope.message = "GitHub Viewer!";
$scope.repoSortOrder ="-stargazers_count";
$scope.userdetails ="userdetails.html";
$scope.countdown = 5;
startCountdown();
};
})();
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);
}());
console error :
Error: [$injector:unpr] Unknown provider: githubProvider <- github <- MainController
http://errors.angularjs.org/1.4.2/$injector/unpr?p0=githubProvider%20%3C-%20github%20%3C-%20MainController
at REGEX_STRING_REGEXP (angular.js:68)
at angular.js:4264
at Object.getService [as get] (angular.js:4411)
at angular.js:4269
at getService (angular.js:4411)
at Object.invoke (angular.js:4443)
at ident.$get.extend.instance (angular.js:9001)
at nodeLinkFn (angular.js:8111)
at compositeLinkFn (angular.js:7543)
at compositeLinkFn (angular.js:7547)
Please point me to the right direction.
You have mismatch in the dependency array, make sure all the dependency has injected correctly before using them.
Additionaly you need to replace
;
by:
in yourgithub
factory