Basic Angular

Basic Angular: A Beginner's Guide

What is Angular?

Angular is a robust, open-source JavaScript framework maintained by Google, designed for building dynamic, single-page web applications (SPAs). It adopts a component-based architecture, making it easier to develop, maintain, and scale applications. Angular is written in TypeScript, providing enhanced tools and features like static typing and decorators.

This guide covers the basic concepts and essential features of Angular for beginners.

Key Features of Angular

1. Component-Based Architecture
   Angular applications are composed of components, where each component manages a specific view or UI part.

2. Two-Way Data Binding
   Angular synchronizes the model and view automatically. Changes in the UI update the data model and vice versa.

3. Dependency Injection (DI)
   Angular uses DI to manage the lifecycle and dependencies of services, improving code modularity and testing.

4. Directives
   Angular provides built-in directives to dynamically manipulate the DOM (*ngIf, *ngFor, etc.) and custom directives for extended functionality.

5. Routing
   Angular Router enables navigation between different views or pages in a single-page application.

6. Modularity
   Angular applications are modular and organized into NgModules for better scalability and reusability.

Basic Building Blocks

1. Modules
   Angular modules are containers for related components, directives, services, and other features. Every Angular application has at least one root module, typically called AppModule.

   Example:

   typescript

   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 {}
   

2. Components
   Components define the UI and associated logic. They include a template, a class (logic), and optionally, styles.

   Example:

   typescript

   import { Component } from '@angular/core';
   
   @Component({
     selector: 'app-root',
     template: '<h1>{{ title }}</h1>',
     styles: ['h1 { color: blue; }'],
   })
   export class AppComponent {
     title = 'Welcome to Angular!';
   }
   

3. Templates
   Templates define the HTML structure and link it with the application logic using Angular’s syntax.

   Example:

   html

   <h1>{{ title }}</h1>
   <button (click)="changeTitle()">Click Me</button>
   

   Component Logic:

   typescript

   changeTitle() {
     this.title = 'Title Updated!';
   }
   

4. Directives
   Directives are used to extend HTML with custom behaviors.

   Example - Structural Directive (*ngIf):

   html

   <p *ngIf="isVisible">This paragraph is conditionally visible.</p>
   

   Example - Attribute Directive (ngStyle):

   html

   <p [ngStyle]="{'color': textColor}">Styled Text</p>
   

5. Services and Dependency Injection
   Services provide reusable logic and share data across components. Angular’s DI injects services wherever needed.

   Example:

   typescript

   import { Injectable } from '@angular/core';
   
   @Injectable({
     providedIn: 'root',
   })
   export class DataService {
     getData() {
       return ['Angular', 'React', 'Vue'];
     }
   }
   

6. Routing
   Angular’s Router allows navigation between different views.

   Example:

   typescript

   import { RouterModule, Routes } from '@angular/router';
   import { HomeComponent } from './home/home.component';
   
   const routes: Routes = [
     { path: '', component: HomeComponent },
   ];
   
   @NgModule({
     imports: [RouterModule.forRoot(routes)],
     exports: [RouterModule],
   })
   export class AppRoutingModule {}
   

7. Data Binding
   Data binding links the component logic and template.

   • Interpolation:
     html

     <p>{{ message }}</p>
     

   • Property Binding:
     html

     <img [src]="imageUrl">
     

   • Event Binding:
     html

     <button (click)="onClick()">Click Me</button>
     

   • Two-Way Binding:
     html

     <input [(ngModel)]="name">
     

Benefits of Angular

1. Efficient Development: Component-based structure speeds up development and testing.
2. Cross-Platform: Angular supports web, mobile, and desktop applications.
3. Enhanced Productivity: Tools like Angular CLI automate common development tasks.
4. Scalability: Modular architecture allows Angular applications to scale efficiently.

Setting Up a Basic Angular Project

1. Install Angular CLI:

   bash

   npm install -g @angular/cli
   

2. Create a New Angular Project:

   bash

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

3. Run the Application:

   bash

   ng serve
   

4. View in Browser:
   Open http://localhost:4200 to view your Angular app.