Search code examples
angularjsdynamiccontrollers

angularjs how to set <script src="controller"> depending on the route in the index.html

I have been working on an angular.js app that is growing wit many controllers, all of the files are included in the index.html file, even if the current view does not use one of them, this apply to providers and other modules too.

how do i call only the controller that is needed depending on the routes, in the index.html?

i have an index.html file with the many script tags:

<script src="controller1.js"></script>
<script src="controller2.js"></script>
<script src="controller3.js"></script>

Update: A better explanation of the question + answer. http://weblogs.asp.net/dwahlin/archive/2013/05/22/dynamically-loading-controllers-and-views-with-angularjs-and-requirejs.aspx

Solution

  • What you are looking for is asynchronous modules and a loader that can pull them from the server. RequireJS is the first one that springs to mind. A seed project with examples of how to marry RequireJS and AngularJS can be found here.