query() with Angular $resources, "Undefined is not a function"

angularjs, javascript

Solution

Your parameters don't line up with the dependencies that are declared. It's injecting `$http` into `Archive`...

archiveModule.controller('ArchiveControl', ['$scope', '$http', 'Archive',
    function ($scope, Archive) {

Remove `'$http'` and it should work...

archiveModule.controller('ArchiveControl', ['$scope', 'Archive',
    function ($scope, Archive) {
        $scope.items = Archive.query();
        $scope.orderProp = 'name';
    }]);

Problem

So I am experimenting with Angular. I created the following module. ``` var archiveModule = angular.module('archiveModule', ['ngResource']); archiveModule.factory('Archive', ['$resource', function($resource) { return $resource('/data/archive/:doc.json', {}, { query: { method:'GET', params:{ doc: undefined }, isArray:true } }); }]); archiveModule.controller('ArchiveControl', ['$scope', '$http', 'Archive', function ($scope, Archive) { $scope.items = Archive.query(); $scope.orderProp = 'name'; }]); ``` My template everything happens within: ``` <div class="container" ng-app="archiveModule"> <div ng-controller="ArchiveControl"> ``` I include the angular scripts at the bottom of my page: ``` <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.12/angular.js"></script> <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.12/angular-resource.js"></script> <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.12/angular-route.js"></script> ``` And Chrome reports `TypeError: undefined is not a function`, and it goes back to the line `$scope.items = Archive.query();`. According to http://docs.angularjs.org/api/ngResource.$resource, query is part of $resource and I modeled my resource off http://docs.angularjs.org/tutorial/step_11 I'm not sure what's going wrong here.

Original source