Co nowego w Angular v16?

Angular, utrzymywany przez Google, jest szeroko stosowanym frameworkiem typu open source do tworzenia aplikacji internetowych. Oferuje solidny zestaw narzędzi i szereg funkcji, które pozwalają tworzyć dynamiczne, responsywne i skalowalne aplikacje internetowe.

Niedawna premiera Angular w wersji 16 wprowadza ekscytujące aktualizacje i ulepszenia środowiska programistycznego, a także lepszą wydajność i stabilność aplikacji.

1. Sygnały kątowe

Sygnały kątowe jest biblioteką umożliwiającą definiowanie wartości reaktywnych i ustalanie zależności między nimi. Oto prosty przykład wykorzystania sygnałów Angular w aplikacji Angular:

@Część ({
 selektor: „moja-aplikacja”,
 samodzielny: PRAWDA,
 szablon: `
{{pełna nazwa() }} "setNazwa('Jan')">Kliknij</button>
`,
})
eksportklasa Aplikacja {
 imię = sygnał („Jane”);
 nazwisko = sygnał ('Łania');
 pełna nazwa = obliczone (() =>`${Ten.imię()}${Ten.nazwisko()}`





instagram viewer
);
konstruktor() {
 efekt(() =>konsola.dziennik(„Imię zmienione:”, Ten.pełna nazwa()));
 }
 setNazwa (nowaNazwa: strunowy) {
Ten.imię.set (nowe imię);
 }
}

Powyższy fragment kodu tworzy obliczoną wartość o nazwie fullName, która opiera się na sygnałach firstName i lastName. Dodatkowo definiuje efekt, funkcję wywołania zwrotnego, która jest uruchamiana za każdym razem, gdy zmienia się wartość odczytywanych przez nią sygnałów.

W tym przypadku wartość fullName zależy od firstName i lastName, więc zmiana jednego z nich wyzwala efekt. Gdy wartość firstName jest ustawiona na John, przeglądarka rejestruje następujący komunikat w konsoli:

 Imię zmienione: John Doe.

2. Samodzielna nowa kolekcja

Począwszy od Angular v16, możesz tworzyć nowe samodzielne projekty od samego początku! Aby wypróbować podgląd deweloperski samodzielnych schematów, upewnij się, że masz zainstalowany Angular CLI v16 i uruchom następujące polecenie:

ng nowy -- samodzielny

W ten sposób uzyskasz prostszą strukturę projektu bez NgModules. Co więcej, wszystkie generatory w projekcie będą produkować samodzielne dyrektywy, komponenty i potoki!

3. Automatyczne mapowanie parametrów trasy

Rozważ konfigurację routingu w następujący sposób:

eksportkonst trasy: Trasy = [{
 ścieżka: „szukaj:/identyfikator”,
 komponent: SearchComponent,
 rozstrzygać: {
 szukajSzczegóły: searchResolverFn
 }
}];

Przed Angular 16 trzeba było wstrzyknąć usługę ActivatedRoute, aby pobrać parametry adresu URL, parametry zapytania lub powiązane dane dla określonego adresu URL.

Oto przykład, jak trzeba to zrobić:

@Część({
 ...
})
eksportklasa SearchComponent {
 tylko do odczytu #aktywowana trasa = wstrzyknij (aktywowana trasa);
 identyfikator tylko do odczytu $ = Ten.#activatedRoute.paramMap (map(parametry => parametry.get('ID')));
 dane tylko do odczytu$ = Ten.#activatedRoute.data.map(({{
 szukajSzczegóły
 }) => szukajSzczegóły);
}

Dzięki Angular 16 nie musisz już wstrzykiwać usługi ActivatedRoute, aby pobrać różne parametry trasy, ponieważ możesz powiązać je bezpośrednio z danymi wejściowymi komponentu.

Aby aktywować tę funkcjonalność w aplikacji korzystającej z systemu modułów, należy ustawić odpowiednią wartość w opcjach RouterModule:

RouterModule.forRoot (trasy, {
 BindComponentInputs: PRAWDA
})

W przypadku samodzielnej aplikacji musisz zamiast tego wywołać funkcję:

ProvideRoutes (trasy, withComponentInputBinding());

Po aktywowaniu tej funkcji komponent staje się znacznie prostszy:

@Część({
 ...
})
eksportklasa SearchComponent {
@Wejście() ID!: strunowy;
@Wejście() szukajSzczegóły!: SzukajSzczegółów;
}

4. Wymagane dane wejściowe

Bardzo oczekiwaną funkcją dla społeczności Angular jest możliwość oznaczania określonych danych wejściowych zgodnie z wymaganiami. Do tej pory trzeba było stosować różne obejścia, aby to osiągnąć, na przykład zgłaszanie błędu w pliku NgOnInit cykl życia, jeśli zmienna nie została zdefiniowana lub modyfikując selektor komponentu, aby zawierał obowiązkowy wejścia.

Jednak oba te rozwiązania miały swoje wady i zalety. Począwszy od wersji 16, wprowadzenie wymaganych danych wejściowych jest tak proste, jak podanie obiektu konfiguracji w metadanych adnotacji wejściowej:

@Wejście({
 wymagany: PRAWDA
}) nazwa!: strunowy;

5. Vite jako serwer deweloperski

Angular 14 wprowadził nowy pakiet JavaScript o nazwie EsBuild, który znacznie skrócił czas kompilacji o około 40%. Jednak ten wzrost wydajności można było uzyskać tylko w fazie kompilacji, a nie podczas programowania z serwerem deweloperskim.

W nadchodzącym wydaniu Angular, narzędzie do budowania Vite umożliwia korzystanie z EsBuild również podczas programowania.

Aby aktywować tę funkcję, zaktualizuj konfigurację konstruktora w pliku angular.json w następujący sposób:

"architekt": {
"zbudować": {
"budowniczy": "@angular-devkit/build-angular: przeglądarka-esbuild",
„opcje”: {
 ...
 }
 }

Należy pamiętać, że ta funkcja jest nadal w fazie eksperymentalnej.

Zwiększanie doświadczenia i wydajności programistycznej

Angular wersja 16 przynosi ekscytujące aktualizacje, takie jak Angular Signals do zarządzania danymi, samodzielny projekt tworzenie, automatyczne mapowanie parametrów trasy, wymagane dane wejściowe i integracja Vite w celu ulepszenia rozwój. Te ulepszenia poprawiają środowisko programistyczne i zwiększają wydajność aplikacji.