Angular CLI, Project Creation, Folder Structure

 

Angular 20 Project Folder Structure

my-angular-app/

├── src/

│   ├── app/

│   │   ├── app-routing.module.ts   <-- Routing configuration

│   │   ├── app.component.ts        <-- Root component logic

│   │   ├── app.component.html      <-- Root component template

│   │   ├── app.component.css       <-- Root component styling

│   │   └── app.module.ts           <-- Main application module

│   │

│   ├── assets/                     <-- Static assets (images, etc.)

│   ├── environments/               <-- Environment config (prod/dev)

│   │   ├── environment.ts

│   │   └── environment.prod.ts

│   │

│   ├── index.html                  <-- HTML entry point

│   ├── main.ts                     <-- Application entry point

│   ├── styles.css                  <-- Global styles

│   └── polyfills.ts                <-- Legacy browser support

│

├── angular.json                   <-- Angular CLI configuration

├── package.json                   <-- npm dependencies & scripts

├── tsconfig.json                  <-- TypeScript configuration

└── README.md

📁 Root Folder (my-angular-app/)

This is the base folder of your Angular 20 project. It contains:

🔹 angular.json

• Main configuration file for Angular CLI.

• Controls build settings, file structure, styles, assets, environments, etc.

• Example:

  json
  
  "sourceRoot": "src",
  "projects": {
    "my-angular-app": {
      ...
    }
  }
  

🔹 package.json

• Lists all npm dependencies, scripts, and metadata.

• Example:

  json
  
  "scripts": {
    "start": "ng serve",
    "build": "ng build"
  }
  

🔹 tsconfig.json

• TypeScript compiler configuration file.

• Defines how TypeScript is compiled.

🔹 tsconfig.app.json, tsconfig.spec.json

• Inherits from tsconfig.json but used specifically for:

  • tsconfig.app.json → App build

  • tsconfig.spec.json → Unit tests

🔹 node_modules/

• Contains all third-party libraries your app depends on.

• Auto-generated by npm install.

---

📁 src/ — Your Application Source Code

📄 main.ts

• Entry point of the application.

• Bootstraps the root module (AppModule).

📄 index.html

• The main HTML file.

• The Angular app is rendered inside the <app-root></app-root> tag.

📄 styles.css

• Global styles for the entire app.

• You can change this to .scss or .sass during setup.

📄 polyfills.ts

• Adds browser-specific support (like IE11 if needed).

• Required for compatibility with older browsers.

---

📁 src/app/ — Application Logic Lives Here

This is the most important folder.

📄 app.module.ts

• Root Angular NgModule.

• Declares your components and imports other modules.

📄 app.component.ts

• Root component.

• First component loaded by Angular.

• Selector: <app-root>

📄 app.component.html

• Template (view) for root component.

📄 app.component.css

• Styles for the root component.

📄 app-routing.module.ts

• Handles routing logic (e.g., navigation between pages).

• Contains path-to-component mappings like:

  ts
  
  const routes: Routes = [
    { path: 'home', component: HomeComponent },
    { path: '**', redirectTo: 'home' }
  ];
  

---

📁 src/assets/

• For static assets (images, fonts, JSON files, etc.)

• Content here is served directly (not bundled).

📁 Example:

kotlin

assets/
├── images/
│   └── logo.png
└── data/
    └── sample.json

---

📁 src/environments/

• Contains environment-specific configuration files.

• Useful for switching between dev and prod environments.

📄 environment.ts (for development)

ts

export const environment = {
  production: false,
  apiUrl: 'http://localhost:3000/api'
};

📄 environment.prod.ts (for production)

ts

export const environment = {
  production: true,
  apiUrl: 'https://api.production.com'
};

-----------------------------------------------------------------------------------------------------------------

Here's a simple Angular 20 Data Binding example using a Learning Management System (LMS) scenario. We'll demonstrate:

1. Interpolation

2. Property Binding

3. Event Binding

4. Two-Way Binding

create New Project

ng new my-first-app

my-first-app

App.ts

-------------

import { CommonModule } from '@angular/common';

import { Component, signal } from '@angular/core';

import { FormsModule } from '@angular/forms';

import { RouterOutlet } from '@angular/router';

@Component({

  selector: 'app-root',

  imports: [RouterOutlet,CommonModule,FormsModule],

  templateUrl: './app.html',

  styleUrl: './app.css'

})

export class App {

  protected readonly title = signal('my-first-app');

  studentName: string = 'Ravi Kumar';

  courseName: string = 'Angular 20 ';

  isEnrolled: boolean = false;

  enroll() {

    this.isEnrolled = true;

  }

}

-----------------------------------------------------------------------------------------

app.html

<h2>Welcome, {{ studentName }}!</h2> <!-- Interpolation -->

<p>Course: <strong>{{ courseName }}</strong></p>

<!-- Property Binding -->

<input [value]="courseName" readonly />

<!-- Event Binding -->

<button (click)="enroll()" [disabled]="isEnrolled">Enroll</button>

<!-- Property & Interpolation -->

<p *ngIf="isEnrolled" style="color: green;">

  ✅ You have successfully enrolled in {{ courseName }}!

</p>

<!-- Two-Way Binding -->

<label>

  Update Name:

  <input [(ngModel)]="studentName" />

</label>

<router-outlet />

----------------------------------------------------------------------------------------------

app.css

/* Container Styling */

:host {

    display: block;

    max-width: 500px;

    margin: 40px auto;

    padding: 20px;

    border: 2px solid #1976d2;

    border-radius: 12px;

    background-color: #f0f8ff;

    font-family: Arial, sans-serif;

    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);

  }

  

  /* Heading */

  h2 {

    color: #0d47a1;

    margin-bottom: 20px;

    text-align: center;

  }

  

  /* Input Fields */

  input[type="text"],

  input[type="email"],

  input {

    width: 100%;

    padding: 10px;

    margin-top: 5px;

    margin-bottom: 15px;

    border: 1px solid #90caf9;

    border-radius: 8px;

    font-size: 16px;

  }

  

  /* Buttons */

  button {

    background-color: #1976d2;

    color: white;

    padding: 10px 20px;

    font-size: 16px;

    border: none;

    border-radius: 8px;

    cursor: pointer;

    transition: background-color 0.3s ease;

  }

  

  button[disabled] {

    background-color: #ccc;

    cursor: not-allowed;

  }

  

  input[type="text"],

input[type="email"],

input {

  width: 60%;          /* 🔽 Reduced from 100% to 60% */

  padding: 6px 10px;   /* 🔽 Less padding */

  font-size: 14px;     /* 🔽 Smaller font */

  margin-bottom: 15px;

  border: 1px solid #90caf9;

  border-radius: 8px;

}

------------------------------------------------------------------------------------