Angular application layout

Most of this I've got from John Papa's Pluralsight course on Breeze and Angular, some is my own, I wanted to write it as a step-by-step otherwise I forget it:

1. Install all the libraries using Bower

   Bower is a package manager for the web, using this makes it easier to manage dependencies and general stuff around packages such as updates. I install all the libraries I can find in Bower such as Angular (and it's sub libraries such as cookies and resources), jQuery, moment etc...

   I have a .bowerrc file that specifies the directory I put the packages into, mine go into public/bower

2. Create an 'app' directory. This will contain all my application code and will be split into a set of subdirectories
   • The root contains the startup code, routing configuration, common configuration (such as events and the actual app loading code) and error handling code
   • common: contains shared code, such as logging
   • layout: contains the layout files used across the site (sidebars, navigation etc.)
   • [others]: one subdirectory per location, 'home', 'admin' etc
   • services: contains all the application's 'services' including the directives the application uses
3. Each 'location' contains the HTML, controller and service needed for that functionality. This means that the 'authentication' section will have the layout (but not the directives), controller and service that authentication needs to work. This provides, at least, a location aware form of packaging. Should the controller and service be loaded into their own module, I'm not sure yet. On the one hand that seems like overkill, but on the other hand it may mean better isolation when testing
4. Load all code as IIFEs. Each component is then self loading, it does all the steps necessary to set itself up within angular (such as registration). The code looks something like this:

   (function () {
       'use strict';
       var controllerId = "IndexController";
   
       angular.module('app').controller(controllerId, ["$scope", "common", 'someService', IndexController]);
   
       function IndexController($scope, common, someService) {
           var vm = this;
   
           activate();
   
           function activate() {
               common.activateController([], controllerId)
                   .then(function () {
                       log('Activated Main Page');
                   });
           }
   
       }
   }());
   

   plus all the other code the controller needs of course. Again this feels like a reasonable approach, there is a 'standard' activate method (that calls a common activateController method) that can be used to wire up events and/or data after the controller and its services have been fully loaded.

Modularisation is one of the things I'm still unsure about. It feels that putting everything into the 'app' module is wrong, it also feels wrong to put each functional area into its own module; maybe have the an 'app' module, a 'controllers' module and a 'services' module, still to be decided I think.