Your Environment

As we saw in Chapter 4, Angular CLI creates a default structure for project. The src\app folder holds all the TypeScript source files, and the TypeScript compiler configuration file. You will also note that the default installation places the template HTML and CSS files in the same folder. This is okay for small projects, but you are not limited to that approach.

Your folder structure

Within the app folder, you can structure your folders any way you’d like. I use an approach somewhat like Microsoft MVC applications.

• Classes: Class libraries
• Interfaces: Interface modules
• Services: Service layers
• Views: HTML template code

If you use a different structure, you will need to adapt some of your pathing references to your structure. If you have multiple Angular 2 applications, I would recommend using the same folder system for each application.

Another approach might be to put files related to application functionality in the same folder, such as:

• Payroll: Payroll/employee information
• Ordering: Customers and orders
• Inventory: Inventory and work in process

Summary

Decide what overall structure works best for you, and stay with it—particularly in a team environment where multiple people might be working on the application.