Port angular app + browserify example from http://benclinkinbeard.com/talks/2014/ng-conf/#/19 to use RequireJS

app.md

app.js

define(['angular', 'login', 'charts', 'routes'],
function(angular, login, charts, routes){
  'use strict';

  angular.module('app', [
      login.name,
      charts.name
      ...
    ])
    .config(routes)
    .constant('version', '???');
});

charts/index.js

define(['angular', 'pie', 'timeline', 'treemap', 'scatterplot', 'ChartMgrCtrl'],
function(angular, pie, timeline, treemap, scatterplot, ChartMgrCtrl){
  'use strict';

  return angular.module('app.charts', [
		pie.name,
		timeline.name,
		treemap.name,
		scatterplot.name
	])
	.controller('ChartMgrCtrl', ChartMgrCtrl);
});

charts/pie/index.js

define(['angular', 'PieChartDirective', 'PieChartController'],
function(angular,PieChartDirective, PieChartController){
  'use strict';

  return angular.module('app.charts.pieChart', [])
    .directive('pieChart', pieChartDirective)
    .controller('PieChartCtrl', pieChartController);
});

PieChartDirective.js

define([], function(){
'use strict';

  return function PieChartDirective() {
      return {
          scope: {
              chartData: '=',
              isMaximized: '='
          },
          restrict: 'A',
          controller: 'PieChartController',
          link: function (scope, element, attrs) {
              scope.el = element[0];
          }
      };
  };
});

So:

• An app is a tree of modules (i.e. App > Charts > Pie)
• Every module has an index.js with the module definition (angular.module)
• Every controller, directive and service is in a single file (without any module definition)

I wonder

• Dependency Injection and minification: I believe you can annotate functions with a comment to inject dependencies at minification. (i.e. use an array). Does this work?
• How to organize modules?
  • Would be great if you can run many independent little apps (i.e. MediaPlannerApp, InsightGraphApp)
  • Would be great if we can reuse (graphical) components (i.e. PieChart, MenuBar)
  • Would be great if we can reuse business logic (i.e. MediaPlanModel, etc) (with different UIs)

Hey! Didn't notice your comment until now..

Basically the idea is that you use pure requirejs/browserify modules to organize your code. Then at a final step, you wire them together in angular modules.

With ng-annotate, adding the ngInject comment takes care of minification

  /* @ngInject */
function FooCtrl($scope){
  //...
}

Will edit this message a bit later to continue