Structuring your AngularJS project

In the next couple of months, I will be posting some AngularJS related posts. I'm currently learning AngularJS, and therefore most of the posts will contain different issues that I've encountered, and a "how to" approach on how I delt with the issue. The posts will not contain any introduction to AngularJS itself, since there are plenty of posts regarding that subject.

The first post in this series, will be about structuring a AngularJS project, which seems like the best place to start off. The reason why this is important is, that after a while working on your project, it can become very messy, if you didn't start of by focusing on a good structure. When I made my first AngularJS project, I made a simple structure like this:

 

app/
controllers/
views/
services/
directives/

 

The problem with this structure is, that after making 10 controllers and directives, it becomes very messy having to locate specific files, and change whatever that needs to be changed. You will often find yourself wasting a lot of time doing this, rather than doing what you should be doing; coding.

 

Instead I recommend using a structure like this:

 

app/
app.js

    shared/
        nav/
          navView.html
          navDirective.js

        sidebar/
          sidebarView.html
          sidebarDirective.js

    pages/
        frontpage/
          frontPageView.html
          frontPageDirective.js

        contactpage/
          contactPageView.html
          contactPageController.js

 

With this structure, you will be able to locate files faster, and have a structure that will work even with a larger app.

 

 

Jesper Martinussen