Angular 2: Direktivat

Ne kemi funksionuar aplikacionin tonë këndor! Tani është koha të fillojmë të bashkojmë librin tonë të telefonit. Sot do të përqendrohemi në direktivat, duke bërë një formular bazë dhe në lidhjen e të dhënave.

Direktivat

Direktivat modifikojnë DOM - ai shtrin sjellje shtesë në elementët e synuar të DOM. Ekzistojnë 3 lloje të direktivave: Direktivat përbërëse, strukturore dhe direktivat e atributeve. Një direktivë komponentësh është më e përdorura dhe injekton një shabllon në një komponent të caktuar. Direktivat strukturore janë direktiva që ndryshojnë paraqitjen e DOM-it, shembujt janë *ngFor dhe *ngIf. Direktivat e atributeve ndryshojnë stilin ose sjelljen e një elementi.

2 llojet e direktivave që do të prekim sot janë direktivat përbërëse dhe strukturore. Ne do të shtojmë direktiva në "komponentët" që kemi ndërtuar tashmë.

app.component.ts
import {Component} from '@angular/core';
import {AddContactComponent} from './add-contact.component';
import {ContactsComponent} from './contacts.component';
@Component({
  selector: 'app',
  template: `<h1> Phone Book </h1>
             <add-contact></add-contact>
             <contacts></contacts>`,
  directives: [AddContactComponent, ContactsComponent]
});
export class AppComponent { }

Në skedarin tonë kryesor AppComponent, ne do të injektojmë direktiva të 2 komponentëve në AppComponent tonë. Injektimi i komponentëve lejon ripërdorimin dhe një strukturë skedari shumë të lexueshëm.

Komponenti AddContact është thjesht një formë.

add-contact.component.ts
import {Component} from '@angular/core';
@Component({
 selector: ‘add-contact’,
 templateUrl: 'app/add-contact.component.html'
})
export class AddContactComponent {
  onSubmit(form) {
    console.log(form)
  }
}

Në vend që t'i jepni një shabllon të integruar dekoruesit tonë të komponentëve, një opsion dytësor është të shtoni një templateUrl — kjo do të rrisë shkallëzueshmërinë e aplikacionit tonë veçanërisht nëse shablloni ynë është mjaft i madh, si një formë.

app/add-contact.component.html
<form #form=”ngForm” (ngSubmit)=”onSubmit(form.form)”>
  <div class=”form-group col-xs-12">
    <div class=”col-xs-6">
      <label for=”firstName”> First Name </label>
      <input 
        ngControl=”firstName” 
        #firstName=”ngForm”
        id=”firstName”
        type=”text”
        class=”form-control”
        required
      />
      <div
        class=”alert alert-danger”
        *ngIf=”firstName.touched && !firstName.valid”
      >
        First name is required.
      </div>
    </div>
    <div class=”col-xs-6">
      <label for=”lastName”> Last Name </label>
      <input
        ngControl=”lastName”
        id=”lastName”
        type=”text”
        class=”form-control”
      />
    </div>
  </div>
  <div class=”form-group col-xs-12">
    <div class=”col-xs-6">
      <label for=”phoneNumber”> Phone Number </label>
      <input
        ngControl=”phoneNumber”
        #phoneNumber=”ngForm”
        id=”phoneNumber”
        type=”text”
        class=”form-control”
        minlength=”10"
        maxlength=”12"
        required
      />
      <div *ngIf=”phoneNumber.touched && phoneNumber.errors”>
        <div
          class=”alert alert-danger”
          *ngIf=”phoneNumber.errors.minlength”
        >
          Phone number must be at least 10 digits.
        </div>
      </div>
    </div>
    <div class=”col-xs-6">
      <button class=”btn btn-primary btn-block” type=”submit”   [disabled]=”!form.valid”> Submit </button>
    </div>
  </div>
</form>

Të dhënat e detyrueshme! Katër lloje të lidhjes së të dhënave: interpolimi, lidhja e vetive, lidhja e ngjarjeve dhe lidhja me dy drejtime.

