0
Ich versuche, einen benutzerdefinierten Dienst in AngularJS zu erstellen. Es wirft einen Fehler auf, den ich nicht verstehen kann, seit ich neu bei AngularJS bin.
Ich sah eine ähnliche Frage in StackOverflow, aber die Lösung zu diesem Problem löst nicht mein Problem (solution).
Dies ist die Konsole Fehler bei der Ausführung des Programms:
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="[email protected]*" 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);
}());
Ich füge zupfen meines Codes: plunk
Fügen Sie den entsprechenden Code hier immer bei SO hinzu. Jetzt können Sie Snippet – Satpal