title: AngularJS multiple factory?
body: <p>I'm having trouble understanding the difference between controllers and factories in Angular. </p>
  
  <p>My main application looks like this:</p>
  
  <pre><code>     angular.module('myApp', [
              'ui.router',
              'ngAnimate',
              'myApp.angular-loading-bar',
              'myApp.translate',
              'myApp.repository',
              'myApp.services',
              'myApp.directives',
              'myApp.controllers',
              'myApp.filters',
              'myApp.version'
       ]);
  </code></pre>
  
  <p>I include all controllers in controllers.js file:</p>
  
  <pre><code>    angular.module('myApp.controllers', [
             'myApp.mainController',
             'myApp.headerController',
             'myApp.rootController'
       ]);
  </code></pre>
  
  <p>For example my controller file is</p>
  
  <pre><code>    var root = angular.module('myApp.rootController', []);
  
      root.controller('rootController', [
           '$scope',
           '$log',
            function($scope, $log) {
  
              function init() {
                $log.debug('[rootController] Init...');
              }
  
              init();
             }
      ]);
  </code></pre>
  
  <p>Everything work like a charm. When I extend application about new angular module 'myApp.repository'</p>
  
  <pre><code>    angular.module('myApp.repository', [
           'myApp.newsRepository'
      ]);
  </code></pre>
  
  <p>newsRepository.js:</p>
  
  <pre><code>   var newsRepository = angular.module('myApp.newsRepository', []);
  
      newsRepository.factory('newsRepository', [
                     $log',
                    '$http',
                    '$q',
                     function($log, $http, $q) {
  
                        var service = {
                            check: function() {
  
                                 var deferred = $q.defer();
  
                                 var request = $http({
                                           method: 'GET',
                                           url: 'news'
                                  });
  
                                 return deferred;
                            }
                     };
  
                 return service;
               }
     ]);
  </code></pre>
  
  <p>I get:</p>
  
  <pre><code> Error: [$injector:unpr] Unknown provider: newsRepositoryProvider &lt;- newsRepository &lt;- headerController
  </code></pre>
  
  <p>But if I body of NewRepository.js past in repository.js everything back to normal.</p>
  
  <p>Ok,this is not result but some part of... browser resources explorer in index.html i see all js file but some file are not available ? hm... gulp/misspellings ?</p>
  
  <p>Complex result :)</p>
  
  <p>1) Is use relative path to file like this... 
            
  where abasolute path is app.js from now all js file are correctly loaded.</p>