IMPORTANT NOTE: I now use webpack and, as awesome as this was, it has some serious shortcomings. My experience with webpack has been SO much better! I even made an egghead.io series on Angular and Webpack for Modular Applications.
I just read a medium post by @dickeyxxx about simplifying your Angular app’s script loading by simply leveraging Angular’s built-in module system and simply concatenating your source for dev and making source maps in favor over browserify or requirejs which can be more complicated. I’d like to suggest an alternative approach to accomplishing the same thing which I think may be even simpler.
The problem: Loading Scripts
What we’re really trying to accomplish here is two fold:
- Make sure all our files load in the right order
- Prevent the need for us to write script tags for every file by hand…
With the way Angular is currently. It pretty much takes care of #1 for us with its dependency injection and module system. (I’m pretty sure) that all you need to do is make sure that the module is created before you attempt to register anything on it (directives, services, controllers, etc.) and any of a module’s dependencies also need to be loaded. Other than that, it doesn’t really matter what order things load.
As a side, at work, we use require to load all of our files. I know requirejs is more than just loading scripts, but please tell me how manually writing and maintaining this:
// go on forever...
Is any less of a nightmare than manually writing this:
<!-- go on forever... -->
Our app is riddled with the former, and I don’t really see that being much better than the latter…
A Solution: Grunt (or gulp, or whatever) + Jade (or ejs or whatever)
In my naivety, I created my own little node program that adds a script tag to my index.html for all the files in my project’s folder. It works great and my output looks like a huge html file with a billion script tags in it, but I don’t care, because what I have to maintain is very small and it works like a charm.
If you want, here’s how I’m doing it in a side project. Some of it is dependant on how I’ve structured my project, so you may have some differences in how you implement it, but I’d recommend trying it out :-)
Here’s my index.jade:
and part of my Gruntfile.js
In the grunt config, you’ll notice a reference to “getIndexData.” This is the main magic of how things are automatically loaded. You’ll notice that vendor files (bower_components) are specifically added. Don’t know how you could get around that… But then I glob for everything using the constraints mentioned above. See it below:
I hope this is helpful for you. It’s certainly simpler for me to simply run “grunt jade” than worry about requiring stuff all over my code.
Compare/Contrast Million Scripts method with Concat & Sourcemap method
This is where I further convince you of my lack of knowledge…
- They both accomplish the same task: Once you have it up and running, you don’t have to worry about writing/maintaining madness (require statements etc.)
- Concat & Sourcemap needs to run every time you change anything. I’m not certain how long that takes, but if it takes much time, then you’re stuck waiting for that task to run before you refresh your browser, which could be annoying. Especially if you’re compiling from CoffeeScript or TypeScript already. But, this may be such a negligible amount of time that this is simply a difference, neither good nor bad. Million Scripts only needs to run when you add/remove a file.
- Million Scripts requires the browser to load a ton of scripts every time you refresh whereas Concat & Sourcemap only needs the loading of one file (+ the sourcemap). Each of these is good and bad. I believe the browser only loads 6 files at once, so it may take a second longer to load the Million Scripts method. However, locally (where you should be doing this) that’s probably a non-issue. With Concat & Sourcemap, the browser has to split the parse the sourcemap and split it up. If you have a few vendor files in there, this may take a second too…
Hurray for multiple solutions to the same problem! I hope there’s always more than one way to do complex things because it makes it possible for you to evaluate the solutions and pick the one that works best for your situation.
Another Note: This is obviously just for development purposes. When you’re going to production, you’re going to want to concat and minify your source, yada yada yada. Loading 100 js files in the browser is not the best idea in the world…