A Yeoman generated Angular app works fine til I add ['ngResource'] and then it hangs

5
votes

I created an AngularJS app with "yo angular", ran "grunt server --force" and got to the 'Allo, Allo' success screen.

When I added ['ngResource'] as shown below it appears to hang...or at least nothing is displayed in the browser any more.

We're tried adding $resource as a param to function..i.e. tried actually using a resource but no luck. I don't see any errors in the web console. We verified that angular-resource.js is listed in components/angular-resources.

This feels like a dumb newbie error but its got us stuck.

'use strict';
angular.module('a3App', ['ngResource'])
  .factory('myService', function () {
  var foo = 42;
  return {
    someMethod: function() {
       return foo;
    }
   };
});
3
angularjsyeoman
Are you sure you have added the angular-resources.js file in your web page (like index.html)? – cremersstijn
Yes, its there, thank you. In fact one of our experiments was to take it out (got expected error) to verify that we were correctly asking for it. – Brian Tarbox
Just another question, why are you using ngResource this way? I think it should be used with restfull services. See docs.angularjs.org/tutorial/step_11 – cremersstijn
We're on our way to code that looks very much like services.js in the page you mention...but that hung..so we backed up and tried to make smaller changes. Any idea why/where the system might be hanging on us? – Brian Tarbox
There's nothing wrong with the code that you've pasted: plnkr.co/edit/Y3tborn8BDADOPaEQXb4?p=preview – joakimbl

3 Answers

6
votes

Got the answer (or at least the understanding) from Green & Seshadri's AngularJS book.

The angular.module statement works in two modes: configuration and run. The 'ngResource' statement works fine with configuration:

angular.module('a3App', ['ngResource']).config(function ($routeProvider) {
  $routeProvider
    .when('/', {
     templateUrl: 'views/main.html',
     controller: 'MainCtrl'
   })
   .otherwise({
     redirectTo: '/'
   });
});

Works

but put that same statement in an angular.module(...).factory statement and it fails/quietly hangs (because .factory is a run rather than configuration statement):

angular.module('a3App', ['ngResource']).factory('myService', function($resource) {
...

This is explained at location 6456 of the Kindle version of the AngularJS book ("Loading and Dependencies" in Chapter 7). It makes sense after the fact (I guess all things do)..but an error message and/or updated documentation would be great.

6
votes

Brian, I experienced the same thing. My AngJS app would quietly hang whenever I included ['ngResource'] in a factory.

I fixed this problem by changing this code:

angular.module('a3App', ['ngResource']).factory('myService', function($resource) {
...

Into this:

angular.module('a3App').factory('myService', function($resource) {
...

And my application still worked fine in consuming a json rest api.

0
votes

Difference between defining a module and it's dependencies, and creating new components in the module.

angular.module('a3App', ['ngResource', 'another.dependency']).config() <-- will work with initial functions like run(), config() but will break if you use it to make a directive/controller/service/etc.

angular.module('a3App').factory('factoryName',function) <--- will work to create the component, doesn't need dependencies again, they were already declared with the module.