AngularJS can't find components when using IIFEs - angularjs

Question

The angularjs style guide recommends using IIFEs to wrap angular components. However when I try to wrap mine as per the example, I run into the problem of them being "hidden" from angularjs and it is unable to load them
page.html
<script type="text/javascript" src="my-module.js" %}"></script>
<script type="text/javascript" src="my-module-controller.js" %}"></script>
<div ng-app="my.app" ng-controller="MyAppController">
{{ somevar }}
</div>
my-app.js
(function() {
'use strict';
angular
.module('my.app', []);
});
my-app-controller.js
(function() {
'use strict';
angular
.module('my.app')
.controller('MyAppController', MyAppController);
function MyAppController() {
....
}
});
This results in the error:
Uncaught Error: [$injector:modulerr] Failed to instantiate module my.app due to:
Error: [$injector:nomod] Module 'my.app' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument.
If I remove the IIFE on the module declaration so I'm left with the following:
'use strict';
angular
.module('my.app', []);
It works, to the extent that the next error is:
Error: [ng:areq] Argument 'MyAppController' is not a function, got undefined
If I remove the IIEF from the controller definition, everything works as expected.
This is obviously a stripped down example, in the real project I am serving this page from a Django server, though I can't tell if that's relevant or not.

Answer 1

Those are not IIFE's. You are not invoking the function. End with }()); or })();
(function() {
'use strict';
angular
.module('my.app')
.controller('MyAppController', MyAppController);
function MyAppController() {
....
}
})();