Search code examples
angularvisual-studio-codedevelopment-environment

organizing files in angular 2 project


I started learning angular2, I created a project of angular2 app using angular-cli, I followed Tour of Heroes Tutorial on angular website. I still have have one last part left to follow along. But problem is there are too many files and it gets confusing. Below is the snaphshot of my project in VS Code: Angular2 project in VS Code
It just contains 3 views. What if we have very large number of views? How should we organize our project and what should be folder structure?


Solution

  • Accoding to Angular Style Guide:

    All of the app's code goes in a folder named app. All feature areas are in their own folder, with their own Angular module.

    So your feature areas might be: dashboard and heroes. And heroes would also have feature areas like: hero-detail and hero-list.

    Check Angular2 Overall Structural Guidelines for an example folder structure.