Error: $injector:unpr Unknown Provider, while calling service in controller in angular js

Question

我正在尝试在我的控制器中使用服务，它正在提供

Error: $injector:unpr
Unknown Provider
Unknown provider: getAuthorProvider <- getAuthor <- PostController

这是我正在做的事情：

app.js

angular.module('app',[
    'ui.router',
    'app.controllers'
    ])
.config(['$stateProvider','$urlRouterProvider','$locationProvider',function($stateProvider,$urlRouterProvider,$locationProvider) {

    $stateProvider.state('homePage',{
        url: '/',
        views: {
            'mainView': {
                templateUrl: 'views/home.html',
                controller: 'PostController'
            }
        },      
    });
    $locationProvider.html5Mode(true);
    $urlRouterProvider.otherwise('/');
}]);

controller.js

angular.module('app.controllers',[
            'app.directives'
        ]).controller('PostController', ['$scope', '$http','getAuthor' , function($scope,$http,getAuthor) {
            $http({
                method: 'GET',
                url: '/api/blog'
            }).then(function (response){
                $scope.currentPage=1;
                $scope.pageSize=10;
                //console.log(response);
                $scope.posts = response.data;
                console.log($scope.posts);
                $scope.pageinput = $scope.currentPage;
                $scope.authorName = function(authorId) {
                    getAuthor.getAuthorNameById(authorId,function(response){
                        console.log(response.data);
                        //return response.data;
                    }, function(response){
                        alert('Some errors occurred while communicating with the service. Try again later.');
                    });
                };
                $scope.numberOfPages = function() {
                    return Math.ceil($scope.posts.length / $scope.pageSize);
                };
                $scope.setCurrentPage = function(newValue) {
                    $scope.currentPage = newValue;
                    $scope.pageinput = newValue;
                    $scope.$apply();
                };
                $scope.submitFunc = function() {
                    var temp = $scope.currentPage;
                    if($scope.pageinput >=0 && $scope.pageinput <= $scope.numberOfPages()) {
                        $scope.currentPage = $scope.pageinput;
                        $scope.CurrentPage = $scope.currentPage;
                        setTimeout(window.scrollTo(0,150),2000);
                    }else {

                    }
                }
            },function(error){
                console.log('failed');
            });
        }]);

service.js

angular.module('app.factories',[
    'LocalStorageModule'
    ]).factory('getAuthor',['Restangular',function(Restangular) {
    function getAuthorNameById(authorId,onSuccess,onError) {
        Restangular.one('api/author/name',authorId).get().then(function(response){
            onSuccess(response);
        }, function(response) {
            onError(response);
        });
    }
}]);

我在 HTML 文件中将函数 authorName() 调用为：

{{authorName(2)}}

因为这个函数应该使用 authorId 和 return 他的名字。我不确定我在哪里弄错了，现在我不知道如何完美地设置它。

Answer 1

模块 app.factories 似乎没有注入任何其他模块。

尝试：

angular.module('app',[
    'ui.router',
    'app.controllers',
    'app.factories'
    ])

也没有出现 Restangular 模块被注入到任何地方

Answer 2

您似乎没有将 app.factories 作为 @charlietfl

报告的依赖项

此外，您在工厂中缺少 return 语句，您只是在声明函数，这可能与错误有关。

angular.module('app.factories',[
    'LocalStorageModule'
    ]).factory('getAuthor',['Restangular',function(Restangular) {
    function getAuthorNameById(authorId,onSuccess,onError) {
      Restangular.one('api/author/name',authorId).get().then(function(response){
            onSuccess(response);
        }, function(response) {
            onError(response);
        });
    }

    return {
     getAuthorNameById: getAuthorNameById
    }
}]);

并将 authorName() 的调用移动到您的控制器中。当您插入一个函数调用时（就像您在模板中所做的那样，使用此语法 {{authorName(2)}}），该函数将在每个摘要循环中被调用。

为了在评论中回答你的问题，我会遵循这种方法。

.directive('handleItem', function(getAuthor){
  return {
   restrict: 'E',
   scope: {
    item: '='
   }
   link: function(scope, elem, attrs){
     //make the call here 
     getAuthor
     .getAuthorNameById($scope.item.authorId,function(response){
        console.log(response.data);
        //return response.data;
     }, function(response){
        alert('Some errors occurred while communicating with the service. 
         Try again later.');
     });
   }
  }
})

在模板中是这样的：

<div ng-repeat="item in items"> <!--loop over your items-->
  <handle-item item="item"></handle-item>
</div>

Error: $injector:unpr Unknown Provider, while calling service in controller in angular js

Error: $injector:unpr Unknown Provider, while calling service in controller in angular js

angularjs

restangular