Error: [$injector:unpr] Unknown provider: $scopeProvider <- $scope <- Pages

Question

I've been working on including pagination with angular and have run into this error Error: [$injector:unpr] Unknown provider: $scopeProvider <- $scope <- Pages . When I remove $scope from the Pages factory I get an error '$scope not define' but when I add $scope I receive an error 'Error: [$injector:unpr] Unknown provider: $scopeProvider <- $scope <- Pages'. I figure I'd post here for a solution because I am totally stuck.

Is it possible to reference the $http call to my API done in Controllers.js within Pages.js?

Pages.js

angular.module('pages', []);

defaultPage.factory('Pages', function ($http, $scope) {
    return {
        getPage: function (pageNum) {
            $http.get('https://api.github.com/repos/npm/npm/issues', {
                headers: {
                    'Content-type': 'application/json'
                }
            }).success(function (data) {
                $scope.ctrl.info + pageNum;
            });
        }
    }
});

Controllers.js

/defaultPage = angular.module('DefaultPage', ['ngAnimate', 'ui.bootstrap']);/

// declaring my DefaultController for default page and dependencies

defaultPage.controller('DefaultController', ['$scope', '$http', 'Pages', function ($scope, $http, Pages) { $scope.data = {};

var url = 'https://api.github.com/repos/npm/npm/issues';

$http.get(url, {
    headers: {
        'Content-type': 'application/json'
    }
}).success(function (data) {
    $scope.ctrl.info = data;

    $scope.currentPage = 0;
    $scope.pageSize = 10;

    $scope.numberOfPages = function () {
        return 25;
    };

    $scope.data = Pages.getPage($scope.currentPage);
    $scope.getPage = function (pageNum) {
        $scope.data = Pages.getPage(pageNum);
    }

});

}]); //defaultPage ctrl end

// declaring my IssuesController for my issues page and params

defaultPage.controller('IssuesController', ['$scope', '$http', '$routeParams', function ($scope, $http, $routeParams) { $http.get('https://api.github.com/repos/npm/npm/issues') .success(function (data) { $scope.ctrl = data; $scope.whichIssue = $routeParams.issueId;

        //Issue page previous issue button 
        if ($routeParams.issueId > 0) {
            $scope.prevIssue = Number($routeParams.issueId) - 1;
        } else {
            $scope.prevIssue = $scope.ctrl.length - 1;
        }

        //Issue page next issue button
        if ($routeParams.issueId < $scope.ctrl.length - 1) {
            $scope.nextIssue = Number($routeParams.issueId) + 1;
        } else {
            $scope.nextIssue = 0;
        }
    });

}]); // end

apps.js

var defaultPage = angular.module('GithubIssues', [
     'ngRoute',
     /*'DefaultPage',*/
     'pages'

 ]);

 defaultPage.config(['$routeProvider', function ($routeProvider) {
     $routeProvider.
     when('/default', {
         templateUrl: 'partials/default.html',
         controller: 'DefaultController'
     }).
     when('/issues/:issueId', {
         templateUrl: 'partials/issues.html',
         controller: 'IssuesController'
     }).
     otherwise({
         redirectTo: '/default'
     });
}]);

filters.js

// filter for pages pagination
defaultPage.filter('startFrom', function () {
    return function (input, start) {
        start = +start;
        return input.slice(start);
    }
});

charlietfl charlietfl · Accepted Answer · 2016-02-01T01:42:36

$scope is not available in factory or service, only in controllers

Also $scope.ctrl.info + pageNum; is an invalid statement even if it was.

Return the request promise that $http returns and update the scope in the controller itself within a then() callback

getPage: function (pageNum) {
        return    $http(.....

Error: [$injector:unpr] Unknown provider: $scopeProvider <- $scope <- Pages

1 Answers