Angular Resource causes view to disappear

Question

I am beginning to work on an AngularJS app, with a single route, /login. Here is the code for the Controller that handles that route.

angular = require('angular');
// require('../resources/loginResource');


var di = ['$scope'];

var controller = function LoginCtrl($scope) {
  $scope.myArray = [
    "foo",
    "bar",
    "baz"
  ];
};

angular.module('myApp', [])
  .controller('LoginCtrl', di.concat(controller) );

When the second line in the file, the reference to loginResource, is commented, the page /login appears just fine. But when I uncomment it, the page renders blank. No console errors, nothing in my terminal output.

Here is the loginResource file:

angular = require('angular');
require('angular-resource');

var app = angular.module('myApp', ['ngResource']);

var di = ['$resource'];

var myResource = function Foobar($resource) {
  return $resource('http://mockbin.org/bin/c7bb5923-18ec-4e2f-9189-df8fb80b606b');
};

app.factory('Foobar', di.concat(myResource));

I am using gulp and Browserify.

This seems to be the proper way to inject a Service that uses $service. If so, why is the page rendering blank?

Answer 1

The problem will be the repeated definition of the myApp module. In your first snippet, you have:

angular.module('myApp', [])

and in your second, you have:

var app = angular.module('myApp', ['ngResource']);

You need to use a different name for the module in the second snippet and you need to include that name in the configuration of the app module.

Change the first snippet to something like this:

angular = require('angular');
require('../resources/loginResource');
...
angular.module('myApp', ['loginResource']) ...

and change the second to something like this (it's probably a good idea to rename the app variable, too - as it's not the app module):

angular = require('angular');
require('angular-resource');

var mod = angular.module('loginResource', ['ngResource']);
...
mod.factory('Foobar', di.concat(myResource));