错误:$ injector:unpr未知提供程序,同时在角度js中调用控制器中的服务

时间:2017-05-29 12:21:27

标签: angularjs restangular

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

  

错误:$ injector:unpr
  未知的提供者
  未知提供者:getAuthorProvider< - getAuthor< - PostController

这是我正在做的事情:

app.js

itemCategory

controller.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('/');
}]);

service.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');
            });
        }]);

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

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);
        });
    }
}]);

因为这个函数应该使用authorId并返回他的名字。我不知道我在哪里弄错了,现在我不知道如何完美地设置它。

2 个答案:

答案 0 :(得分:1)

在任何其他模块中都没有注入模块app.factories

尝试:

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

也似乎没有Restangular模块被注入任何地方

答案 1 :(得分:1)

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

报告的依赖项包含在内

另外,你错过了工厂内的退货声明,你只是声明了这个功能,这可能与错误有关。

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>