Search code examples
javascriptangularjslatencyscript-tagangularjs-module

When pulling angularjs controllers out into different files, what if my module doesn't load first?

When my module does not load how can I load it correctly?

Suppose I have tens of controllers and I would like to separate each controller into its own file. For this example suppose I have one controller that lives in a file: controller.js

angular.module('pubmodule').controller( 'CreatePostController', ['$stateParams', '$scope','$http' ,function($stateParams, $scope, $http) {
        }]);

and I have a module which loads from: base.js

angular.module( 'pubmodule', ['ngSanitize', 'ionic'] )
.run( function ( $rootScope, $state, $stateParams, PostTimelineService) {} );

I load each of these files from my html:

<script type="text/javascript" src="controller.js"></script>
<script type="text/javascript" src="base.js"></script>

When I load the files in the above order, I do not have access to pubmodule so I see:

Error: [ng:areq] Argument 'CreatePostController' is not a function, got undefined

I closely followed this question, but this question does not consider load order and that is the topic I am interested in. How can I separate my controllers into different files AND consider the order my module loads? Simply changing the order my html loads solves this error, but I am concerned that I do not have control over this when considering latency. The request for controller.js may come back first.

Solution

  • Latency doesn't matter in terms of load order. The browser will still load the files as they are declared in the html. So as long as your base.js file is referenced first you'll be ok. The browser will execute the code in order they appear. So if controller is declared after base but comes down first, then it won't be evaluated till base is done.