Angular A-Z: Ինչպես Ստեղծել և Ավարտել Հասարակ Նախագիծ

Angular-ը Google-ի մշակած TypeScript-հիմքով ֆրեյմվորք է, որը նախատեսված է մասշտաբային վեբ հավելվածներ ստեղծելու համար։ Այս հոդվածում մենք կանցնենք Angular-ի ամբողջական գործընթացով՝ A-ից Z, և կստեղծենք հասարակ նախագիծ։

1. Տեղակայում

Տեղադրիր Node.js (եթե դեռ չունես)

    node -v

Եթե չունես, ներբեռնիր Node.js պաշտոնական կայքից։

Տեղադրիր Angular CLI

    npm install -g @angular/cli

2. Angular CLI-ի Հիմնական Հրամանները

Angular CLI-ն (Command Line Interface) թույլ է տալիս հեշտությամբ ստեղծել, կարգավորել և կառավարել Angular նախագծերը։ Ահա հիմնական հրամանները․

Նոր նախագիծ ստեղծելու համար

    ng new project-name

Այս հրամանը կստեղծի նոր Angular նախագիծ և կտեղադրի անհրաժեշտ կախվածությունները։

Նախագիծը գործարկելու համար

    ng serve

Սա կգործարկի development սերվերը և կհասանելի դարձնի այն http://localhost:4200 հասցեում։

Կոմպոնենտ ստեղծելու համար

    ng generate component component-name

կամ կարճ՝

    ng g c component-name

Սերվիս ստեղծելու համար

    ng generate service service-name

կամ կարճ՝

    ng g s service-name

Մոդուլ ստեղծելու համար

    ng generate module module-name

կամ կարճ՝

    ng g m module-name

Նախագիծը բիլդ անելու համար

    ng build

Production-ի համար՝

    ng build --configuration production

3. Ստեղծել նոր Angular ծրագիր

    ng new my-angular-app

1. my-angular-app – քո նախագծի անունն է։
2. Երբ հարցնում է Would you like to add Angular routing?, ընտրիր Yes։
3. Which stylesheet format would you like to use?, ընտրիր CSS կամ SCSS, որը նախընտրելի է ձեզ համար։

4. Մուտք գործել նախագծի պանակ և գործարկել

    cd my-angular-app
    ng serve

Սա կբացի http://localhost:4200։

5. Angular-ի Հիմնական Բաղադրիչները

📌 Ինչ է Կոմպոնենտը (Component)?

Կոմպոնենտը Angular-ի հիմնական բաղադրիչն է, որը ներկայացնում է UI-ի որոշակի մասը։ Այն բաղկացած է երեք հիմնական ֆայլերից՝

1. .ts ֆայլ՝ լոգիկայի համար (TypeScript)
2. .html ֆայլ՝ տեսքի համար (Template)
3. .css/.scss ֆայլ՝ ձևավորման համար (Styles)

Ստեղծելու համար օգտագործիր՝

    ng generate component components/example

Կոմպոնենտի կոդի օրինակ՝

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

    @Component({
      selector: 'app-example',
      templateUrl: './example.component.html',
      styleUrls: ['./example.component.css']
    });
    
    export class ExampleComponent {
      message: string = 'Բարև Angular';
    }

📌 Ինչ է Մոդուլը (Module)?

Angular-ը կառուցվում է մոդուլների վրա (NgModule)։ Յուրաքանչյուր մոդուլ հավաքում է կոմպոնենտներ, սերվիսներ և այլ ռեսուրսներ։ Հիմնական մոդուլը AppModule-ն է՝

    import { NgModule } from '@angular/core';
    import { BrowserModule } from '@angular/platform-browser';
    import { AppComponent } from './app.component';
    
    @NgModule({
      declarations: [AppComponent],
      imports: [BrowserModule],
      providers: [],
      bootstrap: [AppComponent]
    })
    export class AppModule {}

📌 Ինչ է Սերվիսը (Service)?

Սերվիսները (Services) նախատեսված են տվյալների փոխանակման, API հարցումների և ընդհանուր գործառույթների համար։ Ստեղծելու համար օգտագործիր՝

    ng generate service services/data

