Angular · Theory

Introduction

Theory

1/43

Introduction

Angular is a TypeScript framework for building one-page apps in the browser. You write components. Angular updates the screen when data changes. It is not ‘just HTML’ and it is not React. Google maintains it. Teams pick it when they want a full kit: routing, forms, HTTP, DI.

A fresher should say: component + template + data. App starts, Angular bootstraps one root component, that component can load others. The URL can change without a full page reload.

Board: StudentCard shows name + marks. Change marks in TypeScript. The card redraws. That is Angular at freshman size. Don’t start with NgRx on day one.

Trap: mixing AngularJS (1.x, JavaScript, $scope) with Angular (2+, TypeScript). Say ‘Angular’ for the new one. Another trap: dumping all HTML in AppComponent.

Diagram

AppComponent
     │
     ├── StudentCard
     └── MarksTable
  data change → template updates

Exam tip

SPA + TypeScript + component. Contrast with AngularJS in one line.

Example

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

@Component({
  selector: "app-root",
  template: `
    <h1>{{ title }}</h1>
    <button (click)="toggle()">Toggle</button>
    <p *ngIf="open">Panel open</p>
  `,
})
export class AppComponent {
  title = "Angular practice";
  open = true;
  toggle() {
    this.open = !this.open;
  }
}

Introduction: toggle open. Say whether the panel is on screen after one click.

Short notes

DefTypeScript SPA framework — components + templates.
RuleOne job per component. Data in TS, mark-up in HTML.
UseDashboards, campus portals, admin screens.
TrapCalling AngularJS and Angular the same thing.
ExStudentCard with name + marks.

Angular · Theory

Introduction

← All stacks

Theory

1/43

Introduction

A fresher should say: component + template + data. App starts, Angular bootstraps one root component, that component can load others. The URL can change without a full page reload.

Board: StudentCard shows name + marks. Change marks in TypeScript. The card redraws. That is Angular at freshman size. Don’t start with NgRx on day one.

Trap: mixing AngularJS (1.x, JavaScript, $scope) with Angular (2+, TypeScript). Say ‘Angular’ for the new one. Another trap: dumping all HTML in AppComponent.

Diagram

AppComponent
     │
     ├── StudentCard
     └── MarksTable
  data change → template updates

Exam tip

SPA + TypeScript + component. Contrast with AngularJS in one line.

Example

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

@Component({
  selector: "app-root",
  template: `
    <h1>{{ title }}</h1>
    <button (click)="toggle()">Toggle</button>
    <p *ngIf="open">Panel open</p>
  `,
})
export class AppComponent {
  title = "Angular practice";
  open = true;
  toggle() {
    this.open = !this.open;
  }
}

Introduction: toggle open. Say whether the panel is on screen after one click.

Short notes

DefTypeScript SPA framework — components + templates.
RuleOne job per component. Data in TS, mark-up in HTML.
UseDashboards, campus portals, admin screens.
TrapCalling AngularJS and Angular the same thing.
ExStudentCard with name + marks.

Introduction

Example

Short notes

Questions

Introduction

Example

Short notes

Questions