1

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!

Improve this question

3 Answers 3

Reset to default
2

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.

Angular folder architecture

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

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

Comments

1

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.

Improve this answer

1 Comment

You can now find his Angular 2 style guide in the official documentation: link
0

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)
Improve this answer

6 Comments

Absolutely that's how I'm thinking about it as well. Though, what about inside the Angular 'app' folder? How should that be laid out in terms of the 4 types of user's views?
@zbruno Good point, I added subdirectories to my diagram (after learning how to make a diagram lol)
Oh, and you would just have each kind of view in the views/ folder (in my structure). You would use app/app.js to render a view with ng-view
I see now it's coming together. One thing still though — remember that there are 4 types of user accounts are there ways to separate the features of each by adding a folder into the app folder for each type of user potentially?
I would personally created a new view (in views/) for each user type. Each page would be different and you can connect to separate controllers. Each page would have a different URL
|

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.