Angular: $scope and template breaking after using a $resource

Question

I'm not building an actual application yet, but I'm trying to work out HTTP requests with Angular.

Here is my tiny (and bad) HTML template:

<div class="row-fluid" ng-controller="SearchCtrl">
    <div>zip: {{zip}}</div>
    <div>id: {{appid}}</div>
    <div>key: {{appkey}}</div>
    <div>JSON: {{jsonz}}</div>
</div>

Here's my controller for this specific page:

  controller('SearchCtrl', ['$scope','$routeParams',function($scope,$routeParams){
      $scope.appid = *;
      $scope.appkey = *;
      if($routeParams.zipcode) {
        $scope.zip = $routeParams.zipcode;
        $scope.jsonz = $resource('api/:act', {act:'search',appid:$scope.appId,appKey:$scope.appkey,zipCode:$scope.zip}).query();
      }
  }])

The module, I assume, is initialized correctly.

angular.module('myApp.controllers', ['ngResource'])

When the $resource line is left uncommented, the HTML is displayed literally, with no template replacement from Angular. Commented out, zip/id/key are replaced correctly.

I know I'm probably doing the resource thing wrong but I don't know what I even should be doing.

upd: There appears to be some undefined value in angular-resource.js and I am going to attempt to investigate / re-download angularjs.

[15:44:57.157] Error: value is undefined
ResourceFactory/extractParams/<@file:///C:/demo/app/lib/angular/angular-resource.js:344
forEach@file:///C:/demo/app/lib/angular/angular.js:137
extractParams@file:///C:/demo/app/lib/angular/angular-resource.js:343
ResourceFactory/</Resource[name]@file:///C:/demo/app/lib/angular/angular-resource.js:398
@file:///C:/demo/app/js/controllers.js:79
invoke@file:///C:/demo/app/lib/angular/angular.js:2902
instantiate@file:///C:/demo/app/lib/angular/angular.js:2914
@file:///C:/demo/app/lib/angular/angular.js:4805
update@file:///C:/demo/app/lib/angular/angular.js:14198
Scope.prototype.$broadcast@file:///C:/demo/app/lib/angular/angular.js:8307
updateRoute/<@file:///C:/demo/app/lib/angular/angular.js:7463
qFactory/defer/deferred.promise.then/wrappedCallback@file:///C:/demo/app/lib/angular/angular.js:6846
qFactory/defer/deferred.promise.then/wrappedCallback@file:///C:/demo/app/lib/angular/angular.js:6846
qFactory/ref/<.then/<@file:///C:/demo/app/lib/angular/angular.js:6883
Scope.prototype.$eval@file:///C:/demo/app/lib/angular/angular.js:8057
Scope.prototype.$digest@file:///C:/demo/app/lib/angular/angular.js:7922
Scope.prototype.$apply@file:///C:/demo/app/lib/angular/angular.js:8143
done@file:///C:/demo/app/lib/angular/angular.js:9170
completeRequest@file:///C:/demo/app/lib/angular/angular.js:9333
createHttpBackend/</xhr.onreadystatechange@file:///C:/demo/app/lib/angular/angular.js:9304

Answer 1

You have to inject the $resource in your controller:

controller('SearchCtrl', ['$scope', '$routeParams', '$resource', 
function($scope, $routeParams, $resource){ ...