The Angular framework

What is Angular ?

Angular is a TypeScript-based web application framework developed by Google. It's mainly used to build single-page applications (SPAs) — websites that dynamically update the page without reloading it.
  • It's component-based: You build the app with small, reusable building blocks (components).
  • It uses two-way data binding, dependency injection, routing, and services.
  • Angular provides a powerful CLI (Command Line Interface) to automate tasks like project creation, component generation, building, and testing.

Most Important Features of Angular

  • Components: Reusable UI building blocks
  • Templates: HTML mixed with Angular syntax (binding)
  • Modules: Group components and services
  • Services & Dependency Injection: Share logic/data between components
  • Routing: Navigate between views
  • Forms: Powerful forms management (template-driven & reactive)
  • HTTP Client: Communicate with backends easily
  • Reactive programming with Observables
  • CLI Tools: Automate project scaffolding and builds

Steps to Develop an Angular Application

  1. Install Node.js and Angular CLI
  2. Create a new Angular project
  3. Understand the structure
  4. Create components
  5. Use services (for logic and data sharing)
  6. Add routing (optional)
  7. Run and build the application

Step-by-step tutorial: create a simple app

  1. Install Node.js and Angular CLI
    • Install Node.js from https://nodejs.org/
    • Install Angular CLI: npm install -g @angular/cli
  2. Create a New Angular Project 
    
ng new task-manager
cd task-manager
ng serve
    Visit http://localhost:4200 — you should see "Welcome to task-manager!".

Understand the Project Structure

  • src/app/app.component.ts — root component (main UI)
  • src/app/app.module.ts — defines modules, imports, declarations
  • src/app — where you'll add your new components and services

Create a New Component task-list


ng generate component task-list
# or shortcut
ng g c task-list
This creates:
  • task-list.component.ts - the functionality of the component
  • task-list.component.html - the html content of the component
  • task-list.component.css - the design of the component

Add Basic Code to the Component

Edit task-list.component.ts: 

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

@Component({
	selector: 'app-task-list',
	templateUrl: './task-list.component.html',
	styleUrls: ['./task-list.component.css']
})
export class TaskListComponent {
	tasks: string[] = ['Learn Angular', 'Build a project', 'Deploy app'];

	addTask(newTask: string) {
	if (newTask) {
		this.tasks.push(newTask);
	}
	}
}

Edit task-list.component.html of the component


<h2>Task Manager</h2>

<input #taskInput placeholder="Add a new task">
<button (click)="addTask(taskInput.value); taskInput.value=''">Add Task</button>

<ul>
	<li *ngFor="let task of tasks">
	{{ task }}
	</li>
</ul>

Show Your Component in the App

Open app.component.html and replace its content: 

<app-task-list></app-task-list>

Add a Service

  • Create the service: 
    
ng generate service task
# or shortcut
ng g s task
  • Edit task.service.ts: 
    
import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root'
})
export class TaskService {
  private tasks: string[] = [];

  getTasks() {
    return this.tasks;
  }

  addTask(task: string) {
    if (task) {
      this.tasks.push(task);
    }
  }
}

Architecture summary


TaskManagerApp
├── AppComponent
│    └── TaskListComponent
│         └── Uses TaskService for data