Օրինակ՝

    import { Injectable } from '@angular/core';
    @Injectable({ providedIn: 'root' })
    export class DataService {
      getData() {
        return ['Տվյալ 1', 'Տվյալ 2', 'Տվյալ 3'];
      }
    }

6 Ռոուտինգ Angular-ում

Angular Router-ը կառավարում է հավելվածի էջերը։ Ռոուտ ավելացնելու համար բացիր app-routing.module.ts և ավելացրու՝

    import { NgModule } from '@angular/core';
    import { RouterModule, Routes } from '@angular/router';
    import { ExampleComponent } from './components/example/example.component';
    
    const routes: Routes = [
      { path: 'example', component: ExampleComponent },
      { path: '', redirectTo: '/example', pathMatch: 'full' },
      { path: '**', component: ExampleComponent } // 404 էջի համար
    ];
    
    @NgModule({
      imports: [RouterModule.forRoot(routes)],
      exports: [RouterModule]
    })
    export class AppRoutingModule {}

📌 Ռոուտեր Լինկեր (Router Links)

Նավիգացիայի համար routerLink օգտագործիր՝

    < a routerLink="/example">Գնալ Example էջ <a>

📌 Դինամիկ Ռոուտեր

Եթե անհրաժեշտ է փոխանցել տվյալներ ռոուտի միջոցով՝

    const routes: Routes = [
      { path: 'user/:id', component: UserComponent }
    ];

Օգտագործող ID-ն ստանալու համար՝

    import { ActivatedRoute } from '@angular/router';

    constructor(private route: ActivatedRoute) {}
    
    ngOnInit() {
      const userId = this.route.snapshot.paramMap.get('id');
    }

7. Վիրտուալ DOM Angular-ում

Վիրտուալ DOM-ը (Virtual DOM) հանդիսանում է իրական DOM-ի օպտիմիզացված տարբերակը։ Այն ստեղծվում է որպես օբյեկտի մոդել JavaScript հիշողության մեջ և օգտագործվում է փոփոխությունների արդյունավետ կառավարելու համար։

📌 Ինչպես է աշխատում Վիրտուալ DOM-ը Angular-ում

1. Երբ Angular-ը փոփոխում է կոմպոնենտի տվյալները, այն սկզբում ստեղծում է վիրտուալ DOM-ի նոր տարբերակը։
2. Այնուհետև համեմատում է նոր և հին վիրտուալ DOM-երը՝ գտնելով տարբերությունները։
3. Միայն տարբերությունները են կիրառվում իրական DOM-ի վրա՝ նվազեցնելով փոփոխությունների քանակը և բարելավելով արտադրողականությունը։

📌 Change Detection (Փոփոխությունների հայտնաբերում)

Angular-ն օգտագործում է Change Detection Mechanism, որը հայտնաբերում է տվյալների փոփոխությունները և թարմացնում միայն այն DOM տարրերը, որոնք անհրաժեշտ են։

📌 Ivy Render Engine

Վերջին տարբերակներում Angular-ն օգտագործում է Ivy շարժիչը, որը փոքրացնում է bundle size-ը և արագացնում է rendering-ը՝ վիրտուալ DOM-ի օպտիմալացմամբ։

Հոդվածը կարդալու հարց կառաջանա թե՞ ինչ է դեկորատորները։ Այժմ կխոսենք դեկորատորների մասին և դրանց կիրառումը Angular-ում։

8 Դեկորատորներ՝ ընդհանուր բնութագրում

Դեկորատորները TypeScript-ում (ինչպես նաև JavaScript-ում) այնպիսի ֆունկցիաներ են, որոնք կիրառվում են class-ների, մեթոդների, հատկությունների կամ պարամետրերի վրա՝ որոշակի վարքագիծ ավելացնելու համար։ Դրանք հիմնականում օգտագործվում են մետա-կոդ օբյեկտների վրա, որոնք չեն փոփոխում տվյալների արժեքը, այլ միայն ավելացնում են նրանց նոր գործառույթներ կամ հատկություններ։ Դեկորատորները կարող են փոփոխել իրենց վրա կիրառվող օբյեկտի պահվածքը՝ վերածելով այն այլ interface-ով։

