In Part 0, I wrote an introduction to this series, and decided upon an IDE; WebStorm. The IDE does not have an opinion on the project layout for a single page JavaScript/AngularJS app. That’s actually good. But we need to think about it ourselves and come up with something that is scalable, readable, and maintainable.

AngularJS/JavaScript Project Structure

One of the nice things about Maven, is that it encourages a standard project directory structure. You can open the project in Eclipse, or NetBeans, or Intellij, or even Emacs, and you’ll be able to work with it. There doesn’t seem to be a direct analog in the AngularJS world. But there are indeed various approaches out there. Since you’re probably learning AngularJS as you go, you’ve probably looked at their tutorial. If not, go ahead and take a look. It’s even fun. The Github repository for the tutorial’s phonecat app is based on another Github project named angular-seed. Hey, if they’re using it, it must be good, right? So, I looked at that first. Their directory layout; take a look. Here is a simplified version:

Some observations: This layout separates your main code (SUT) from your test code just like Maven. Is that a problem? It’s not a problem for me in the Java world. My IDE can be set up to jump between the main code and the test code with a key binding. Would there be an advantage to putting the test code in the same folder as the SUT? Unless you stick to a naming convention, e.g. ProductTest.js, you will have a hard time at deployment telling your deployment tool what is deployable code and what is test code. I can go either way with this issue. There are 2 controllers in the tutorial and they both live in app/js/controllers.js. For a simple tutorial this is not bad. For a large scale app, that could be a problem. The same goes for other files such as services.js. So here is an important question.

Do you want to organize your code by feature or by type (i.e. controllers, service, etc.)?

I’ll talk about JavaScript tools soon, but as a preview, there is a build tool that can concatenate your JavaScript (and minimize it etc.) into a single file for performance, so don’t let that be part of this decision.

I’m learning towards putting all the User code in a folder, the Product code in another folder etc. Maybe someone else agrees, so I asked The Google. Well, that was kicking a hornet’s nest. But I did find an article by Cliff Meyers that I find valuable on this topic. Cliff uses a sock drawer analogy. You can throw all your socks into a drawer, and maybe you can find the ones you are looking for. But ask someone else to find them, and good luck.

I also found a Google document by someone at Google that proposes a new layout using the phonecat app as an example. That’s an interesting read also.

OK, I’m sold. I’m going with organization by feature rather than by type.

Next

Wait a minute. What are those JSON files in the angular seed project: bower.json and package.json? What is .jshintrc? Or travis.yml? In other projects I’ve seen GruntFile.js. Looks like there are some JavaScript tools to learn in the next blog post.