Sample modularization in Angular applications.

app.js

/**
 * ------------------------------------------------------------------------
 * Main Application Module (app.js)
 * ------------------------------------------------------------------------
 * This script is responsible for instantiating the main application
 * angular module and grabbing everything together.
 */

angular.module('MyApp', [
    // Contributed modules.
    'ui-router',
    'ngAnimate',

    // Custom modules.
    'beer'
  ])

  // Some globally available settings.
  .constant('AppSettings', {
    name: 'MyApp',
    description: 'A very clever application, I suppose',
    version: '1.4'
  })

  // Some global configurations. Usually configure some database.
  .config(function () {})

  // Some global after-bootstrap code.
  .run(function () {

  });

beer|controllers|beer.js

/**
 * ------------------------------------------------------------------------
 * Beer Controller (beer/controller/beer.js)
 * ------------------------------------------------------------------------
 */

angular.module('beer')
  .controller('BeerController', function ($scope, Beers) {
    $scope.beers = Beers.getList().$object;

    // Hey, you drunk!
    $scope.drinkBeer = function (beer) {
      beer.remove();
    };
  });

beer|module.js

/**
 * ------------------------------------------------------------------------
 * Beer Module Manifest (beer/module.js)
 * ------------------------------------------------------------------------
 * Beer module is a nice module that can make you drunk.
 */

angular.module('beer', [
  'restangular'
]);

beer|services|beer.js

/**
 * ------------------------------------------------------------------------
 * Beers REST Service (beer/services/beer.js)
 * ------------------------------------------------------------------------
 */

angular.module('beer')
  .factory('Beers', function (Restangular) {
    return Restangular.all('beer');
  });

router.js

/**
 * ------------------------------------------------------------------------
 * Main Router (router.js)
 * ------------------------------------------------------------------------
 * This should probably only be used to define global interest routes.
 * Other routes would then be configured by the child modules as needed.
 */

angular.module('MyApp')

  .config(function ($stateProvider, $urlRouterProvider) {

    // Redirect to home if URL not found.
    $urlRouterProvider.otherwise('/');

    // Configure my global routes.
    $stateProvider

      .state('home', {
        url: '/',
        templateUrl: 'app/partials/home.html'
      })

      .state('contact', {
        url: '/contact',
        templateUrl: 'app/partials/contact.html'
        controller: 'ContactFormController'
      });
  });