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

what do you mean by "call"? To load a specific js file?

Ivan Chernykh
– Ivan Chernykh

2013-09-21 16:00:08 +00:00
Commented Sep 21, 2013 at 16:00 — Ivan Chernykh
– Ivan Chernykh, Commented Sep 21, 2013 at 16:00
yes, without the need to writte all the script tags.

JP Guevara
– JP Guevara

2013-09-21 17:27:12 +00:00
Commented Sep 21, 2013 at 17:27 — JP Guevara
– JP Guevara, Commented Sep 21, 2013 at 17:27

mortalapeman · Accepted Answer · 2013-09-22 03:42:22Z

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.

answered Sep 22, 2013 at 3:42

mortalapeman

1,42512 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

JP Guevara Over a year ago

It seams that RequireJS is what i am need, i will try it and post the results.

bingjie2680 · Accepted Answer · 2013-09-21 20:33:00Z

0

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.

edited Sep 21, 2013 at 20:33

answered Sep 21, 2013 at 20:26

bingjie2680

7,7839 gold badges50 silver badges72 bronze badges

Collectives™ on Stack Overflow

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

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related