???? ?????? Zone.js ?-Angular ??? ??? ?-Angular 17
Tomer Kedem
Team Leader Full Stack | AI | C# | .NET | JavaScript | Angular | SQL | CI/CD
Zone.js ??? ?????? ?????? ?-Angular ?????? ?? ?????? ??????? ???????????. ??? ????? ???? ?? "????" ????? ??? ?????? ???, ??????? ??????? ????? ???????? ?? Angular ????? ????? ?????. ????? ???? Zone.js
????? ????? ??????????? ?? Zone.js
???? Zone.js
???? Zone.js, ????? ?????? ??????????? ?-JavaScript ??? ??????? ?????? ????? ??????, ??? ???? ?? ???? ?????? ????? ??????.
????? ????:
function fetchDataAndUpdateUI() {
fetch('/api/data')
.then(response => response.json())
.then(data => {
setTimeout(() => {
document.getElementById('data').innerText = data.value;
}, 1000);
})
.catch(error => console.error('Error:', error));
}
fetchDataAndUpdateUI();
?????? ??, ?????? ??????? ??????????? ??????? ?????? ????? ????? ?????? ?????? ?????? ??????? ????????.
?? Zone.js
Zone.js ???? ????? ???????? ?????? ???????????, ????? ?? ?????? ????? ???????? ?? Angular ?????? ?? ????? ????? ????.
????? ?????:
import { Component, OnInit } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';
@Component({
selector: 'app-data',
template: '<div id="data">{{ data }}</div>'
})
export class DataComponent implements OnInit {
data = 'Initial Data';
constructor(private http: HttpClient) {}
ngOnInit() {
this.fetchDataAndUpdateUI().subscribe((response: any) => {
this.data = response.value;
});
}
fetchDataAndUpdateUI(): Observable<any> {
return this.http.get('/api/data');
}
}
???, Zone.js ????? ?? ??????? ???????????? ????????, ??????? ?????? ?????? ???????? ????????? ??????. Angular ?????? ?-Zone.js ????? ????? ?????? ????? ????????, ?? ????? ?? ?????? ????? ????? ????.
??????? ?-Angular 17
Angular 17 ????? ???? ??????? ?-Zone.js, ?????? ?? ??????? ????????? ???:
??????? ??? ????? ?? ????? ?????? Angular ???? ??????? ??????.
??? ?-RxJS
????? ?-Zone.js ?-RxJS ????? ?????? ??????? ???????????, ?? ?????? ????? ?????:
?-Angular, ?????? ??? ?????? ????? ???. ??????, RxJS ???? ???? ??????? ?????????? ??????, ???? Zone.js ????? ????? ??????? ?????? ?????.
????? ?????? ?????:
import { Component, OnInit } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';
@Component({
selector: 'app-data',
template: '<div id="data">{{ data }}</div>'
})
export class DataComponent implements OnInit {
data = 'Initial Data';
constructor(private http: HttpClient) {}
ngOnInit() {
this.fetchDataAndUpdateUI().subscribe((response: any) => {
this.data = response.value;
});
}
fetchDataAndUpdateUI(): Observable<any> {
return this.http.get('/api/data');
}
}
???, RxJS ???? ????? ?-HTTP, ???? Zone.js ?????? ?????? ?????? ???????? ????????? ??????.
???? ????? ?? Angular 17
???? ?? ??????? ????????? ?????? ?-Angular 17, ???? ???? Zone.js ???? ???? ?? ?????? ??????? ??????????? ????? ?? ???????? ????????? ???.
#Angular #Angular17 #ZoneJS #AICode #TomerKedemQuiz