Interpolimi — {{ vetia }}, duke pasur parasysh një veçori midis dy grupeve të kllapave kaçurrelë, vlera e asaj vetie jepet.
Veprimtaria e detyrueshme — përfshin klasën lidhja dhe lidhja stiluese. Kjo është lidhëse njëkahëshe që do të thotë se të dhënat rrjedhin nga komponenti në elementin e synuar DOM. Lidhjet e vetive janë mbështjellë në një [ ].
Lidhja e ngjarjeve — përdoruesi do të aktivizojë ngjarjet që kthehen në komponent. Lidhja e ngjarjes është gjithashtu njëkahëshe, por nga elementi te komponenti. Lidhjet e ngjarjeve janë mbështjellë në një ( ).
Lidhja me dy drejtime — lidhja e dashur dykahëshe që na pëlqen nga AngularJS! Për të arritur lidhjen e dyanshme në Angular2, duhet ta specifikojmë atë me ngModel(direktivë). Ndryshimet në DOM pasqyrohen në komponent. Është një kryqëzim midis lidhjes së ngjarjeve dhe lidhjes së pronës, kështu që le t'i bashkojmë të dyja! Lidhjet me dy drejtime mbështillen në një [(ngModel)].

Angular na siguron një klasë kontrolli (ngControl) që përfaqëson një fushë të vetme hyrëse të një forme. Duke pasur parasysh klasat e shumta të kontrollit në një formë, çdo formë është një grup kontrolli. Me ngControl, duhet të caktohet një ndryshore e përkohshme lokale në mënyrë që Angular të mund të lidhë lidhjen. Në shembullin e mëposhtëm, ngControl=“firstName” dhe #firstName=“ngForm” deklaron lidhjen. # para firstName do të thotë që firstName është një ndryshore e përkohshme lokale.

<input 
  ngControl=”firstName” 
  #firstName=”ngForm”
  id=”firstName”
  type=”text”
  class=”form-control”
  required
/>

Formularët na japin qasje në metodat vendase:

<div
  class=”alert alert-danger”
  *ngIf=”firstName.touched && !firstName.valid”
>
  First name is required.
</div>

ngIf: Ne mund të shtojmë një nënpemë elementi (një element dhe fëmijët e tij) në DOM duke lidhur një NgIfdirective me një shprehje të vërtetë. -këndor.io

Përfshirja e * përpara ngIf, ngFor dhe ngSwitch bën të ditur Angular se këto direktiva janë pjesë e shabllonit. Këto direktiva janë shembuj të direktivave strukturore. Nëse kushtet janë të vërteta, div do të jepet… përndryshe, asgjë nuk ndodh.

<form #form=”ngForm” (ngSubmit)=”onSubmit(form.form)”>

Një ngjarje klikimi është krijuar në rreshtin e parë në formën tonë. Duke thirrur nëSubmit me argumentin, form.form nxjerr vlerat e atij grupi kontrolli. Nëse specifikonim vetëm variablin… pra onSubmit(form), do ta presim këtë në tastierë:

ControlGroup i formularit (forma.formë) i lejon këto metoda:

Mjaft e shkëlqyeshme! Kalimi te komponenti ynë tjetër që u injektua në AppComponent.

contacts.component.ts
import {Component} from '@angular/core';
@Component({
  selector: ‘contacts’,
  template: '<h2> List of Contacts </h2>'
})
export class ContactsComponent { }

Komponenti i Kontakteve do të japë listën tonë të emrave me numrin e telefonit të lidhur me emrin. Meqenëse shabllonet janë kaskadë, aplikacioni ynë tani duket kështu:

Hej, jo shumë e bukur, por ne thjesht po i hedhim poshtë bazat! Në blogun tjetër, ne do të synojmë të dorëzojmë formularin dhe ta japim atë nën "Lista e kontakteve".

Prit mirë… Shërbimet janë të radhës!