මොඩියුලය 11: Advanced Topics (උසස් මාතෘකා)

සාමාන්‍යයෙන්, component එකක් template එක තුළ selector (``) එකක් ලෙස ස්ථිරවම යොදනු ලැබේ. නමුත් සමහර අවස්ථාවලදී, ධාවන වේලාවේදී (at runtime) යම් කොන්දේසියකට අනුව component එකක් load කිරීමට අවශ්‍ය වේ.

උදාහරණයක් ලෙස, පරිශීලකයාගේ ක්‍රියාවක් මත පදනම්ව විවිධ වර්ගයේ pop-up modals හෝ dashboards වලට widgets එකතු කිරීම වැනි අවස්ථාවලදී Dynamic Components භාවිතා වේ. මෙය `ViewContainerRef` භාවිතයෙන් සිදු කළ හැක.

// Conceptual Example
import { Component, ViewChild, ViewContainerRef } from '@angular/core';
import { AdBannerComponent } from './ad-banner.component';

@Component({ ... })
export class AdHostComponent {
  @ViewChild('adHost', { read: ViewContainerRef, static: true }) adHost: ViewContainerRef;

  loadAd() {
    this.adHost.clear();
    const componentRef = this.adHost.createComponent(AdBannerComponent);
    // You can now interact with the componentRef.instance
  }
}

Angular හි animation framework එක මගින් පරිශීලක අත්දැකීම (user experience) වැඩි දියුණු කරන සංකීර්ණ සහ අලංකාර animations නිර්මාණය කිරීමට ඉඩ සලසයි. මෙය CSS animations වලට වඩා ප්‍රබල වන අතර component එකේ state (තත්ත්වය) මත පදනම්ව animations පාලනය කළ හැක.

මෙය භාවිතා කිරීමට `BrowserAnimationsModule` import කළ යුතුය. Animations `trigger`, `state`, `style`, `transition`, සහ `animate` වැනි functions භාවිතයෙන් `@Component` decorator එකේ `animations` metadata එක තුළ නිර්වචනය කරයි.

@Component({
  ...
  animations: [
    trigger('openClose', [
      state('open', style({
        height: '200px',
        opacity: 1,
        backgroundColor: 'yellow'
      })),
      state('closed', style({
        height: '100px',
        opacity: 0.5,
        backgroundColor: 'green'
      })),
      transition('open => closed', [
        animate('1s')
      ]),
      transition('closed => open', [
        animate('0.5s')
      ]),
    ]),
  ],
})
export class OpenCloseComponent {
  isOpen = true;

  toggle() {
    this.isOpen = !this.isOpen;
  }
}

පෙරනිමියෙන්, Angular යෙදුමක් Client-Side Rendered (CSR) වේ. එනම්, browser එක මගින් JavaScript load කර HTML එක ගොඩනගනු ලැබේ. මෙය SEO (Search Engine Optimization) සහ ආරම්භක කාර්ය සාධනයට (initial performance) අහිතකර ලෙස බලපෑ හැක.

• Server-Side Rendering (SSR): Angular Universal භාවිතයෙන්, පරිශීලකයාට පිටුව ලැබීමට පෙර server එකේදී සම්පූර්ණ HTML පිටුව render කරනු ලැබේ. මෙය SEO සහ First Contentful Paint (FCP) වැඩි දියුණු කරයි.
• Static Site Generation (SSG): build time එකේදී සියලුම පිටු pre-render කර static HTML ගොනු ලෙස සකසයි. මෙය blogs හෝ documentation අඩවි වැනි අන්තර්ගතය නිතර වෙනස් නොවන යෙදුම් සඳහා ඉතා වේගවත් විසඳුමකි.

Angular CLI command: ng add @angular/ssr

Internationalization (i18n) යනු යෙදුම විවිධ භාෂා සහ සංස්කෘතීන් සඳහා පහසුවෙන් අනුවර්තනය කළ හැකි වන පරිදි නිර්මාණය කිරීමේ ක්‍රියාවලියයි.

Angular හි ඇති built-in i18n framework එක මගින්:

• Component templates වල ඇති text පරිවර්තනය කිරීමට.
• දිනයන් (dates), සංඛ්‍යා (numbers), සහ මුදල් (currencies) විවිධ කලාප වලට ගැලපෙන පරිදි format කිරීමට.
• බහුවචන (plurals) හැසිරවීමට.

මෙය `i18n` attribute එක template එකට එකතු කිරීමෙන් සිදු කරයි. ඉන්පසු CLI tool එකක් භාවිතයෙන් පරිවර්තන ගොනු (translation files) නිර්මාණය කළ හැක.

<h1 i18n>Hello World!</h1>

Angular මගින් පොදු web-application අවදානම් කිහිපයකින් ආරක්ෂා වීමට built-in ආරක්ෂණ යාන්ත්‍රණ සපයයි.

• Cross-Site Scripting (XSS): Angular විසින් සියලුම දත්ත default ලෙසම untrusted ලෙස සලකයි. DOM එකට යම් අගයක් bind කරන විට, Angular එය sanitize (පිරිසිදු) කර භයානක විය හැකි script tags වැනි දේ ඉවත් කරයි.
• Cross-Site Request Forgery (CSRF/XSRF): `HttpClient` මගින් CSRF حملات වැළැක්වීමට සහාය දක්වන යාන්ත්‍රණයක් සපයයි.