Proper angular file structure

Question

What is the best angular file structure for me? My project is going to be a SPA with a video feed on the main page, and pages to view specific posts. I want my users to be able to login, vote on the content and an admin section to add content.

You can see my file structure here - https://github.com/bliitzkrieg/TrailerFeed or below

/app
   /assets
      /css
          main.css
          main.min.css
      /sass
          main.scss
          _variables.scss
          /components
               _header.scss
   /components
       /dashboard
       /feed
           _feed.html
           feed.js
           feedController.js
       /header
            _header.html
           header.js
           headerController.js
           headerDirective.js
   /spec
       app.spec.js
   app.js
   index.html
   routes.js

The structure is not good. You should prefer to structure files by functionality not by type. That means that tests for app should be in the same folder as app. Styles for header should be in the same folder as the code for header. That really simplifies refactorings and modularization. There is no reason to put tests/css into dedicated folders and duplicate the folder hierarchies. — Sulthan
– Sulthan, Commented May 8, 2015 at 14:14

Martin · Accepted Answer · 2015-05-08 14:01:08Z

1

Your file structure looks fine. You have your files organized by component rather than type. I would suggest removing the underscore prefix from your templates as this is redundant. Every template in angular is a partial so they don't need to be indicated as such.

You may want to keep your unit tests in the components directory as well. headerDirective.spec.js can live with in your header component folder.

Controllers are classes and instantiated as individual instances (as apposed to services which are classes that are injected as a singleton). So controllers should be named in PascalCase rather than camelCase.

It would seem that your component SCSS should live with the rest of its component files as well. But there are very valid reasons not to do this.

edited May 8, 2015 at 14:01

answered May 8, 2015 at 7:08

Martin

16.4k4 gold badges51 silver badges58 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

eddiec Over a year ago

you may additionally want a src and dist folders (or similar) at the top of your project if you're planning on using a tool like grunt or gulp

Luca Over a year ago

So dist would be for my compiled assets (js, css) but what would go in the src folder?

Collectives™ on Stack Overflow

Proper angular file structure

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related