The basics are simple. Each directory has it’s own file with a short description about the type of code that you should put into it. Below is a more detail description of each directory.
There are 3 directories here; app, css and img. Lets not insult anyone’s intelligence here and skip css and img.
app is also the home of our good friend
Next we have
libs. Ok we’re not going in alphabetical order here but it’s logical trust me!
Don’t think of
Your application will almost certainly rely on exposed server side APIs. Firebase or Sendgrid for common examples. Build your Angular factories/services and wrap these APIs inside. Then plop them in this directory. It will help you maintain organisation over your external service dependencies.
Network related dependencies like APIs won’t be the only logic you rely on. Possibly at some point your application will rely on business logic, enums and calculations perhaps. If so wrap their functionality in an Angular services and drop them in here. I usually put objects representing enums into constants on a module and stored them in this directory.
If you are truely making use of Angular’s abilities you will no doubt be trying to turn everything into a directive. “This header, could it be a directive?”, “This markdown editor, could it be a directive?”, these are the sorts of questions you should be asking whilst you develop your application. If a piece of functionality is self-contained, has the possibility to be re-used and isn’t a defining characteristic of your application then it’s probably a component.
Features bring your components together and define the characteristics of your application. They also contain your base templates. So as an example a header component would be utilised by the login feature.