AngularJS Folder Structure

Question

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

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

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

[angularjs] AngularJS Folder Structure

Examples related to angularjs