TypeScript-ը, որպես JavaScript-ի լրացում, իրականացնում է դեկորատորների համակարգը, որն աշխատում է նաև որպես մետա-կոդ ստեղծման գործիք։ Դեկորատորները հաճախ օգտագործվում են հիմնականում class-ների համար, սակայն դրանք կարող են կիրառվել նաև մեթոդների կամ պարամետրերի վրա։

9 Դեկորատորների կիրառումը Angular-ում

Angular-ը, որպես առաջադեմ JavaScript/TypeScript framework, լայնորեն օգտագործում է դեկորատորներ։ Դրանք Angular-ի հիմնական առանձնահատկություններից են և թույլ են տալիս հեշտությամբ աշխատել տարաբնույթ մոդուլների, կոմպոնենտների, սերվիսների և այլ կառուցվածքների հետ։ Նույնիսկ անգուլարային ֆունկցիոնալության համար, ինչպիսիք են Dependency Injection և կոնֆիգուրացիաները։

Երկու հիմնական պատճառ, թե ինչու Angular-ը օգտագործում է դեկորատորներ՝

1. Կոդի պարզություն և հստակություն. Դեկորատորները թույլ են տալիս գրել մաքուր, կարճ և ընթեռնելի կոդ՝ առանձնացնելով ամենը հատուկ հատկանիշների մեջ։
2. Կոդի վերամշակում և ընդլայնում. Դեկորատորները Angular-ում արագ փոփոխությունների և ընդլայնումների հնարավորություններ են տալիս՝ առանց հսկայական վերակազմակերպման կարիքի։

10 Անգուլարում դեկորատորների կիրառման օրինակներ

@Component

Դեկորատորը կիրառվում է class-ի վրա՝ փոխելով այն Angular կոմպոնենտի։ Կոմպոնենտը այն մաս է, որը մոդելավորում է UI-ի մասերը՝ տեքստեր, պատկերներ կամ կոճակներ։ Օրինակ՝

    @Component({
        selector: 'app-root',
        templateUrl: './app.component.html',
        styleUrls: ['./app.component.css']
    })
    export class AppComponent {
      title = 'My Angular App';
    }

@Injectable

Այս դեկորատորը օգտագործվում է Angular-ի սերվիսների վրա՝ նշելով, որ այն պետք է կարողանա մուտք գործել Angular-ի Dependency Injection համակարգ։ Օրինակ՝

    @Injectable({
      providedIn: 'root'
    })
    export class MyService {
      constructor() { }
    }

@NgModule

Ասում է Angular-ին, որ տվյալ class-ը մոդուլ է, որի մեջ կարող են լինել կոմպոնենտներ, սերվիսներ և այլ տարրեր։ Օրինակ՝

    @NgModule({
      declarations: [AppComponent],
      imports: [BrowserModule],
      providers: [],
      bootstrap: [AppComponent]
    })
    export class AppModule { }

@Input

Այս դեկորատորը օգտագործվում է child կոմպոնենտում՝ հատկությունների արժեքներ փոխանցելու համար parent կոմպոնենտից։ Օրինակ՝

    @Component({
      selector: 'app-child',
      template: '<հ2>{{childData}}</h2>'
    })
    export class ChildComponent {
      @Input() childData: string = '';
    }

@Output

Այս դեկորատորը օգտագործվում է դուստր կոմպոնենտից արժեքներ ուղարկելու համար։ Օրինակ՝

    @Component({
      selector: 'app-child',
      template: `< button (click)="sendData()">Send Data`
    })
    export class ChildComponent {
      @Output() dataSent = new EventEmitter();
    
      sendData() {
        this.dataSent.emit('Data from child');
      }
    }

Այսպիսով դուք ստացաք տարրական տեղկատվություն angular-ի մասը իսկ մի ոքր օրինակ դուք կարող եք տեսնել իմ GitHub  - ում։