[angularjs] AngularJS Folder Structure

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

This question is related to angularjs

The answer is

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

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!)


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

        scripts.min.js (all JS concatenated, minified and grunt-rev)
        vendor.min.js  (all bower components concatenated, minified and grunt-rev)
        mergedAndMinified.css  (grunt-cssmin)
    index.html  (grunt-htmlmin)

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:

+-- 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
    +-- ...

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.

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)
  /partials (views)

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

Questions with angularjs tag:

AngularJs directive not updating another directive's scope ERROR in Cannot find module 'node-sass' CORS: credentials mode is 'include' CORS error :Request header field Authorization is not allowed by Access-Control-Allow-Headers in preflight response WebSocket connection failed: Error during WebSocket handshake: Unexpected response code: 400 Print Html template in Angular 2 (ng-print in Angular 2) $http.get(...).success is not a function Angular 1.6.0: "Possibly unhandled rejection" error Find object by its property in array of objects with AngularJS way Error: Cannot invoke an expression whose type lacks a call signature Error : getaddrinfo ENOTFOUND registry.npmjs.org registry.npmjs.org:443 Disable Chrome strict MIME type checking Consider marking event handler as 'passive' to make the page more responsive Angular get object from array by Id SyntaxError: Unexpected token o in JSON at position 1 Failed to load resource 404 (Not Found) - file location error? Use of symbols '@', '&', '=' and '>' in custom directive's scope binding: AngularJS Usage of $broadcast(), $emit() And $on() in AngularJS How to return data from promise Send FormData with other field in AngularJS check null,empty or undefined angularjs How to run html file using node js how to find array size in angularjs How to filter array when object key value is in array How do I fix the npm UNMET PEER DEPENDENCY warning? Send multipart/form-data files with angular using $http Display number always with 2 decimal places in <input> Angular pass callback function to child component as @Input similar to AngularJS way ng-if check if array is empty Firebase TIMESTAMP to date and Time What is the Angular equivalent to an AngularJS $watch? Generate PDF from HTML using pdfMake in Angularjs AngularJS POST Fails: Response for preflight has invalid HTTP status code 404 Why and when to use angular.copy? (Deep Copy) How to make use of ng-if , ng-else in angularJS Check if value exists in the array (AngularJS) How to check for an empty object in an AngularJS view TypeError: window.initMap is not a function CORS with spring-boot and angularjs not working File Upload with Angular Material AngularJS $watch window resize inside directive Unexpected token < in first line of HTML Module is not available, misspelled or forgot to load (but I didn't) Assign value from successful promise resolve to external variable How to send POST in angularjs with multiple params? ng if with angular for string contains Should I use typescript? or I can just use ES6? How do I trim() a string in angularjs? How to push object into an array using AngularJS Adding class to element using Angular JS