01. Angular Introduction and Setup

Level: Beginner

ℹ️ What You'll Learn

• What Angular is and why it's an opinionated framework
• When to use Angular vs React
• Installation and creating your first project
• Angular project structure and conventions
• Angular CLI basics
• Build a simple SMS dashboard component

The Problem

As a .NET backend developer moving to frontend, you need a structured framework. React is flexible but you must choose your own tools. Angular is opinionated — it provides everything out of the box. For a School Management System with routing, forms, state management, and testing, Angular's structure helps teams work together and maintain code long-term.

What is Angular?

Angular = Opinionated framework for building dynamic web applications.

Built by Google. TypeScript-first. Opinionated (structure provided).

Key features:

• Components (UI building blocks)
• Services (business logic)
• Routing (navigation)
• Forms (user input)
• HTTP (API calls)
• Testing (built-in)
• CLI (tooling)

When use Angular:

• Large, complex applications
• Team working together (structure enforced)
• Long-term maintenance (official support)
• Enterprise applications
• Real-time features needed

When NOT use Angular:

• Simple static sites (use Hugo, Jekyll)
• Blog (use Next.js, Gatsby)
• Learning frontend (try React first - simpler)
• Small prototypes (too much setup)

Installation

# Install Node.js (includes npm)
# Download from nodejs.org

# Install Angular CLI globally
npm install -g @angular/cli

# Verify installation
ng version

# Create new project
ng new my-sms-app

# Navigate to project
cd my-sms-app

# Start development server
ng serve

# Visit http://localhost:4200

ng = Angular command-line tool. ng serve = dev server with hot reload.

Project Structure

my-sms-app/
├── src/
│   ├── app/
│   │   ├── app.component.ts       # Root component
│   │   ├── app.component.html     # Root template
│   │   ├── app.component.css      # Root styles
│   │   ├── app.routes.ts          # Routes
│   │   └── services/              # Services folder
│   ├── main.ts                    # Entry point
│   ├── index.html                 # HTML shell
│   └── styles.css                 # Global styles
├── angular.json                   # Angular config
├── tsconfig.json                  # TypeScript config
├── package.json                   # Dependencies
└── README.md

app/ = application code. services/ = business logic (API calls, data).

Component Basics

Component = class + template + styles.

// app.component.ts
import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'Student Management System';
}

@Component decorator = define component. selector = HTML tag name. templateUrl = HTML file. styleUrls = CSS files.

<!-- app.component.html -->
<h1>{{ title }}</h1>

{{ title }} = data binding.

CLI Commands

# Create component
ng generate component students/student-list
# Creates: student-list folder with .ts, .html, .css, .spec.ts

# Create service
ng generate service services/student
# Creates: student.service.ts

# Create module (for grouping)
ng generate module students
# Creates: students.module.ts

# Build for production
ng build --configuration production

# Run tests
ng test

# Run e2e tests
ng e2e

# Serve with SSL
ng serve --ssl

Shorthand: ng g c (generate component), ng g s (generate service).

SMS Project Example

# Create project
ng new sms-portal

cd sms-portal

# Generate components
ng g c components/student-list
ng g c components/student-form
ng g c components/exam-list
ng g c components/fee-management

# Generate services
ng g s services/student
ng g s services/exam
ng g s services/fee

# Start development
ng serve

Now you have:

• Components for UI
• Services for API calls
• Structure ready for routing

Angular vs React

Aspect	Angular	React
Type	Framework	Library
Language	TypeScript	JavaScript/TypeScript
Learning Curve	Steep	Gentle
Structure	Opinionated	Flexible
Routing	Built-in	Need react-router
Forms	Built-in	Need react-hook-form
HTTP	Built-in	Need axios/fetch
Testing	Built-in	Need jest/testing-library
Build Tool	Angular CLI	Vite/Create React App
Company	Google	Meta

Angular: Complete solution, more to learn, enterprise-ready. React: Focused on UI, need to choose libraries, flexible.

Version Check

ng version

Shows Angular, TypeScript, Node.js versions.

Current stable: Angular 17+.

Key Takeaways

• Angular = complete framework (not just UI library)
• TypeScript-first (required)
• Components = building blocks
• Services = business logic
• CLI = powerful tooling
• Opinionated structure (good for teams)
• Perfect for enterprise applications

💡 Backend Developer Tip

Angular structure mirrors C# application structure. Controllers → Components, Services → Services, Models → Interfaces. Many concepts translate directly from .NET backend.

⚠️ Angular Learning Path

1. Components — UI building blocks
2. Templates — HTML with Angular syntax
3. Services — API calls, business logic
4. Dependency Injection — How services are provided
5. Routing — Navigation between pages
6. Forms — User input
7. Observables — Handling async data

Don't skip Observables. Core to Angular.

🤖Use AI to Learn Faster

Use ChatGPT, Claude, or Copilot to go deeper on Angular Intro. Try these prompts:

• "Why Angular instead of React?"
• "What's difference between component and service?"
• "How does dependency injection work?"
• "Quiz me on Angular basics"

💡 Tip: After reading this article, paste your own code into AI and ask "What could go wrong here and why?" — fastest way to find edge cases and deepen understanding.