title: Namespacing modules
body: <p>I am a little confused on module declarations and dependency injection.</p>
  
  <p>I understand the <a href="http://jsfiddle.net/Ne5P8/18/" rel="nofollow">simpler</a> example, but I'm looking at a more "namespaced" approach for reusability.</p>
  
  <p>I keep getting the error <code>Unknown provider: aServiceProvider &lt;- aService</code> when using <a href="http://jsfiddle.net/Ne5P8/22/" rel="nofollow">this</a> code, even though it renders.</p>
  
  <pre><code>angular.module('myApp', ['testFactories', 'testServices']);
  
  angular.module('testFactories', []);
  
  angular.module('testFactories')
  .factory('aFactory', function(){
    return {
      sayHello: function(text){
        return "Factory says \"Hello " + text + "\"";
      },
      sayGoodbye: function(text){
        return "Factory says \"Goodbye " + text + "\"";
      }  
    }               
  });
  
  angular.module('testServices', []);
  
  angular.module('testServices')
  .service('aService', function(){
    this.sayHello = function(text){
      return "Service says \"Hello " + text + "\"";
    };        
    this.sayGoodbye = function(text){
      return "Service says \"Goodbye " + text + "\"";
    };   
  });
  
  function HelloCtrl($scope, aService, aFactory) {
    $scope.fromService = aService.sayHello("World");
    $scope.fromFactory = aFactory.sayHello("World");
  }
  
  function GoodbyeCtrl($scope, aService, aFactory) {
    $scope.fromService = aService.sayGoodbye("World");
    $scope.fromFactory = aFactory.sayGoodbye("World");
  }
  
  angular.element(document).ready(function() {
    angular.bootstrap(document);
  });
  </code></pre>
  
  <p>What's the issue?</p>