CODEWITHSUNDEEP
angularjsgetincludemodularityfile-structure
user1692823
user1692823

Reputation: 109

How to get a true modular app in AngularJS and their include structure?

I've been messing around with Angular and i wanted to split all the files up according to their role in my app.

I want a folder for each "page" like /home or /products and take care of everything within their respective folder(It sounded like a great idea).

However, now i'm not sure how to approach loading these files in or even where to do it.

This is my current file structure: enter image description here

Due to certain limitations im not able to use other helpful tools, this needs to happen in the code directly.

What would be the best way to approach this?

Upvotes: 0

Views: 81

Answers (2)

Alessandro Messori
Alessandro Messori

Reputation: 1105

The Web is getting more and more component oriented, now all the most famous frontend frameworks adopt a reusable component policy (React and Angular 2 relies heavily on it)

If you want your angular app to be as modular as possible, you have to put everything regarding a component in a separate folder (html templates,css styles and js logic),and split the shared logic between services and assets

In Your case an example of project structure could be:

app/

  • assets/ //put here images,fonts and shared styles
  • services/
    • apiService.js
    • utilsService.js
    • etc etc ...
  • components
    • home/
      • home.js
      • home.css
      • home.html
    • products/
      • products.js
      • products.css
      • products.html
    • etc etc/...
    • index.js

index.html

Upvotes: 1

flashjpr
flashjpr

Reputation: 470

1st part of your question:

There's no default way to organise your angular app.

However, there are some guidelines. I keep thanking myself for reading the Angular 1 app-structuring-guidelines by John Pappa which enlightened me on the same question you are asking.

At the moment, I have organised all my apps in a folder-by-functionality apprach rather than a folder-by-type one (i.e. all controllers in a controllers folder, all services in a services folder,etc).

2nd part of your question: Just use Gulp or Grunt and then import the single file in your index

Upvotes: 2

Related Questions