187

How do you layout a folder structure for a large and scaleable AngularJS application?

Michael J. Calkins
  • 32,082
  • 15
  • 62
  • 91

5 Answers5

255

enter image description here

Sort By Type

On the left we have the app organized by type. Not too bad for smaller apps, but even here you can start to see it gets more difficult to find what you are looking for. When I want to find a specific view and its controller, they are in different folders. It can be good to start here if you are not sure how else to organize the code as it is quite easy to shift to the technique on the right: structure by feature.

Sort By Feature (preferred)

On the right the project is organized by feature. All of the layout views and controllers go in the layout folder, the admin content goes in the admin folder, and the services that are used by all of the areas go in the services folder. The idea here is that when you are looking for the code that makes a feature work, it is located in one place. Services are a bit different as they “service” many features. I like this once my app starts to take shape as it becomes a lot easier to manage for me.

A well written blog post: http://www.johnpapa.net/angular-growth-structure/

Example App: https://github.com/angular-app/angular-app

Wand Maker
  • 18,476
  • 8
  • 53
  • 87
Michael J. Calkins
  • 32,082
  • 15
  • 62
  • 91
  • 25
    are you answering your own question right after posting it? – Jakub Aug 30 '13 at 22:34
  • 35
    @Jakub There's an option called "answer your own question contributing to wiki" when you create the question. – Michael J. Calkins Aug 30 '13 at 22:41
  • 3
    @MichaelCalkins, I like the idea. I just checked out some of your youtube tuts on angular too, nice – Ronnie Aug 30 '13 at 22:50
  • 5
    @Ronnie I just remember this being one of the hardest learning curve steps to AngularJS so hopefully it helps people out. I think I went through like 10 different layouts after reading blogs and what not. – Michael J. Calkins Aug 30 '13 at 22:52
  • Could you please recommend a 'Hello World' tutorial following any of those structures ? All I've found till now are embedded angularjs within the html file. Thank you ! – jmhostalet Mar 05 '14 at 16:14
  • @jmhostalet Here is a simplistic example I've made: https://github.com/clouddueling/angular-authentication-example – Michael J. Calkins Mar 05 '14 at 16:46
  • 5
    [Here](https://github.com/mgechev/angularjs-style-guide#directory-structure) is a community-driven angularJS best practices page. Their file structure suggestion is a combination of both of your ideas in two examples. I like the second example better as it is more behind the idea of sorting by feature. – John Apr 22 '14 at 06:26
  • For small to medium size apps use Sort By Type Structure(i.e grouped by type like Controller/Service etc)- http://briantford.com/blog/huuuuuge-angular-apps – Sanjeev Aug 18 '14 at 18:15
  • For larger apps with lot of features and modules use Sort By Feature i.e grouped as per functionality instead of file types. Here is google suggested Folder Structures link: https://docs.google.com/document/d/1XXMvReO8-Awi1EZXAXS4PzDzdNvV6pGcuaF4Q9821Es/pub – Sanjeev Aug 18 '14 at 18:17
  • 1
    What about css files on the right image? Why not sorting them by feature too? – pomber Mar 23 '15 at 03:53
  • example apps for both approach https://github.com/vngrs/ng-complex https://github.com/vngrs/ng-simple – Ali Davut Aug 04 '15 at 13:46
  • Hi, Michael. Could you please help me with next question: http://stackoverflow.com/questions/33837168/asp-net-mvc-angularjs-bower-and-deploying-site-folder-structure – Maxim Zhukov Nov 20 '15 at 23:19
  • the video link is dead... – Aprillion Feb 14 '16 at 10:38
32

After building a few applications, some in Symfony-PHP, some .NET MVC, some ROR, i've found that the best way for me is to use Yeoman.io with the AngularJS generator.

That's the most popular and common structure and best maintained.

And most importantly, by keeping that structure, it helps you separate your client side code and to make it agnostic to the server-side technology (all kinds of different folder structures and different server-side templating engines).

That way you can easily duplicate and reuse yours and others code.

Here it is before grunt build: (but use the yeoman generator, don't just create it!)

/app
    /scripts
            /controllers
            /directives
            /services
            /filters
            app.js
    /views
    /styles
    /img
    /bower_components
    index.html
bower.json

And after grunt build (concat, uglify, rev, etc...):

    /scripts
        scripts.min.js (all JS concatenated, minified and grunt-rev)
        vendor.min.js  (all bower components concatenated, minified and grunt-rev)
    /views
    /styles
        mergedAndMinified.css  (grunt-cssmin)
    /images
    index.html  (grunt-htmlmin)
Urigo
  • 3,175
  • 21
  • 27
  • 1
    where should it be the configuration of routes block of code? `angular.module('myApp').config(function($routeProvider) { ... });` – sports Sep 14 '14 at 18:28
  • 1
    +1 Also, you can customize where yeoman puts your stuff. IMHO, sorting by feature/module in big apps is better since you can more easily reuse a feature in other apps. – Tivie Oct 23 '14 at 23:54
30

I like this entry about angularjs structure

It's written by one of the angularjs developers, so should give you a good insight

Here's an excerpt:

root-app-folder
├── index.html
├── scripts
│   ├── controllers
│   │   └── main.js
│   │   └── ...
│   ├── directives
│   │   └── myDirective.js
│   │   └── ...
│   ├── filters
│   │   └── myFilter.js
│   │   └── ...
│   ├── services
│   │   └── myService.js
│   │   └── ...
│   ├── vendor
│   │   ├── angular.js
│   │   ├── angular.min.js
│   │   ├── es5-shim.min.js
│   │   └── json3.min.js
│   └── app.js
├── styles
│   └── ...
└── views
    ├── main.html
    └── ...
AncientSwordRage
  • 7,086
  • 19
  • 90
  • 173
Chris
  • 54,599
  • 30
  • 149
  • 186
4

There is also the approach of organizing the folders not by the structure of the framework, but by the structure of the application's function. There is a github starter Angular/Express application that illustrates this called angular-app.

BoxerBucks
  • 3,124
  • 2
  • 21
  • 26
  • This is often a better approach for very large projects. Sadly we are still stuck with folder structures ... tagging would be better so it would not matter so much and we could have multiple views depending on the tags. – Christophe Roussy Apr 21 '16 at 15:06
3

I'm on my third angularjs app and the folder structure has improved every time so far. I keep mine simple right now. 

index.html (or .php)
/resources
  /css
  /fonts
  /images
  /js
    /controllers
    /directives
    /filters
    /services
  /partials (views)

I find that good for single apps. I haven't really had a project yet where I'd need multiple.

Ronnie
  • 11,138
  • 21
  • 78
  • 140
  • You will have problems in maintaining and introducing new features later. It is always a good practice to have a folder structure with features and components related to that feature under the its folder. – Jaseem Abbas Oct 10 '15 at 15:52
  • Am I right in thinking that Angular JS has no standard project folder structure or project template, like an asp.net web project or a windows desktop application ? –  Dec 05 '17 at 09:37
  • 1
    @dotNetBlackBelt that is correct. There is no standard when it comes to angular. Since posting this, I've made changes to how I setup my folders. My last project I went more or less what the top answer of this OP is – Ronnie Dec 05 '17 at 16:59