Hot Posts

Model 9

vmstudypoint
Document

Perfect 👌 we’ve already completed Module 1 to Module 8 (C#, .NET Core, ASP.NET, Web API, SQL, HTML, CSS, JavaScript, MVC).

Now let’s move to the last module (9): Angular Basics, and then I’ll combine all 9 modules into one long detailed revision document for you.

Module 9: Basics in Angular

Angular is a front-end framework developed by Google. It’s used to build Single Page Applications (SPAs) that are dynamic, interactive, and fast. Unlike plain JavaScript or jQuery, Angular provides data binding, dependency injection, routing, and components out of the box.

1. Angular Overview

  • SPA (Single Page Application):

    • Only one HTML page loads initially.

    • Content updates dynamically without full page reload.

  • Framework vs Library:

    • Angular is a framework (opinionated, structured).

    • React/Vue are libraries (lightweight, more flexible).

  • Language Used:

    • Angular uses TypeScript (a superset of JavaScript) for better type safety.

2. Angular Architecture

Angular apps are built using the following main parts:

  1. Modules

    • Container for components, services, directives, etc.

    • AppModule is the root module.

    • Organized using NgModule decorator.

  2. Components

    • The building blocks of Angular apps.

    • Each component has:

      • HTML template (View)

      • CSS styles (Design)

      • TypeScript class (Logic)

    • Example:

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

@Component({
  selector: 'app-hello',
  template: `
      Hello Angular!
      `,
  styles: [`h1 { color: blue; }`]
})
export class HelloComponent {}

  3. Templates

    • Define the view in HTML with Angular syntax.

    • Example:

      

      {{ title }}

  4. Directives

    • Special instructions in HTML.

    • Structural Directives: change DOM structure (*ngIf, *ngFor).

    • Attribute Directives: change element look (ngStyle, ngClass).

  5. Services

    • Used for business logic & data sharing.

    • Example: fetching data from API.

  6. Dependency Injection (DI)

    • Services are injected into components when needed.

  7. Routing

    • Angular has a Router module to navigate between views.

    • Example:

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

3. Angular Data Binding

  • Interpolation → {{ variable }}

  • Property Binding → [property]="expression"

  • Event Binding → (event)="function()"

  • Two-Way Binding → [(ngModel)]="variable"

Example:




Hello {{ username }}

4. Angular Lifecycle Hooks

Angular provides hooks to manage component lifecycle:

  • ngOnInit() → runs when component initializes.

  • ngOnChanges() → runs when data changes.

  • ngOnDestroy() → runs before component is destroyed.

5. Angular Forms

Two types:

  1. Template-driven forms (simple, use ngModel).

  2. Reactive forms (powerful, use FormGroup, FormControl).

Example:

6. Angular HTTP Client

  • Angular provides HttpClientModule for REST API calls.

  • Example:


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

constructor(private http: HttpClient) {}

getUsers() {
  this.http.get('https://jsonplaceholder.typicode.com/users')
    .subscribe(data => console.log(data));
}

7. Angular CLI

  • CLI = Command Line Interface for Angular.

  • Common commands:

    • ng new project-name → Create new project.

    • ng serve → Run app.

    • ng generate component name → Create new component.

    • ng build → Build app for production.

8. Advantages of Angular

  • Structured and powerful framework.

  • Two-way data binding.

  • Dependency Injection built-in.

  • Rich ecosystem (routing, forms, HTTP).

  • Backed by Google (long-term support).

✅ Now we have covered all 9 modules one by one.