Grails Asset Pipeline not giving proper Javascript order - angularjs

Question

I'm creating an Angular app on Grails 3.1.5 and asset pipeline is not giving me the Javascript file ordering I need. I have the following Javascript files:
angello.js
//= require /angular/angular
//= require /angular-route/angular-route
//= require /angello/core/angello.core
//= require /angello/index/angello.index
//= require /angello/common/angello.common
//= require /angello/storyboard/angello.storyboard
var myModule = angular.module("Angello", [
"angello.core",
"angello.index",
'ngRoute',
'Angello.Common',
'Angello.Storyboard'
]);
myModule.config(function($routeProvider) {
$routeProvider
.when('/', {
templateUrl: 'assets/angello/storyboard/tmpl/storyboard.html',
controller: 'StoryboardCtrl',
controllerAs: 'storyboard'
})
});
myModule.controller('MainCtrl', function() { });
angello.storyboard.js
//= require_tree services
//= require_tree controllers
//= require_tree directives
//= require_tree templates
//= require_self
angular.module('Angello.Storyboard', ['Angello.Common']);
storyboardController.js
//= require /angular/angular
//= require /angello/storyboard/angello.storyboard
//= require_self
angular.module('Angello.Storyboard')
.controller('StoryboardCtrl', function() {
var storyboard = this;
});
I include all of this in my main GSP with
<asset:javascript src="angello.js" /> When the HTML is rendered, the order of the JS files are not what I expect:
<script type="text/javascript" src="/assets/angular/angular.js?compile=false" ></script>
<script type="text/javascript" src="/assets/angular-route/angular-route.js?compile=false" ></script>
<script type="text/javascript" src="/assets/angular/angular-resource.js?compile=false" ></script>
<script type="text/javascript" src="/assets/angello/core/angello.core.js?compile=false" ></script>
<script type="text/javascript" src="/assets/angello/core/services/DomainServiceFactory.js?compile=false" ></script>
<script type="text/javascript" src="/assets/angello/index/angello.index.js?compile=false" ></script>
<script type="text/javascript" src="/assets/angello/index/services/applicationDataFactory.js?compile=false" ></script>
<script type="text/javascript" src="/assets/angello/index/controllers/indexController.js?compile=false" ></script>
<script type="text/javascript" src="/assets/angular/ui-bootstrap-tpls.js?compile=false" ></script>
<script type="text/javascript" src="/assets/angello/common/angello.common.js?compile=false" ></script>
<script type="text/javascript" src="/assets/angello/storyboard/controllers/storyboardController.js?compile=false" ></script>
<script type="text/javascript" src="/assets/angello/storyboard/angello.storyboard.js?compile=false" ></script>
<script type="text/javascript" src="/assets/angello.js?compile=false" ></script>
The problem is that storyboard JS files are included in the order opposite of what I need, resulting in angular complaining
Error: [$injector:nomod] Module 'Angello.Storyboard' 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.
I think this is a problem in the way I have structured the dependency directives. I have tried many different things, but nothing seems to affect the order.

Answer 1

The module which is used to create the artifacts like controller, service, etc has to be loaded first before the dependents are loaded. In the above case controllers are required before the module itself.
So, when the controller (styoryBoardController.js) is required it complains about the module not being present.
Moving //= require_self to the top in angello.storyboard.js will ensure that the module itself is required first then the dependencies.