Δείγμα καρτών Angular από την εφαρμογή μας

Κατεβάστε την εφαρμογή μας από το App Store ή το Google Play για να αποκτήσετε περισσότερες δωρεάν καρτέλες μάθησης ή εγγραφείτε για πρόσβαση σε όλες τις καρτέλες μάθησης.

Περιγράψτε πώς να χρησιμοποιήσετε τα HTTP Interceptors στο Angular για να διαχειριστείτε αιτήσεις και απαντήσεις.

Το HTTP Interceptor στο Angular χρησιμοποιείται για τη διαχείριση των αιτήσεων και απαντήσεων HTTP. Μπορούν να παρεμβαίνουν σε μια αίτηση, να την τροποποιούν και να την περάσουν. Μπορούν επίσης να παρεμβαίνουν σε μια απάντηση, να την τροποποιούν και να την περάσουν. Για να χρησιμοποιήσουμε ένα HTTP Interceptor, πρέπει να δημιουργήσουμε μια υπηρεσία που υλοποιεί την διεπαφή HttpInterceptor.

Ακολουθεί ο κωδικός που εξηγεί πώς να προσθέσετε interceptors στην εφαρμογή:

import { Injectable } from '@angular/core';
import { HttpInterceptor, HttpRequest, HttpHandler, HttpEvent } from '@angular/common/http';
import { Observable } from 'rxjs';

@Injectable()
export class MyHttpInterceptor implements HttpInterceptor {

  intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {

    // Εδώ τροποποιούμε την αίτηση
    const modifiedReq = req.clone({
      headers: req.headers.set('Authorization', 'My value'),
    });

    // Εδώ περνάμε την αίτηση
    return next.handle(modifiedReq);

  }

}

Όταν οριστεί το Interceptor μας, πρέπει να το προσθέσουμε στον πίνακα των παροχέων στην ενότητα της εφαρμογής:

@NgModule({
  ...
  providers: [
    { provide: HTTP_INTERCEPTORS, useClass: MyHttpInterceptor, multi: true },
  ],
  ...
})
export class AppModule { }

Σημειώστε ότι το 'multi' έχει οριστεί σε true. Αυτό μας επιτρέπει να προσθέτουμε πολλαπλούς interceptors, οι οποίοι θα εκτελούνται με τη σειρά που παρέχονται. Πρέπει να θυμάστε ότι η σειρά των Interceptors έχει σημασία, καθώς κάθε επόμενο interceptor λαμβάνει την αίτηση από το προηγούμενο, οπότε οποιεσδήποτε τροποποιήσεις γίνονται από το προηγούμενο interceptor θα είναι ορατές στο επόμενο.

Πώς λειτουργεί η Δεσμευτική Δεδομένων στα συστατικά Angular χρησιμοποιώντας @Input() και @Output();

Η δέσμευση δεδομένων είναι ένα κύριο στοιχείο του προγραμματισμού στο Angular. Αυτό καθιστά δυνατή τη δυναμική μεταφορά δεδομένων μεταξύ των συστατικών. Η δέσμευση δεδομένων περιλαμβάνει δύο τεχνικές: @Input και @Output.

Το @Input επιτρέπει τη μεταφορά τιμών από το γονικό συστατικό στο παιδικό συστατικό. Αυτή είναι μια λεγόμενη τεχνική δέσμευσης δεδομένων μονής κατεύθυνσης - τα δεδομένα ρέουν από την κορυφή προς τα κάτω της ιεραρχίας των συστατικών. Το χρησιμοποιούμε για να σημειώσουμε τις μεταβλητές που πρέπει να είναι ορατές για τα γονικά συστατικά.

Παράδειγμα χρήσης @Input:

<!--parent.component.html-->
<app-child [childMessage]="parentMessage"></app-child>

// parent.component.ts
parentMessage = "Hello from parent";

// child.component.ts
import {Component,Input } from '@angular/core';
//..
@Input() childMessage: string;

Στο παραπάνω παράδειγμα, το `parentMessage` από το parent.component.ts μεταδίδεται στο `childMessage` στο child.component.ts.

Το @Output, από την άλλη πλευρά, επιτρέπει την επικοινωνία στην αντίθετη κατεύθυνση - από το παιδικό συστατικό προς το γονέα. Αυτή είναι η λεγόμενη τεχνική δέσμευσης συμβάντος. Χρησιμοποιώντας τον οριστή διακοσμητή @Output(), μπορούμε να ενεργοποιήσουμε ένα συμβάν στο παιδικό συστατικό και να το χειριστούμε στο γονικό συστατικό.

Παράδειγμα χρήσης @Output:

<!--parent.component.html-->
<app-child (messageEvent)="receiveMessage($event)"></app-child>

// parent.component.ts
receiveMessage($event) {
  this.message = $event
}

// child.component.ts
import { Component, Output, EventEmitter } from '@angular/core';
//..
@Output() messageEvent = new EventEmitter<string>();

Σε αυτήν την περίπτωση, όταν ενεργοποιείται το `messageEvent` στο child.component.ts, η λειτουργία `receiveMessage` καλείται στο parent.component.ts και λαμβάνει την τιμή που στέλνει το `messageEvent`.

Τι είναι το NgModel και πώς χρησιμοποιείται στις φόρμες Angular;

