Angular Basics

Understanding Angular 8: How the System Works

Angular 8 is a TypeScript-based front-end framework developed by Google for building single-page applications (SPAs). It follows a component-based architecture, where an application is divided into reusable components that manage their own views and logic.

---

1. Architecture of Angular 8

Core Building Blocks

1. Modules (@NgModule)

   • Angular applications are modular and divided into modules.
   • The root module (AppModule) bootstraps the application.
   • Feature modules help in organizing code better.

2. Components (@Component)

   • Components control views and contain HTML templates, CSS styles, and logic.
   • Each component has:
     • A TypeScript file (logic)
     • An HTML template (view)
     • A CSS file (styling)

3. Templates & Data Binding

   • Defines the UI structure using HTML with Angular directives.
   • Data binding types:
     • Interpolation ({{}}) – Bind values in HTML.
     • Property Binding ([]) – Bind properties in HTML elements.
     • Event Binding (()) – Capture events like clicks.
     • Two-way Binding ([()]) – Synchronizes data between the UI and component.

4. Directives

   • Special instructions in the DOM.
   • Structural directives (*ngIf, *ngFor, *ngSwitch) modify the DOM structure.
   • Attribute directives ([ngClass], [ngStyle]) modify element appearance.

5. Services & Dependency Injection (@Injectable)

   • Services are reusable classes that handle business logic and API calls.
   • Dependency Injection (DI) allows services to be injected into components.

6. Routing (RouterModule)

   • Allows navigation between pages without reloading.
   • Uses RouterModule with route configurations in app-routing.module.ts.

7. Pipes

   • Transform data before displaying it in the view (date, currency, uppercase).

8. Forms

   • Template-driven forms (ngModel) for simple forms.
   • Reactive forms for complex, dynamic forms.

---

2. How Angular 8 Works Internally

Application Bootstrapping

1. The main entry point (main.ts) calls bootstrapModule(AppModule).
2. AppModule (root module) loads the root component (AppComponent).
3. The Router Module initializes the routes (if configured).
4. Angular renders the view based on the component’s template.

Component Rendering & Change Detection

• Angular uses a Virtual DOM and Zone.js for change detection.
• When data changes, Angular updates only the affected parts instead of re-rendering the entire page.

Service & Dependency Injection

• Services are provided at the module level (providedIn: 'root').
• DI allows services to be shared across components.

Lazy Loading for Performance

• Modules can be loaded on demand using loadChildren in routing.
• Improves app performance by reducing initial load time.

---

3. Key Features in Angular 8

• Ivy Renderer (Faster, smaller bundles, better debugging).
• Lazy Loading with Dynamic Imports.
• Differential Loading (Modern vs. legacy browser builds).
• Web Worker Support (Improved performance for CPU-intensive tasks).

---

4. How Angular 8 Works with APIs

• Uses HttpClientModule for making API calls.
• Handles CRUD operations with services and Observables.

Would you like a code example for any of these concepts?

AngularJS - 1.x - JavaScript based Client MVC, no mobile, no SEO no lazy loading, no CLI, Controller based

Angular - 2 and above - Typescript based Server-Client, mobile(ionic), SEO, Lazy loading CLI, Component based

Lifecycle:

1. View html css

2. Modal ts

3. Component binds view and model - {{}}, two way [()], [] mv, () event

4. View - SAC directives - Structural ngfor Attributes {{}} Component 

5. Modules -  group of components 

6. Services - logging, http, db

7. DI - inject services in to modules - using Providers - provide - useclass - in ngmodule - constructor in components  

Lifecycle of angular components:

1. Creation - init and dependency 

2. Change detected - changes in data Bound comp

3. Render - component template render or updated 

4. Destruction - destroy cleanup

Angular directives: gives direction to the html code

SAC

Structural - ngfor - gives structure to html - starts with * or provide in template

Attributes - hidden - variables to html

Component - .html/.ts @component - user defined UI 

TypeScript - superset of JS - add type - var s:number =10 - good error validation - object oriented 

@Angular/CLI - ready to use autogenerated project - ng new myApp 

@ngmodule (decorator) - Module - group of components - @component (decorator) binds view and model

Routes - 2 types

Routerlink and routeroutlet in HTML

This Routes.navigate in components

Ngserve - in memory

Ngbuild - disk

-- prod flag - Removes command and compressed ready for prod

Pipe - modify data before rendering to user - uppercase currency number

Custom pipe - 1. create pipeclass, 2. use cli generate pipe - @NgModule({

 `imports: [BrowserModule, FormsModule],

  declarations: [AppComponent, RandomPipe],

  bootstrap: [AppComponent]

})




Custom Components -

Angular 16 features:

Angular signals

Router inputs 

Required inputs

DestroyRef in lifecycle 

Standalone project support

Testing karma mock