? ????? ?? ??? ?? ??, ??? ??? ???? ?? ? ???? ??, Angular ???????? ?? ???? ?? ??? ???????.

?? ??? ??????

?? ????? ?? ?? ??? ???? Angular ??????? ?? ?? ???? ??? ???? ?? ?? ? ?? ?? ??? ???? ? ????. ???? ?? ???? ???? ?? ??? ?? ?? ??? ???? ?? ??? ???? ?? ?? ???? ?? ??? ? ?? ?? ???? ?????. ????? ????, ?? ?? ?????? ?? ??? ?? ?? ??? ?????.

Angular? ? ?? ???? ??? ?? ??? ?? ?? ?? ???? ?? ? ??? ?? ?? ??? ??? ??? ??? ???.

?? ?? ??

?? ??? ????? ?? ??? ?? ???? ?????? ???? ??? ??? ???? ???? ???. ??? ???? ?? ???? ???? UI? ??? ??? ????? ??? ? ????.

Angular?? ?? ??? ???? ??? ?? ??? ???? ??? ????.

1??: ??? ??? ??? ??

?? ??? ????? ?? ?? ?? ???? ??? ???? ??? ???? ?????. ?:

<div>
    <router-outlet name="pages"></router-outlet>
</div>

<!-- Primary router-outlet for main content -->
<router-outlet></router-outlet>

???? ?? ?? ???? ???? ??? ???? ????. ????? ?? ??? ???? ?? ??? ???? ??? ??? ?? ???? ??? ? ????.

2??: ????? ?? ?? ??

????? ??? ???? ??? ? ??? ???? ?? ??? ?????. Angular? ?? ??? ??? ??? ???? ??? ????? ?? ???? ?????.

?:

const routes = [
    {
        path: '',
        loadComponent: () =>
            import('./pages/homepage/homepage.component').then(c => c.HomepageComponent)
    },
    {
        path: 'experience',
        loadComponent: () =>
            import('./pages/experience/experience.component').then(c => c.ExperienceComponent),
        outlet: 'pages'  // Specify the named outlet for this route
    }
];

? ????:

?? ??(? ??)? HomepageComponent? ?????.
?? ??? ExperienceComponent? ??? ???? ???? ?? ?????.

3??: ?? ?? ??

?? ??? ????? ?? ??? ?? Angular? RouterLink ???? ?????. ?? ???? ?? ??? ?? ??? ?? ???? ??? URL ??? ?????.

?:

<a [routerLink]="[{ outlets: { primary: '', pages: 'experience' } }]">Experience</a>

onNavigate(link: string) {
   this.router.navigate([{ outlets: { primary: '', pages: 'experience' } }]);
}

??? ??? ?? ??? ??(? ?? ????? ? ??) ? ???? ?????. 'experience'? ??? ??? ???? ?? ?? ??? ?????.

4??: ????? ???? ?? ??? ???

Angular? ??? ???? ???? ????? ???? ?? ??? ??? ?? ????. ?? ??? ????? ?? ???? ??? ??? ?? ?? ??? ?? ?? ??? ?? ?????.

? ??? ?? ???? ????? ???? ???? ?? ????? ExperienceComponent? ???.

???? ?? ??

????: ?? ???? ???? ?? ??? ??? ??? ????? ????? ?? ??? ?????.
?? ? ?? ??: ?? ??? ???? ??? ?? ?? ?? ? ?? ???? ?? ???? ?? ??? ??? ??? ??? ? ????.
?? ?? ?? ??: ?? ???? ??? ??? ??, ?? ?? ??? ??? ?????.

??? ?? ??:

??

Angular? ?? ??? ??????? ?? ??? ????? ??? ? ?? ??? ??? ?????. ??? ??? ???? ???? ??? ???? ??? ???? ??? ??? ??? ??? ?? ? ????. ?? ??? ?????? ??? ????? ??? ? ??? ????? ??? UI ??? ?? ??????? ?? ?????. ? ??? ???? ????? ?? ????? ??? ?? ??? ??? ? ????.

Angular ?????? ?? ??? ???? ?? ?? ? ?? ??? ??? ????? ?? ?? ??? ?? UX? ??? ? ??? ?????.

? ??? Angular? ?? ??? ?? ?????. ??? ??? PHP ??? ????? ?? ?? ??? ?????!