AngularJS Project Structure

Question

I really would like assistance, being new to AngularJS, on the best way to structure a project I am working on.

Basically, I have a project I am going to do in the 'PEAN' stack per say (Postgres, Express, AngularJS, Node) and need a conceptual idea on how it should be structured.

The gist of it is that the application will have 4 types of user accounts and each signed in user will see a different view. Here is a simple diagram of the feature set:

USER TYPE 1:
Navigation
- feature 1
- feature 2
- feature 3

USER TYPE 2:
Navigation
- feature 1
- feature 2
- feature 3

And so on for the other 2 users...

Nevertheless, each of the features accessible by the user will be different. So my question remains, how will the client side be structured directory wise for the client side AngularJS app?

Also, how should the repositories be setup?

1. One single repo for the API and the client side code?
2. Could I separate the API repo and the client side repo and contain all user account views in one client side repo?
3. Should I have a client side repo for each type of user account?

Answers to these questions would clear a lot of confusion and would help me out greatly. I've done numerous amounts of research on the proper structure for an application like this and can't seem to figure it out.

Your assistance is greatly appreciated in advance!

Answer 1

Folder structures vary from project to project as people are different projects are of different nature. But whatever you do you will end up with some what approx folder structure as shown below :-

• You will need two root folders one for the server code and the other for client code. The client code folder sometimes is also named as “app”.

• If you have a big project then inside in the client folder you can create sub folder which represent modules of your project. Normally developers divide project in modules for better management so these subfolders represent those modules.

• In this those module folder you can have separate folder for component, model, module and routing.

• A common folder is also needed where in you can push your common utilities like common pipes, filters, http components, injectables and so on. Server folder will have its own folder structure depending on whether you are doing ASP.NET or JSP or PHP. In this discussion we will restrict only to client side angular folder structure.

Image courtesy http://computerauthor.blogspot.in/2017/11/what-is-best-project-folder-structure.html

Answer 2

I'd recommend you go here: https://github.com/johnpapa/angular-styleguide/blob/master/a1/README.md and follow the guidelines laid out here. It's a little dated, since it hasn't been updated to cover components, but most of it still applies.

I'd also recommend that you skip over controllers and look into components before you get started.

And really, if you have a choice, since you're just getting started, I'd look long and hard at going with Angular 4 rather than building a new app in legacy technology.

Answer 3

I can't speak for the architecture of your project, but I have had experience with structure for MEAN stack projects (or PEAN in this case).

I would not separate your project into more than one repo in this case, having all of your code in one place is helpful. As long as it all runs together, it should stay in the same repo. You should separate repos when your project does not run together, and is really two projects (like an iOS app and web app)

My basic file structure usually looks like this:

. 
+-- app/ (all of your angular, dynamic web app code)
|   +-- controllers/
|   +-- directives/
|   +-- factories/
|   +-- views/
|   +-- templates/
|   +-- app.js
+-- server/ (all of your nodejs, server side code)
|   +-- controllers/
|   +-- models/
|   +-- routes/
+-- public/ (static assets)
|   +-- css/
|   +-- scripts/
|   +-- images/
+-- index.js (run the project)