AngularJS multiple factory?

Question

I'm having trouble understanding the difference between controllers and factories in Angular.

My main application looks like this:

     angular.module('myApp', [
            'ui.router',
            'ngAnimate',
            'myApp.angular-loading-bar',
            'myApp.translate',
            'myApp.repository',
            'myApp.services',
            'myApp.directives',
            'myApp.controllers',
            'myApp.filters',
            'myApp.version'
     ]);

I include all controllers in controllers.js file:

    angular.module('myApp.controllers', [
           'myApp.mainController',
           'myApp.headerController',
           'myApp.rootController'
     ]);

For example my controller file is

    var root = angular.module('myApp.rootController', []);

    root.controller('rootController', [
         '$scope',
         '$log',
          function($scope, $log) {

            function init() {
              $log.debug('[rootController] Init...');
            }

            init();
           }
    ]);

Everything work like a charm. When I extend application about new angular module 'myApp.repository'

    angular.module('myApp.repository', [
         'myApp.newsRepository'
    ]);

newsRepository.js:

   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;
             }
   ]);

I get:

 Error: [$injector:unpr] Unknown provider: newsRepositoryProvider <- newsRepository <- headerController

But if I body of NewRepository.js past in repository.js everything back to normal.

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 ?

Complex result :)

1) Is use relative path to file like this... where abasolute path is app.js from now all js file are correctly loaded.

Answer 1

On this line:

newsRepository.js

// wrong
var newsRepository = angular.module('myApp.repository', []);

// right
var newsRepository = angular.module('myApp.newsRepository', []);