6. Understanding Angular Workspace and File Structure

Angular projects are organized into a workspace. Understanding the structure is key to efficient development.

Workspace Root Files

• angular.json: Configuration for the entire workspace. Defines projects, build options, testing frameworks, and commands.
• package.json: Contains project metadata, dependencies (libraries needed for the app to run), and development dependencies (tools needed for development/building).
• tsconfig.json: TypeScript configuration files. Defines how the TypeScript code is compiled into JavaScript.

The src Folder (Source Code)

This is where all your application code lives. The primary files here are:

1. index.html: The single host page for the SPA. Angular injects its content into the <app-root> tag here.
2. main.ts: The entry point of the application. It bootstraps the main Angular module (AppModule) to start the application.
3. styles.css: Global styles for the application.
4. app/: Contains the main application module and core components.

Core Application Files (src/app/)

Every Angular application is composed of Components, Templates, Styles, and Modules.

• app.module.ts: Defines the root module of the application. Declares which components, services, and other modules are available.
• app.component.ts: The main component class (logic).
• app.component.html: The component's template (view).
• app.component.css: Component-specific styles (scoped styles).
• app-routing.module.ts: Handles application navigation routes.

Analogy: The application is a tree. index.html is the soil, main.ts is the seed, app.module.ts is the trunk, and app.component.ts/html is the first branch and leaf.