amatiasq/index.html

## index.html
<!doctype html>
<html>
  <head>
    <title>My Angular App</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.2.0/require.js" data-main="index"></script>
  </head>
  <body>
    <div ng-controller="MainController">
      <my-directive></my-directive>
    </div>
  </body>
</html>

## index.js
requirejs.config({ ... })
requirejs([ 'src/main' ], function() {
  angular.bootstrap(document, [ 'myAppModule' ])
})

## src_main.js
define(function(require) {
  'use strict';
  require('./my-directive')
  var module = require('./my-module');

  module.controller('MainController', function($scope) {
    ...
  })
});

## src_my-directive.js
define(function(require) {
  'use strict';
  var module = require('./my-module');

  module.directive('myDirective', function {
    return { ... };
  })
});

## src_my-module.js
define(function(require) {
  return angular.module('myAppModule', [])
});
	<!doctype html>
	<html>
	<head>
	<title>My Angular App</title>
	<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.2.0/require.js" data-main="index"></script>
	</head>
	<body>
	<div ng-controller="MainController">
	<my-directive></my-directive>
	</div>
	</body>
	</html>
	requirejs.config({ ... })
	requirejs([ 'src/main' ], function() {
	angular.bootstrap(document, [ 'myAppModule' ])
	})
	define(function(require) {
	'use strict';
	require('./my-directive')
	var module = require('./my-module');

	module.controller('MainController', function($scope) {
	...
	})
	});
	define(function(require) {
	return angular.module('myAppModule', [])
	});