#2 Session 1: Introduction & Setup (2 hours)

 Here are the lecture notes for Session 1: Introduction & Setup (2 hours) with a step-by-step hands-on process.

---

Session 1: Introduction & Setup (2 Hours)

Learning Objectives

✅ Understand what Angular is and its core features
✅ Compare Angular with other front-end frameworks
✅ Set up the Angular development environment
✅ Create and run a basic Angular project

---

1. Introduction to Angular (30 mins)

What is Angular?

• Angular is a TypeScript-based front-end framework developed by Google.
• It is used to build single-page applications (SPAs).
• Offers component-based architecture and built-in tools for dependency injection, routing, and forms.

Why Use Angular?

✔ Two-Way Data Binding – Automatically updates UI when data changes.
✔ Modular Architecture – Code is split into modules for better scalability.
✔ Built-in Features – Includes routing, forms, HTTP services, and more.
✔ Strong TypeScript Support – Improves code quality and maintainability.
✔ Large Community & Google Support – Enterprise-ready framework.

Angular vs. React vs. Vue (Quick Comparison)

Feature	Angular 19	React	Vue
Language	TypeScript	JavaScript	JavaScript
Architecture	Component-based with Modules	Component-based	Component-based
Data Binding	Two-way & One-way	One-way	Two-way
State Management	Built-in RxJS & NgRx	Redux, Context API	Vuex, Pinia
Learning Curve	Steep (many concepts)	Moderate	Easy

---

2. Setting Up Angular Environment (30 mins)

Step 1: Install Node.js & Angular CLI

👉 Install Node.js (Skip if already installed)

• Download and install Node.js (LTS version) from:
  🔗 https://nodejs.org
• Verify installation by running:

  node -v
  npm -v
  

👉 Install Angular CLI (Command Line Interface)

• Install Visual code studio https://code.visualstudio.com/ 
  
  
• Open the terminal (Command Prompt or VS Code Terminal) and run:

  npm install -g @angular/cli
  

• Verify Angular CLI installation:

  ng version
  

  ✅ You should see the installed Angular version.

---

3. Creating a New Angular Project (30 mins)

Step 2: Create a New Angular App

1. Open the terminal and navigate to your desired drive: eg. d:

   	mkdir angular19
   	cd angular19

2. Create a new Angular project:

   ng new my-angular-app
   

3. During the setup, it will ask:
   • √ Which stylesheet format would you like to use? CSS             [
   • √ Do you want to enable Server-Side Rendering (SSR) and Static Site Generation (SSG/Prerendering)? No
4. Once created, navigate into the project folder:

   cd my-angular-app
   

5. Run the project:

   ng serve
   

6. Open http://localhost:4200/ in a browser – You should see the default Angular welcome page! 🎉

---

4. Project Structure Overview (15 mins)

Key Folders & Files

📂 src/ → Main application source code
📂 src/app/ → Contains components, services, and modules
📂 src/assets/ → Static assets (images, JSON, etc.)
📂 src/environments/ → Environment configuration
📂 node_modules/ → Installed dependencies
📄 angular.json → Angular configuration file
📄 package.json → Dependencies & scripts

---

5. Hands-on: Creating a Simple Component (30 mins)

👉 Step 3: Generate a New Component

1. Inside your project folder, run:

   ng generate component hello-world
   

   This creates:
   • hello-world.component.ts
   • hello-world.component.html
   • hello-world.component.css
   • hello-world.component.spec.ts

👉 Step 4: Modify the Component

1. in command prompt code . to invoke visual studio code.
2. Open src/app/hello-world/hello-world.component.html 
3. Replace the content with:

   <h2>Welcome to Angular 19!</h2>
   <p>This is my first Angular component.</p>
   

4. Open src/app/app.component.html
5. Add this line to display your new component:

   <app-hello-world></app-hello-world>
   

6. Save and restart the project:

   ng serve
   

7. Open http://localhost:4200/ – You should see your new component displayed! 🎉

---

6. Summary & Q&A (15 mins)

✅ What We Learned Today
✔ Introduction to Angular & why it's powerful
✔ Setting up the Angular environment
✔ Creating & running an Angular project
✔ Understanding project structure
✔ Building a simple component

🔹 Next Session: Components, Templates & Data Binding

---

Would you like any modifications or additional examples? 😊