Angular Introduction

1. What is Angular?

Angular is a component-based framework for developing web applications. It simplifies the process of building dynamic web apps by providing powerful tools for data binding, dependency injection, and routing.

✅ Key Features of Angular:
✔️ Component-Based Architecture – Applications are divided into reusable components.
✔️ Two-Way Data Binding – Synchronizes data between the model and view.
✔️ Dependency Injection – Manages dependencies efficiently.
✔️ Modular Development – Code is organized into modules for better scalability.
✔️ Built-in Routing – Provides navigation for single-page applications.
✔️ RxJS for Reactive Programming – Handles asynchronous data streams efficiently.

2. Setting Up Angular

To start using Angular, you need to install Node.js and the Angular CLI (Command Line Interface).

Step 1: Install Node.js

Download and install Node.js from nodejs.org.

Step 2: Install Angular CLI

Run the following command to install Angular globally:

npm install -g @angular/cli

Verify the installation:

ng version

3. Creating Your First Angular App

Step 3: Create a New Angular Project

Run the following command to create a new Angular application:

ng new my-angular-app

Navigate into the project folder:

cd my-angular-app

Start the development server

ng serve

4. Understanding Angular Components

Step 4: Create a New Component

Angular applications are built using components. To generate a new component, use:

ng generate component my-component

This creates:

my-component.component.ts – The logic file
my-component.component.html – The template file
my-component.component.css – The styling file
my-component.component.spec.ts – The testing file

Example of a simple component:

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

@Component({
  selector: 'app-my-component',
  template: `<h2>Welcome to Angular!</h2>`,
  styles: [`h2 { color: blue; }`]
})
export class MyComponent { }

Use this component in app.component.html:

<app-my-component></app-my-component>

✅ Why Use Components?
✔️ Makes the application modular and reusable
✔️ Improves maintainability

5. Angular Modules and Services

Step 5: Understanding Modules

Every Angular app has a root module, AppModule, which is defined in app.module.ts. Modules help organize code into functional sections.

Example of a module:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule],
  bootstrap: [AppComponent]
})
export class AppModule { }

ng generate service my-service

Example service (fetching data from an API):

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Injectable({
  providedIn: 'root'
})
export class MyService {
  constructor(private http: HttpClient) { }

  getData() {
    return this.http.get('https://jsonplaceholder.typicode.com/posts');
  }
}

Use the service in a component:

import { Component, OnInit } from '@angular/core';
import { MyService } from './my-service.service';

@Component({
  selector: 'app-root',
  template: `<ul><li *ngFor="let post of posts">{{ post.title }}</li></ul>`
})
export class AppComponent implements OnInit {
  posts: any[] = [];

  constructor(private myService: MyService) {}

  ngOnInit() {
    this.myService.getData().subscribe(data => this.posts = data);
  }
}

✅ Why Use Services?
✔️ Separates business logic from components
✔️ Makes code reusable and maintainable

Conclusion

Angular is a powerful and scalable framework for building modern web applications. It provides a structured approach with components, modules, and services, making development efficient and maintainable.

✅ Key Takeaways:
✔️ Angular follows a component-based architecture for modular development.
✔️ The Angular CLI simplifies project setup and development.
✔️ Services and dependency injection help manage data efficiently.
✔️ Angular applications are scalable and suitable for large projects.

ANGULAR