Jassif Team Institution

Angular State Management

நிலை மேலாண்மை தரவு காலப்போக்கில் எவ்வாறு மாறுகிறது என்பதை ஒழுங்கமைக்கிறது.

State Management Essentials

Local first: கூறு சிக்னல்களுடன் தொடங்கவும்; பகிர்வு தேவைப்படும்போது மட்டுமே ஒரு சேவைக்கு (ஸ்டோர்) மேம்படுத்தவும்.

Signals: உள்ளூர் மற்றும் சேவை-ஆதரவு நிலைக்கு signal() பயன்படுத்தவும்; computed() மூலம் பெறவும்.

Interop: ஸ்ட்ரீம் குறிப்பியல் தேவைப்படும்போது மட்டுமே RxJS பயன்படுத்தவும்; உலகளாவிய நிலையை குறைவாக வைத்திருங்கள்.

import { Injectable, signal, computed, inject } from '@angular/core';

@Injectable({ providedIn: 'root' })
class CounterStore {
  count = signal(0);
  double = computed(() => this.count() * 2);
  inc() { this.count.update(n => n + 1); }
}

// Component: const store = inject(CounterStore);

Service-backed Signals (Store)

கூறுகளுக்கு இடையே பகிர்வதற்கு நிலையை ஒரு சேவைக்கு உயர்த்தவும்.

இது மறுபயன்பாட்டை மேம்படுத்துகிறது.

import { Injectable, signal, inject } from '@angular/core';

@Injectable({ providedIn: 'root' })
class CounterStore {
  count = signal(0);
  inc() { this.count.update(n => n + 1); }
}

// Component usage
class App { store = inject(CounterStore); }

import { bootstrapApplication } from '@angular/platform-browser';
import { Component, Injectable, signal, inject } from '@angular/core';

@Injectable({ providedIn: 'root' })
class CounterStore {
  count = signal(0);
  inc() { this.count.update(n => n + 1); }
}

@Component({
  selector: 'app-root',
  standalone: true,
  template: `
    <h3>Service with Signals</h3>
    <p>Count: {{ store.count() }}</p>
    <button (click)="store.inc()">Increment</button>
  `
})
class App { store = inject(CounterStore); }

bootstrapApplication(App);

Local vs Global State

இணைப்பைக் குறைக்க பெரும்பாலான நிலையை கூறுகளுக்கு உள்ளூராக வைத்திருங்கள்.

பல அம்சங்களுக்குத் தேவைப்படும்போது மட்டுமே பகிரப்பட்ட சேவைக்கு மேம்படுத்தவும்.

தனிமைப்படுத்துதல் விரும்பப்படும் போது வழங்குநர்களை அம்சம்/பாதை நிலையில் நோக்குநிலைப்படுத்தவும்.

import { provideRouter, Routes } from '@angular/router';

const routes: Routes = [
  { path: '', component: Home, providers: [CounterStore] }
];

bootstrapApplication(App, { providers: [provideRouter(routes)] });

State Management Patterns

நிலை மேலாண்மை வினாடி வினா