From e435ead19de9ac92cfa9efd114f745c4bcbdf1b7 Mon Sep 17 00:00:00 2001 From: Sascha Date: Sun, 22 Dec 2024 08:38:27 +1300 Subject: [PATCH] seo --- .../2017-07-24-angular-redux-einfuehrung.md | 4 ++-- .../2020-08-03-angular-10.md | 16 ++++++++-------- ...per-ergonomics-hier-kommen-angular-signals.md | 6 +++--- .../2023-12-10-angular-kurz-erklaert-signals.md | 12 ++++++------ .../2024-01-19-angular-17-eine-renaissance.md | 2 +- 5 files changed, 20 insertions(+), 20 deletions(-) diff --git a/_posts/2017-07-24-angular-redux-einfuehrung/2017-07-24-angular-redux-einfuehrung.md b/_posts/2017-07-24-angular-redux-einfuehrung/2017-07-24-angular-redux-einfuehrung.md index 4e280a57..0c3122d3 100644 --- a/_posts/2017-07-24-angular-redux-einfuehrung/2017-07-24-angular-redux-einfuehrung.md +++ b/_posts/2017-07-24-angular-redux-einfuehrung/2017-07-24-angular-redux-einfuehrung.md @@ -444,7 +444,7 @@ case TodoActions.SET_CURRENT_FILTER: ``` ### Die Todo-Liste anzeigen -Wir verwenden eine untergeordnete Komponente todo, um ein einzelnes Todo zu verkapseln, das einige Eigenschaften als Attribute (id, abgeschlossen) und die Beschreibung (Text) als Inhalt übergibt. Dieses Muster ist als [Container Component](https://medium.com/@learnreact/container-components-c0e67432e005) bekannt. +Wir verwenden eine untergeordnete Komponente todo, um ein einzelnes Todo zu verkapseln, das einige Eigenschaften als Attribute (id, abgeschlossen) und die Beschreibung (Text) als Inhalt übergibt. Dieses Muster ist als [Container Component](https://medium.com/@learnreact/container-components-c0e67432e005){:rel="noopener noreferrer nofollow"} bekannt. ```javascript //src/todoList.ts @@ -520,6 +520,6 @@ Lass uns überprüfen, wie sich eine Redux-Anwendung in verschiedenen Stadien ve -Dies ist eine Übersetzung und Überarbeitung von Gerard's großartigem Artikel [Angular — Introduction to Redux](https://medium.com/google-developer-experts/angular-2-introduction-to-redux-1cf18af27e6e) +Dies ist eine Übersetzung und Überarbeitung von Gerard's großartigem Artikel [Angular — Introduction to Redux](https://medium.com/google-developer-experts/angular-2-introduction-to-redux-1cf18af27e6e){:rel="noopener noreferrer nofollow"} Benutze diese Links für die finalen Lösungen: [Demo](https://embed.plnkr.co/6UJUYh7nbyU3TMS2Xd6l/) - [Source](https://plnkr.co/edit/6UJUYh7nbyU3TMS2Xd6l?p=preview) diff --git a/_posts/2020-08-03-angular-10/2020-08-03-angular-10.md b/_posts/2020-08-03-angular-10/2020-08-03-angular-10.md index b159614f..84cdb621 100644 --- a/_posts/2020-08-03-angular-10/2020-08-03-angular-10.md +++ b/_posts/2020-08-03-angular-10/2020-08-03-angular-10.md @@ -54,7 +54,7 @@ Der Grund ist schnell erklärt CommonJS-Pakete können durch Tree-Shaking-Algori ![CLI Output vom Angular Build](cli-output.png) -Bildquelle: [https://blog.angular.io/version-10-of-angular-now-available-78960babd41](https://blog.angular.io/version-10-of-angular-now-available-78960babd41) +Bildquelle: [https://blog.angular.io/version-10-of-angular-now-available-78960babd41](https://blog.angular.io/version-10-of-angular-now-available-78960babd41){:rel="noopener noreferrer nofollow"} ### Mit dem neuen Strict Mode mehr Typsicherheit und Kontrolle über die JS-Bundles @@ -80,7 +80,7 @@ Der Einsatz von `--strict` bewirkt folgende Einstellungen in der TypeScript-Konf } ``` -- ℹ️ Eine detaillierte Erläuterung zu den Compiler-Optionen von TypeScript gibt es [hier](https://www.typescriptlang.org/docs/handbook/compiler-options.html). +- ℹ️ Eine detaillierte Erläuterung zu den Compiler-Optionen von TypeScript gibt es [hier](https://www.typescriptlang.org/docs/handbook/compiler-options.html){:rel="noopener noreferrer nofollow"}. Darüber hinaus bewirkt Angulars `strict-mode` , dass in der `angular.json` die Maximalgröße der Bundles stark reduziert wird. @@ -187,8 +187,8 @@ ng update @angular/core @angular/cli --force --create-commits Das Update auf Angular 10 aktualisiert übrigens auch TypeScript, TSLint und tslib. - TypeScript [](https://www.typescriptlang.org/docs/handbook/release-notes/typescript-3-9.html)v[3.9](https://www.typescriptlang.org/docs/handbook/release-notes/typescript-3-9.html) -- TSLib v[2.0](https://github.com/microsoft/tslib/releases/tag/2.0.0) -- TSLint v[6](https://github.com/palantir/tslint/blob/master/CHANGELOG.md) +- TSLib v[2.0](https://github.com/microsoft/tslib/releases/tag/2.0.0){:rel="noopener noreferrer nofollow"} +- TSLint v[6](https://github.com/palantir/tslint/blob/master/CHANGELOG.md){:rel="noopener noreferrer nofollow"} ## Fazit @@ -200,10 +200,10 @@ Zum Ende bleibt zu sagen: Wir sind schon sehr gespannt auf Angular 11! ## Ressourcen -[Version 10 of Angular Now Available](https://blog.angular.io/version-10-of-angular-now-available-78960babd41) +[Version 10 of Angular Now Available](https://blog.angular.io/version-10-of-angular-now-available-78960babd41){:rel="noopener noreferrer nofollow"} -[Angular 10 erschienen - das sind die Neuerungen auf einen Blick](https://entwickler.de/online/javascript/angular-10-579937743.html) +[Angular 10 erschienen - das sind die Neuerungen auf einen Blick](https://entwickler.de/online/javascript/angular-10-579937743.html){:rel="noopener noreferrer nofollow"} -[What's new in Angular 10](https://www.infoworld.com/article/3537449/whats-new-in-angular-10.html) +[What's new in Angular 10](https://www.infoworld.com/article/3537449/whats-new-in-angular-10.html){:rel="noopener noreferrer nofollow"} -[What is New in Angular 10?](https://volosoft.com/blog/what-is-new-in-angular-10) +[What is New in Angular 10?](https://volosoft.com/blog/what-is-new-in-angular-10){:rel="noopener noreferrer nofollow"} diff --git a/_posts/2023-08-23-developer-ergonomics-hier-kommen-angular-signals/2023-08-23-developer-ergonomics-hier-kommen-angular-signals.md b/_posts/2023-08-23-developer-ergonomics-hier-kommen-angular-signals/2023-08-23-developer-ergonomics-hier-kommen-angular-signals.md index 32e0eb0e..73100e88 100644 --- a/_posts/2023-08-23-developer-ergonomics-hier-kommen-angular-signals/2023-08-23-developer-ergonomics-hier-kommen-angular-signals.md +++ b/_posts/2023-08-23-developer-ergonomics-hier-kommen-angular-signals/2023-08-23-developer-ergonomics-hier-kommen-angular-signals.md @@ -10,7 +10,7 @@ categories: "angular signals update" ## Das Angular 16 Update -Vielleicht hast Du es mitbekommen: Mit Angular 16 wurde das, gemessen am Umfang, größte Update nach dem initialen Release von Angular veröffentlicht. Neben Features wie [Non-Destructive Hydration](https://blog.angular.io/angular-v16-is-here-4d7a28ec680d#:~:text=of%20full%20app-,non%2Ddestructive%20hydration,-!) oder dem Support für Typescript 5.0 enthält das Update drei Reactivity Primitives und damit einen Mechanismus für Reaktivität. Sarah Drasnger, Director of Engineering bei Google, spricht auf [Twitter bzw. X](https://twitter.com/sarah_edo/status/1628065696247857152) sogar von einer Angular Renaissance. +Vielleicht hast Du es mitbekommen: Mit Angular 16 wurde das, gemessen am Umfang, größte Update nach dem initialen Release von Angular veröffentlicht. Neben Features wie [Non-Destructive Hydration](https://blog.angular.io/angular-v16-is-here-4d7a28ec680d#:~:text=of%20full%20app-,non%2Ddestructive%20hydration,-!){:rel="noopener noreferrer nofollow"} oder dem Support für Typescript 5.0 enthält das Update drei Reactivity Primitives und damit einen Mechanismus für Reaktivität. Sarah Drasnger, Director of Engineering bei Google, spricht auf [Twitter bzw. X](https://twitter.com/sarah_edo/status/1628065696247857152){:rel="noopener noreferrer nofollow"} sogar von einer Angular Renaissance. ## Motivation hinter Signals @@ -24,7 +24,7 @@ RxJS hat in Angular Anwendungen zwei Kernaufgaben: die Koordination von asynchro Ein Signal in Angular hält immer einen Wert und Konsumenten können diesen Wert lesen. Ein Signal ist ein zyklischer Prozess und jedes Mal, wenn es seinen Zyklus durchläuft, produziert er eine bestimmte Menge an Informationen. -Ist also eine bestimmte Komponente ein Consumer des Signals, weil es die Informationen benötigt, so wird der Consumer informiert über Änderungen. Wie auch RxJS implementiert ein Signal das [Observer-Pattern](https://de.wikipedia.org/wiki/Beobachter_(Entwurfsmuster)), setzt dieses technisch allerdings anders um. +Ist also eine bestimmte Komponente ein Consumer des Signals, weil es die Informationen benötigt, so wird der Consumer informiert über Änderungen. Wie auch RxJS implementiert ein Signal das [Observer-Pattern](https://de.wikipedia.org/wiki/Beobachter_(Entwurfsmuster)){:rel="noopener noreferrer nofollow"}, setzt dieses technisch allerdings anders um. Angular unterscheidet bei den Signals zwischen „Writable Signals“ und „Computed Signals“. @@ -141,7 +141,7 @@ const canDeleteInvoice$ = combineLatest([permissions$, isAuthenticated$]).pipe( ); ``` -Würden sich also mit diesem Ansatz die Streams `permissions$` und `isAuthenticated$` aktualiseren, so kann es durchaus passieren, dass unerwartete Ergebnisse herauskommen: Angenommen der Benutzer wird angemeldet (isAuthenticated$ wird `true` emitten) und die Berechtigung "createInvoice" wird entzogen zur gleichen Zeit. Das würde kurzzeitig dazu führen, dass `canDeleteInvoices$` true emitted bevor es dann mit dem Emit von `permissions$` wieder `false` wird. Man nennt das auch das [Diamond-Problem](https://de.wikipedia.org/wiki/Diamond-Problem). +Würden sich also mit diesem Ansatz die Streams `permissions$` und `isAuthenticated$` aktualiseren, so kann es durchaus passieren, dass unerwartete Ergebnisse herauskommen: Angenommen der Benutzer wird angemeldet (isAuthenticated$ wird `true` emitten) und die Berechtigung "createInvoice" wird entzogen zur gleichen Zeit. Das würde kurzzeitig dazu führen, dass `canDeleteInvoices$` true emitted bevor es dann mit dem Emit von `permissions$` wieder `false` wird. Man nennt das auch das [Diamond-Problem](https://de.wikipedia.org/wiki/Diamond-Problem){:rel="noopener noreferrer nofollow"}. ## Effects diff --git a/_posts/2023-12-10-angular-kurz-erklaert-signals/2023-12-10-angular-kurz-erklaert-signals.md b/_posts/2023-12-10-angular-kurz-erklaert-signals/2023-12-10-angular-kurz-erklaert-signals.md index 84fc1586..5b48cbe7 100644 --- a/_posts/2023-12-10-angular-kurz-erklaert-signals/2023-12-10-angular-kurz-erklaert-signals.md +++ b/_posts/2023-12-10-angular-kurz-erklaert-signals/2023-12-10-angular-kurz-erklaert-signals.md @@ -240,22 +240,22 @@ Wie immer laden wir euch ein, Teil unserer [Angular Community auf Discord](https ### Signals/Realitivity/Producer-Consumer-Pattern -- [How to build an event emitter in JavaScript - educative.io](https://www.educative.io/answers/how-to-build-an-event-emitter-in-javascript) +- [How to build an event emitter in JavaScript - educative.io](https://www.educative.io/answers/how-to-build-an-event-emitter-in-javascript){:rel="noopener noreferrer nofollow"} -- [How Angular Signals Solves an Age-Old Problem - betterprogramming.pub](https://betterprogramming.pub/how-angular-signals-solves-an-age-old-problem-ae7ec60f042f) +- [How Angular Signals Solves an Age-Old Problem - betterprogramming.pub](https://betterprogramming.pub/how-angular-signals-solves-an-age-old-problem-ae7ec60f042f){:rel="noopener noreferrer nofollow"} -- [Angular’s Signal Revolution: Effortless Change Detection Explained - netbasal.com](https://netbasal.com/angulars-signal-revolution-effortless-change-detection-explained-unveiling-the-inner-workings-8a5e44c95b65) +- [Angular’s Signal Revolution: Effortless Change Detection Explained - netbasal.com](https://netbasal.com/angulars-signal-revolution-effortless-change-detection-explained-unveiling-the-inner-workings-8a5e44c95b65){:rel="noopener noreferrer nofollow"} ### Change Detection - [Deep dive into the OnPush change detection strategy in Angular - Max Koretskyi](https://medium.com/angular-in-depth/deep-dive-into-the-onpush-change-detection-strategy-in-angular-fab5e4da1d69){:rel="noopener noreferrer nofollow"} -- [Understating Angular Change Detection with example - DHANANJAY KUMAR](https://debugmode.net/2018/06/05/understating-angular-change-detection-with-example/) - [https://www.thinktecture.com/en/angular/whats-the-hype-onpush/](https://www.thinktecture.com/en/angular/whats-the-hype-onpush/) +- [Understating Angular Change Detection with example - DHANANJAY KUMAR](https://debugmode.net/2018/06/05/understating-angular-change-detection-with-example/){:rel="noopener noreferrer nofollow"} + [https://www.thinktecture.com/en/angular/whats-the-hype-onpush/](https://www.thinktecture.com/en/angular/whats-the-hype-onpush/){:rel="noopener noreferrer nofollow"} - [Future of Change Detection in Angular with Signals - Thomas Laforge](https://medium.com/ngconf/future-of-change-detection-in-angular-with-signals-fb367b66a232){:rel="noopener noreferrer nofollow"} ### Memes -- [Angular Memes - github.com](https://github.com/dzhavat/angular-memes) +- [Angular Memes - github.com](https://github.com/dzhavat/angular-memes){:rel="noopener noreferrer nofollow"} diff --git a/_posts/2024-01-19-angular-17-eine-renaissance/2024-01-19-angular-17-eine-renaissance.md b/_posts/2024-01-19-angular-17-eine-renaissance/2024-01-19-angular-17-eine-renaissance.md index 8cc37652..25fa3091 100644 --- a/_posts/2024-01-19-angular-17-eine-renaissance/2024-01-19-angular-17-eine-renaissance.md +++ b/_posts/2024-01-19-angular-17-eine-renaissance/2024-01-19-angular-17-eine-renaissance.md @@ -156,7 +156,7 @@ Ja, und wir sind sogar bereits mitten in der "Angular Renaissance"! Betrachten wir die Entwicklung des Frameworks der letzten Jahre, wird eines deutlich: die Angular-User-Experience hatte mindestens eine ähnliche Priorität wie die Performance des Frameworks. Features wie Signals oder der neue Control Flow erhöhen nicht nur die Performance des Frameworks, sondern vereinfachen vor allem das Arbeiten mit Angular. Auch das neue moderne Design muss in dieser Logik gedacht werden. -Die Entwicklung ist kein Zufall.Über die letzten Jahre hat sich das Angular-Team wieder verstärkt auf das Feedback und die Bedürfnisse der Angular-Community fokussiert und aktiv in die Weiterentwicklung des Frameworks integriert. Insbesondere die [Ergebnisse der jährlichen Angular-Umfrage](https://blog.angular.io/angular-developer-survey-2023-86372317c95f) tragen zur Priorisierung für das nächste Jahr bei, wie es Minko Gechev selbst sagt: +Die Entwicklung ist kein Zufall.Über die letzten Jahre hat sich das Angular-Team wieder verstärkt auf das Feedback und die Bedürfnisse der Angular-Community fokussiert und aktiv in die Weiterentwicklung des Frameworks integriert. Insbesondere die [Ergebnisse der jährlichen Angular-Umfrage](https://blog.angular.io/angular-developer-survey-2023-86372317c95f){:rel="noopener noreferrer nofollow"} tragen zur Priorisierung für das nächste Jahr bei, wie es Minko Gechev selbst sagt: >One of the strongest guiding indicators which has been highly influential in our prioritization process are the results from the Angular developer survey.