Το NgModel είναι μια οδηγία του Angular που χρησιμοποιείται για τη δημιουργία διπλής δέσμευσης δεδομένων σε φόρμες. Η διπλή δέσμευση δεδομένων σημαίνει ότι τα δεδομένα μπορούν να μεταδοθούν από το μοντέλο στην προβολή, και από την προβολή στο μοντέλο. Στην πράξη, αυτό σημαίνει ότι οι αλλαγές που κάνει ο χρήστης στα πεδία της φόρμας αντικατοπτρίζονται στο μοντέλο δεδομένων, και οι αλλαγές στο μοντέλο δεδομένων είναι ορατές στη φόρμα.

Η χρήση της οδηγίας NgModel σε φόρμες είναι αρκετά απλή. Την τοποθετούμε στο κατάλληλο στοιχείο της φόρμας και τη δένουμε με το κατάλληλο πεδίο του μοντέλου χρησιμοποιώντας τη σύνταξη [(ngModel)].

Για παράδειγμα:

<form>
  <label for="name">Όνομα:</label>
  <input id="name" [(ngModel)]="person.name">

  <label for="age">Ηλικία:</label>
  <input id="age" [(ngModel)]="person.age">
</form>

Όπου "person.name" και "person.age" είναι πεδία του μοντέλου δεδομένων που είναι δεμένα με τα αντίστοιχα πεδία της φόρμας. Οι αλλαγές που κάνει ο χρήστης σε αυτά τα πεδία της φόρμας θα αντικατοπτρίζονται αυτόματα στο μοντέλο "person".

Θυμηθείτε, για να χρησιμοποιήσετε την οδηγία NgModel, είναι απαραίτητο να εισάγετε το FormsModule στην εφαρμογή module.

Τι είναι το Zone.js στο Angular και πώς επηρεάζει την απόδοση της εφαρμογής;

To Zone.js είναι μια βιβλιοθήκη που επιτρέπει την παρακολούθηση ασύγχρονων λειτουργιών στην JavaScript. Στο πλαίσιο του Angular, το Zone.js αποτελεί ένα κλειδί στοιχείο του μηχανισμού ανίχνευσης αλλαγών.

Το Zone.js εισάγει την έννοια των "zones", που είναι παγκόσμια πλαίσια εκτέλεσης. Αυτές οι "zones" δημιουργούν ένα "δέντρο", όπου κάθε ασύγχρονη λειτουργία πραγματοποιείται πάντα στην ίδια ζώνη που ξεκίνησε τη λειτουργία. Ως αποτέλεσμα, είμαστε σε θέση να παρακολουθήσουμε πότε ξεκινά μια λειτουργία και πότε τελειώνει.

[β] Παράδειγμα: [β]
Η πρώτη λειτουργία μπορεί να ενεργοποιήσει ένα setTimeout, όπου η επόμενη λειτουργία προγραμματίζεται για τον επόμενο γύρο του βρόχου συμβάντων. Αν και αυτές είναι δύο διαφορετικές λειτουργίες, το Zone.js μας επιτρέπει να τις παρακολουθούμε ως μία ολόκληρη - αυτή είναι η ασύγχρονη παρακολούθηση.

Στο Angular, το Zone.js χρησιμοποιείται για να ενημερώσει το πλαίσιο πότε πρέπει να ξεκινήσει η ανίχνευση αλλαγών. Κάθε χρήστης δράση, χρονοδιάγραμμα, ή http αίτηση εκτελείται στη "angular zone". Όταν οι λειτουργίες στη "angular zone" τελειώσουν, το Angular αυτόματα ενεργοποιεί την ανίχνευση αλλαγών.

Με αυτόν τον μηχανισμό, το Angular γνωρίζει πότε έχει νόημα να ανανεώσει την προβολή. Γι' αυτό το Zone.js είναι κρίσιμο για την απόδοση. Χωρίς το Zone.js, το Angular θα έπρεπε να χρησιμοποιεί τεχνικές όπως το πολυπληκτολόγηση για να βρει πότε να ενεργοποιήσει την ανίχνευση αλλαγών, που θα ήταν εξαιρετικά αναποτελεσματική.

Αν και το Zone.js έχει θετικές επιδράσεις στην απόδοση του Angular, θα μπορούσε επίσης να έχει αρνητικές επιδράσεις. Αν μια εφαρμογή εκτελεί μια πληθώρα ασύγχρονων λειτουργιών που δεν επηρεάζουν την κατάσταση της εφαρμογής, το Angular εξακολουθεί να ενεργοποιεί την ανίχνευση αλλαγών. Στην περίπτωση μιας μεγάλης αριθμού λειτουργιών, αυτό θα μπορούσε να επηρεάσει την απόδοση. Για να το αποτρέψουμε αυτό, μπορούμε να εκτελέσουμε αυτές τις λειτουργίες εκτός της "angular zone".

Κάρτες Angular

Δείγμα καρτών Angular από την εφαρμογή μας

Περιγράψτε πώς να χρησιμοποιήσετε τα HTTP Interceptors στο Angular για να διαχειριστείτε αιτήσεις και απαντήσεις.

Πώς λειτουργεί η Δεσμευτική Δεδομένων στα συστατικά Angular χρησιμοποιώντας @Input() και @Output();

Τι είναι το NgModel και πώς χρησιμοποιείται στις φόρμες Angular;

Τι είναι το Zone.js στο Angular και πώς επηρεάζει την απόδοση της εφαρμογής;

Λήψη IT Flashcards Τώρα