CODEWITHSUNDEEP
javascriptangularjscordova
Mulgard
Mulgard

Reputation: 10589

Elegant way to organize the script includes?

Im using Cordova with Angular and Ionic to develope platform independent mobile applications. Today i learned that it is quite smart for large projects to set up a projects folder like this:

root
    index.html
    modules
        app.js
        module_1
            module_1.js
            module_1.html
        module_2
            module_2.js
            module_2.html
            module_2_sub
                module_2_sub.js
                module_2_sub.html
 ...

And you define your App.js like this:

angular.module('App', ['App.Module_1', 'App.Module2'])

But that leads to a very huge list of script includes in the index.html if you have a large project:

<script src="modules/app.js"></script>
<script src="modules/module_1/module_1.js"></script>
<script src="modules/module_2/module_2.js"></script>
<script src="modules/module_2/module_2_sub/module_2_sub.js"></script>
....

Is there a smarter way to organize this script includes? Maybe something like just including the app.js and in the app.js include all other needed scripts.

Ofcourse one just could say 'why do you even care about that?' but i kinda have the feeling that it is not very 'nice looking' to have so many includes in the index.html.

Upvotes: 1

Views: 97

Answers (3)

Robert Moskal
Robert Moskal

Reputation: 22553

I might also suggest browserify: http://browserify.org. This let's you use the server side node conventions in the browser. And has the additional advantage of letting you share the same code in the browser as on the server. To my mind, it's the most advanced way of handling your code dependencies in a consistent manner.

Upvotes: 1

Olivierodo
Olivierodo

Reputation: 406

do you use grunt or gulp? cause i could recommend you this plugin https://www.npmjs.com/package/grunt-include-source that include the source automatically in your main html. And then it could be easier to include the .min if you decide to minify your sources

Upvotes: 2

Stefan Ch
Stefan Ch

Reputation: 329

You could take a look at RequireJS. It sometimes can be a pain to setup for the first time, but once it's up it can help you with your issue.

Take a look at an Angular with RequireJS seed or if you prefer to use Yeoman.

Upvotes: 1

Related Questions