Angular Introduction.

This tutorial introduces Angular step by step, from fundamentals to core concepts.

---

1. What is Angular?

Angular is a TypeScript-based front-end framework developed by Google for building single-page web applications (SPAs).

• Component-based architecture
• Uses TypeScript
• Two-way data binding
• Powerful CLI

---

2. Installing Angular

Install Node.js first, then install Angular CLI:

npm install -g angular/cli

Create and run an Angular project:

ng new my-angular-app
cd my-angular-app
ng serve

Open http://localhost:4200 in your browser.

---

3. Angular Project Structure

• src/app – Application code
• app.component.ts – Root component
• app.component.html – Component template
• app.module.ts – Root module

---

4. Angular Components

Components control a part of the UI.

import { Component } from 'angular/core';

Component({
  selector: 'app-hello',
  template: '
Hello Angular
'
})
export class HelloComponent { }

Using a Component

< app-hello >

---

5. Templates and Interpolation

export class AppComponent {
  title = 'My Angular App';
}

{{ title }}

---

6. Data Binding

One-Way Binding

Two-Way Binding

Hello {{ username }}

---

7. Directives

Structural Directives

Welcome User


{{ item }}

Attribute Directive

Styled Text

---

8. Services

Services share data and logic across components.

import { Injectable } from angular/core';

Injectable({
  providedIn: 'root'
})
export class DataService {
  getMessage() {
    return 'Hello from Service';
  }
}

Using a Service

constructor(private dataService: DataService) {}

message = this.dataService.getMessage();

---

9. Routing

import { RouterModule, Routes } from 'angular/router';

const routes: Routes = [
  { path: '', component: HomeComponent },
  { path: 'about', component: AboutComponent }
];

---

10. Forms

Template-Driven Form

Submit

Reactive Form

this.form = new FormGroup({
  name: new FormControl('')
});

---

11. HTTP Client

import { HttpClient } from 'angular/common/http';

constructor(private http: HttpClient) {}

this.http.get('https://api.example.com/data')
  .subscribe(data => console.log(data));

---

12. Lifecycle Hooks

import { OnInit } from 'angular/core';

export class AppComponent implements OnInit {
  ngOnInit() {
    console.log('Component Initialized');
  }
}

---

13. Pipes

{{ today | date }}
{{ name | uppercase }}

---

14. Building and Deployment

ng build --prod

Output will be in the dist/ folder.

---

15. Conclusion

Angular is a powerful framework for building scalable and maintainable web applications.

Next Topics to Learn:

• Lazy Loading
• State Management (NgRx)
• Angular Signals
• Authentication
• Performance Optimization

---