Adding a new .factory crashes the angular app

This might be a real newbie question but i’ve set up a sample app using the tabs template.

I’m trying to add a new .factory in the services.js file but everytime i add anything to that file it crashes the app with the following error but i can’t understand what i’m missing as the .factory that is already there works fine

"Uncaught Error: [$injector:modulerr] Failed to instantiate module starter due to:
Error: [$injector:modulerr] Failed to instantiate module starter.services due to:
Error: [$injector:nomod] Module 'starter.services' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument."

Contents of my services.js file is below:

angular.module('starter.services', [])

.factory('dataShare',function($rootScope,$timeout){
  var service = {};
  service.data = false;
  service.sendData = function(data){
      this.data = data;
      $timeout(function(){
         $rootScope.$broadcast('data_shared');
      },100);
  };
  service.getData = function(){
    return this.data;
  };
  return service;
});

.factory('Chats', function() {
  // Might use a resource here that returns a JSON array

  // Some fake testing data
  var chats = [{
    id: 0,
    name: 'Ben Sparrow',
    lastText: 'You on your way?',
    face: 'https://pbs.twimg.com/profile_images/514549811765211136/9SgAuHeY.png'
  }, {
    id: 1,
    name: 'Max Lynx',
    lastText: 'Hey, it\'s me',
    face: 'https://avatars3.githubusercontent.com/u/11214?v=3&s=460'
  }, {
    id: 2,
    name: 'Adam Bradleyson',
    lastText: 'I should buy a boat',
    face: 'https://pbs.twimg.com/profile_images/479090794058379264/84TKj_qa.jpeg'
  }, {
    id: 3,
    name: 'Perry Governor',
    lastText: 'Look at my mukluks!',
    face: 'https://pbs.twimg.com/profile_images/598205061232103424/3j5HUXMY.png'
  }, {
    id: 4,
    name: 'Mike Harrington',
    lastText: 'This is wicked good ice cream.',
    face: 'https://pbs.twimg.com/profile_images/578237281384841216/R3ae1n61.png'
  }];

  return {
    all: function() {
      return chats;
    },
    remove: function(chat) {
      chats.splice(chats.indexOf(chat), 1);
    },
    get: function(chatId) {
      for (var i = 0; i < chats.length; i++) {
        if (chats[i].id === parseInt(chatId)) {
          return chats[i];
        }
      }
      return null;
    }
  };
});

So you’re chaining each factory to the module like this:

angular.module('starter.services', [])

    .factory('dataShare',function($rootScope,$timeout){
        //
    });

    .factory('Chats', function() {
        //
    });

Notice that the first factory has a semicolon after it. This semicolon ends the chain so the second factory can’t chain to the module. If you wanted to do it this way you could assign the module to a variable:

var app = angular.module('starter.services', []);

app.factory('dataShare',function($rootScope,$timeout){
    //
});

app.factory('Chats', function() {
    //
});

Then you are able to attach each one to the module and use a semicolon on each. There is a great post here that explains the different ways well: http://toddmotto.com/minimal-angular-module-syntax-approach-using-an-iife/

1 Like