3

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.

Community
  • 1
  • 1
JZ.
  • 21,147
  • 32
  • 115
  • 192
  • 1
    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. – Hattan Shobokshi Jul 31 '14 at 19:11
  • When using script tag (without async) it will be loaded in order of appearance in the html. latency doesn't cause script to go out of sync. [Its well explained in this answer](http://stackoverflow.com/questions/8996852/load-and-execute-order-of-scripts) – PSL Jul 31 '14 at 19:11
  • Good question. I am dealing with requireJS myself for a project and it gets tricky in how we order and combine the Javascript files. On a side note I think our programming model should not be dependent on these semantics and combining all your applications angular code is the best bet using Grunt/Yeoman workflow. – bhantol Jul 31 '14 at 19:45
  • @HattanShobokshi if you answer the above, I will accept it. I forgot this. – JZ. Jul 31 '14 at 20:51
  • Thanks, I posted it as the answer. – Hattan Shobokshi Jul 31 '14 at 21:53

2 Answers2

0

My sucpicion is the module.run() occuring after the controller.js in base.js.

On a side note if base.js is really the base it should be on the top of controller.js.

Nonetheless try adding your .run in the first js. But also make sure that all its dependencies are available prior to that...e.g. your PostTineLineService.

Checkout AngularJS documentation on the order of run with respect to its dependencies.

enter link description here

enter image description here

bhantol
  • 9,368
  • 7
  • 44
  • 81
0

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.

Hattan Shobokshi
  • 687
  • 5
  • 13