Angular Kartları

Kategori Sponsoru

Angular, Google tarafından geliştirilen ve sürdürülen, web uygulamaları oluşturmak için güçlü bir çerçevedir. Başlangıçta dinamik uygulamalar için bir HTML uzantısı olarak oluşturulan Angular, zamanla ölçeklenebilir, verimli tek sayfalık uygulamalar (SPA'lar) oluşturmak için kapsamlı bir platforma evrilmiştir. TypeScript ve bileşen tabanlı mimari kullanarak, Angular karmaşık, etkileşimli kullanıcı arayüzleri oluşturmak ve uygulama durumunu yönetmek için araçlar sunar.

Kart uygulamamız, Angular bilgisi gerektiren herhangi bir mülakata sizi etkili bir şekilde hazırlayacak kapsamlı cevaplarla dikkatle seçilmiş Angular mülakat sorularını içerir. IT Kartları sadece iş arayanlar için bir araç değildir - mevcut kariyer planlarınız ne olursa olsun bilginizi pekiştirmenin ve test etmenin harika bir yoludur. Uygulamayı düzenli kullanmak, en son Angular trendleriyle güncel kalmanıza ve becerilerinizi yüksek seviyede tutmanıza yardımcı olacaktır.

Uygulamamızdan örnek Angular kartları

Daha fazla ücretsiz kart almak için uygulamamızı App Store veya Google Play'den indirin veya tüm kartlara erişim için abone olun.

Angular'da HTTP Interceptor'larını kullanarak istek ve yanıtları nasıl yönetebilirsiniz?

Angular'daki HTTP Interceptor, HTTP isteklerini ve yanıtlarını değiştirmek için kullanılır. Bir isteği engelleyebilir, değiştirebilir ve iletebilirler. Ayrıca bir yanıtı engelleyebilir, değiştirebilir ve aktarabilirler. Bir HTTP Interceptor kullanmak için, HttpInterceptor arayüzünü uygulayan bir servis oluşturmamız gerekiyor.

İşte uygulamaya giriş yapanları nasıl ekleyeceğinizi gösteren kod:
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>> {

    // Burada isteği değiştiriyoruz
    const modifiedReq = req.clone({
      headers: req.headers.set('Authorization', 'My value'),
    });

    // Burada isteği iletiyoruz
    return next.handle(modifiedReq);

  }

}

Interceptor'ümüz tanımlandığında, uygulama modülündeki sağlayıcılar dizimize eklememiz gerekiyor:
@NgModule({
  ...
  providers: [
    { provide: HTTP_INTERCEPTORS, useClass: MyHttpInterceptor, multi: true },
  ],
  ...
})
export class AppModule { }

'multi' nin true olarak ayarlandığına dikkat edin. Bu, birden fazla girişimci eklememize izin verir, bunlar sağlandıkları sıra ile gerçekleştirilir. Girişimcilerin sırasının önemli olduğunu hatırlamanız gerekiyor, çünkü her bir sonraki girişimci, isteği öncekinden alır, bu yüzden önceki girişimci tarafından yapılan her türlü değişiklik sonraki için görünür olur.

@Input() ve @Output() kullanılarak Angular bileşenlerinde Veri Bağlama nasıl çalışır?

Veri Bağlama, Angular'da programlamanın önemli bir yönüdür. Bu, bileşenler arasında dinamik olarak veri aktarılmasını mümkün kılar. Veri Bağlama, iki tekniği içerir: @Giriş ve @Çıkış.

@Giriş, ebeveyn bileşeninden çocuk bileşene değerlerin aktarılmasına olanak sağlar. Bu, bir yolu olan veri bağlama tekniği olarak adlandırılır - veriler, bileşen hiyerarşisinin en üstünden en altına doğru akar. Ana bileşenler için görünür olması gereken değişkenleri işaretlemek için kullanırız.

@Giriş kullanım örneği:
<!--parent.component.html-->
<app-child [childMessage]="parentMessage"></app-child>

// parent.component.ts
parentMessage = "Ebeveynden merhaba";

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

Yukarıdaki örnekte, parent.component.ts'deki `parentMessage`, child.component.ts'deki `childMessage`'a aktarılıyor.

