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

Question

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.

Answer 1

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