How my angular module is using service which i haven't defined as dependency?

Question

I have defined my angular modules as below:

var myApp = angular.module('myApp', [
    'ngRoute',
    'facebook',
    'myApp.services',
    'myApp.directives',
    'myApp.controllers'
]);

angular.module('myApp.services', []);
angular.module('myApp.directives', []);
angular.module('myApp.controllers', []);

Now, the config for my main app module i.e. "myApp" is as below:

myApp.config([
    '$routeProvider',
    'FacebookProvider',
    function ($routeProvider, FacebookProvider) {

        FacebookProvider.init('***********');
}]);

This moudle i.e. "myApp" will be able to use "FacebookProvider", because it is defined as dependency above for "myApp" moudle, which is perfectly fine.

Now lets move to Controller which is wrapped under module "myApp.controllers":

/* Controllers */
angular.module('myApp.controllers').controller('loginCtrl', [
    '$scope',
    '$timeout',
    'Facebook',
    function ($scope, $timeout, Facebook) {
         .......
         .......
}]);

Primary Question: How i am bale to use "Facebook" when i haven't defined this as dependency for my "myApp.controllers" module?

Secondary Question: Which is the best approach for writing controllers, services, directives etc. I mean to say to wrap them in different modules or to wrap them in main primary single app module. If we are creating different modules for each feature of our application, then how the dependency system work for our feature modules as we define dependency only in our main module like "myApp"?

Thanks in advance for the replies!!!

Thanks, Manish Kumar [Learning Angular]

Answer 1

Ad 1st question: You defined both 'myApp.controllers' and 'facebook' as dependencies in your 'myApp' module. You can use any module of that list in any other of your modules. You could even have a 'myApp.core' module, which would then define the core dependencies of your application and you could still use all of them in every other module listed in the main app's list of modules.

Ad 2nd question: For a small app, you dont need to use many modules. Just modularize reusable stuff maybe. For larger apps it is a good idea to separate parts of app by functionality to modules. Dont separate by type like myApp.controllers etc. For example, you can have a reusable module for authentication, that you then put in all your future apps. Or for logging, etc. Or for your admin area.

A good reference point for best practices is John Pappa's style guide.

https://github.com/johnpapa/angularjs-styleguide#application-structure