Öte yandan, @Çıkış, tam tersi yönde iletişim sağlar - çocuk bileşeninden ebeveyne. Bu, etkinlik bağlama tekniği olarak adlandırılır. @Output() dekoratörünü kullanarak, çocuk bileşeninde bir olayı tetikleyebilir ve ebeveyn bileşeninde ele alabiliriz.

@Çıkış kullanım örneği:
<!--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>();

Bu durumda, child.component.ts'de `messageEvent` tetiklendiğinde, parent.component.ts'deki `receiveMessage` fonksiyonu çağrılır ve `messageEvent` tarafından gönderilen değeri alır.

NgModel nedir ve Angular formlarında nasıl kullanılır?

NgModel, Angular direktriği olarak kullanılır ve formlarda çift yönlü veri bağlama oluşturur. Çift yönlü veri bağlama, verinin modelden görünüme ve görünümden modele iletilmesi anlamına gelir. Pratikte, bu, kullanıcının form alanlarındaki değişikliklerin veri modelinde yansıtılması ve veri modelindeki değişikliklerin formda görünür olması anlamına gelir.

NgModel direktifini formlarda kullanmak oldukça basittir. Onu uygun form öğesine yerleştiririz ve [(ngModel)] sözdizimi kullanarak uygun model alana bağlarız.

Örneğin:
<form>
  <label for="name">İsim:</label>
  <input id="name" [(ngModel)]="person.name">

  <label for="age">Yaş:</label>
  <input id="age" [(ngModel)]="person.age">
</form>

Burada "person.name" ve "person.age", ilgili form alanlarına bağlı veri modeli alanlarıdır. Kullanıcının bu form alanlarında yaptığı herhangi bir değişiklik otomatik olarak "person" modelinde yansıtılır.

Unutmayın, NgModel direktifini kullanmak için, FormsModule'in uygulama modülüne import edilmesi gereklidir.

Zone.js Angular'da nedir ve uygulama performansını nasıl etkiler?

Zone.js, JavaScript'teki asenkron işlemlerin izlenmesine izin veren bir kütüphanedir. Angular bağlamında, Zone.js, değişiklik algılama mekanizmasının ana bileşenidir.

Zone.js, "bölgeler" adı verilen küresel yürütme bağlamlarının kavramını getirir. Bu "bölgeler", bir ağaç oluşturur, burada her asenkron işlem daima işlemi başlatan aynı bölgede gerçekleşir. Sonuç olarak, bir işlemin ne zaman başladığını ve ne zaman bittiğini izleyebiliyoruz.

Örnek:
İlk işlem bir setTimeout'u tetikleyebilir, böylece bir sonraki işlem etkinlik döngüsünün bir sonraki turu için planlanır. Bunlar iki farklı işlem olsa da, Zone.js bize bunları tam bir bütün olarak izlememize izin verir - bu asenkron izlemedir.

Angular'da, Zone.js değişiklik algılamasının ne zaman başlatılacağını çerçeveye bildirmek için kullanılır. Her kullanıcı eylemi, zamanlayıcı veya http isteği "angular bölgesi"nde gerçekleştirilir. "Angular bölgesi"ndeki işlemler bittiğinde, Angular otomatik olarak değişiklik algılamayı tetikler.

Bu mekanizma ile Angular, görünümü ne zaman yenilemenin mantıklı olduğunu bilir. İşte bu yüzden Zone.js'in performans için çok önemlidir. Zone.js olmadan, Angular değişiklik algılamayı ne zaman tetiklemek için anket tekniği gibi teknikler kullanmak zorunda kalır ve bu son derece verimsiz olur.

Zone.js, Angular'ın performansında olumlu etkiler sunsa da, olumsuz bir etkisi de olabilir. Bir uygulama, uygulamanın durumunu etkilemeyen bir dizi asenkron işlem gerçekleştiriyorsa, Angular hala değişiklik algılamayı tetikler. Çok sayıda işlem durumunda, bu performansı bozabilir. Bunu önlemek için, bu işlemleri "angular bölgesi" dışında çalıştırabiliriz.

İndir IT Flashcards Şimdi

Kartlarımızla Angular bilginizi genişletin.
Temel programlama ilkelerinden ileri teknolojilerin ustalığına, IT Flashcards IT mükemmelliğinizin pasaportudur.
Şimdi indirin ve bugünün rekabetçi teknoloji dünyasında potansiyelinizin kilidini açın.