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

Question

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

Answer 1

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.

Answer 2

You should let angular handle it for you, based on the route or url. you best option is to look at the routeProvider, the documentation is here.

usage looks like this:

$routeProvider.when('/Book/:bookId/ch/:chapterId', {
    templateUrl: 'chapter.html',
    controller: ChapterCntl
});

Another option would be using Ui router, which is an extension of the routeprovider. here is the project page.