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.

Anthony Chu · Accepted Answer · 2014-02-14 01:53:41Z

9

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

answered Feb 14, 2014 at 1:53

Anthony Chu

37.6k10 gold badges85 silver badges72 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Clement Poh Over a year ago

Thanks for that! that was it, by the way, why would that prevent it from working? Is it shadowing Archive or something?

Anthony Chu Over a year ago

Angular looks at the parameter names to determine what dependencies to inject. This works great... until the script is run through a minifier and the parameter names get all mangled. So they allow dependencies to be declared in an array like above. When this happens, it ignores the parameter names and goes strictly by the string names in the array. The downside is that it's easy to get out of sync, as you sort of found out here. :)

Collectives™ on Stack Overflow

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

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related