Everand Logo

Welcome to Everand!

  • Discover millions of ebooks, audiobooks, and so much more with a free trial

    Only $11.99/month after trial. Cancel anytime.

    Expertentipps zu Angular: Neuerungen in Angular 6, Umgang mit Microservices, Performanz und UX-Design
    Expertentipps zu Angular: Neuerungen in Angular 6, Umgang mit Microservices, Performanz und UX-Design
    Expertentipps zu Angular: Neuerungen in Angular 6, Umgang mit Microservices, Performanz und UX-Design
    Ebook67 pages35 minutes

    Expertentipps zu Angular: Neuerungen in Angular 6, Umgang mit Microservices, Performanz und UX-Design

    By Manuel Rauber and Manfred Steyer

    ()

    Read preview

    About this ebook

    Angular zählt trotz der harten Konkurrenz von React und Vue.js nach wie vor zu den beliebtesten und meistgenutzen Frameworks für die Frontend-Entwicklung. Und da es inzwischen in der Major-Version 6 vorliegt, lohnt es sich, noch einmal solche Funktionen genauer anzuschauen, die Ihre Anwendung performanter, schlanker und vielseitiger einsetzbar machen.
    Zunächst wirft Manfred Steyer einen genauen Blick auf die wichtigsten Neuerungen von Angular 6 und das ebenfalls neue Angular CLI und stellt die interessantesten neuen Funktionen vor, etwa die Bereitstellung von Web Components oder die Erzeugung von npm-Paketen. Er erläutert zudem, wie Angular am besten für Microservices genutzt werden kann und stellt neben den naheliegenden auch eher überraschende (und überraschend effektive) Methoden vor. Schließlich zeigt Manfred Steyer Ihnen noch, wie Sie Ihre Angular-Anwendung mithilfe von @ngrx, dem Redux-Pendant für Angular, schlank und performant halten. Und auch für das Auge ist in diesem shortcut etwas dabei: Manuel Rauber gibt einen detaillierten Überblick über Angular Animations, erläutert die Grundlagen des Animationsframeworks und zeigt Ihnen, wie Sie mit wenig Arbeit eine wesentlich ansprechendere UX erreichen.
    LanguageDeutsch
    Publisherentwickler.press
    Release dateJun 28, 2018
    ISBN9783868028423
    Expertentipps zu Angular: Neuerungen in Angular 6, Umgang mit Microservices, Performanz und UX-Design

    Read more from Manuel Rauber

    Related to Expertentipps zu Angular

    Titles in the series (100)

    View More
    View More

    Related ebooks

    Programming For You

    View More
    View More

    Related podcast episodes

    Related articles

    • Article

      Auf Spurensuche

      Mar 3, 2022

      Auf Spurensuche
      10 min read

    • Article

      Vermittlungszentrale

      Apr 7, 2021

      Vermittlungszentrale
      11 min read

    • Article

      Fliegender Wechsel

      Mar 3, 2022

      Fliegender Wechsel
      7 min read

    • Article

      Getrennte Wege

      Aug 18, 2021

      Getrennte Wege
      3 min read

    • Article

      Zahlen & Trends

      Aug 4, 2021

      Zahlen & Trends
      7 min read

    • Article

      Tooltipps

      Jun 2, 2021

      Markdown-Dateien in der Konsole lesen Quelle: https://github.com/charmbracelet/glow Lizenz: MIT Alternativen: Mdformat Als reine Textdateien lassen sich Markdown-Dokumente auch im Texteditor gut lesen, vor allem, wenn der das passende Syntax-Highligh

      5 min read

    • Article

      Einbruchswerkzeug

      Sep 1, 2021

      Einbruchswerkzeug
      9 min read

    • Article

      Tux Liest

      Sep 1, 2021

      Bernd Klein geht in seiner Einführung „Python 3“ sehr gründlich und systematisch vor. Nach einer kurzen Einführung stellt ein Kapitel die grundlegenden sprachlichen Mittel von Python vor: Datentypen, Verzweigungen und Schleifen, Funktionen und dergle

      2 min read

    • Article

      Wenig Wahl, viel Qual

      Jan 19, 2023

      Wenig Wahl, viel Qual
      11 min read

    • Article

      Neue Ordnung

      Nov 16, 2023

      Neue Ordnung
      6 min read

    • Article

      Tux Liest

      Apr 7, 2021

      Wie genau wird aus einem Buchstaben im Klartext das verschlüsselte Zeichen, die Chiffre? Welche Vertauschungen sollen es unmöglich machen, auf den ursprünglichen Text zu schließen? Welche Waffen haben Kryptanalysten in petto, um einen geheimen Text w

      2 min read

    • Article

      Nachrichtenschwarm

      Nov 17, 2021

      Nachrichtenschwarm
      5 min read

    • Article

      Fernwartung per Browser

      Dec 22, 2022

      Fernwartung per Browser
      4 min read

    • Article

      Tooltipps

      Oct 6, 2021

      Tooltipps
      5 min read

    • Article

      Tooltipps

      Sep 1, 2021

      Cut, Xsv und Awk kombiniert Quelle: https://github.com/sstadick/hck Lizenz: Public Domain Alternativen: Cut, Awk Wer die Ausgabe von Shell-Programmen filtern, sortieren und anders weiterverarbeiten möchte, nutzt dazu meist Tools wie Awk und Cut. Mit

      5 min read

    • Article

      Spürhund

      Aug 17, 2023

      Spürhund
      1 min read

    • Article

      Unleserlich

      Dec 1, 2021

      Unleserlich
      10 min read

    • Article

      Frischzellenkur

      Oct 20, 2021

      Frischzellenkur
      8 min read

    • Article

      Modulare Delikatesse

      Mar 17, 2021

      Modulare Delikatesse
      9 min read

    • Article

      Ohne Hintergrund

      Nov 17, 2021

      Ohne Hintergrund
      3 min read

    • Article

      Schreibwerkstatt

      Sep 22, 2022

      Schreibwerkstatt
      9 min read

    • Article

      Ein besonderes Jahr

      Aug 4, 2021

      Sehr geehrte Leserinnen und Leser, der stockende Warenfluss aus und nach Asien trifft Industrie und Verbraucher in allen Bereichen. Viele Fahrradteile: Mangelware. Baustoffe wie Dämmmaterialien oder Abwasserrohre: Mangelware. Selbst Winzer klagen übe

      2 min read

    • Article

      Angetestet

      Aug 4, 2021

      Angetestet
      4 min read

    • Article

      Müheloser Überblick

      Aug 17, 2023

      Müheloser Überblick
      9 min read

    • Article

      Glückliche Schüler

      Dec 16, 2021

      Glückliche Schüler
      8 min read

    • Article

      Wer Mit Wem?

      Apr 7, 2021

      Wer Mit Wem?
      1 min read

    • Article

      Container-Lager

      Nov 3, 2021

      Container-Lager
      10 min read

    • Article

      Zugangsbeschränkung

      Mar 3, 2022

      Zugangsbeschränkung
      10 min read

    • Article

      Ausgepackt

      Dec 1, 2021

      Ausgepackt
      3 min read

    Related categories

    Reviews for Expertentipps zu Angular

    0 ratings

    0 ratings0 reviews

    What did you think?

    Tap to rate

    Review must be at least 10 words

      Book preview

      Expertentipps zu Angular - Manuel Rauber

      GmbH

      1 Angular 6: Die Neuerungen in Framework und CLI

      Es ist wieder so weit: Mit Angular 6 steht eine neue Major-Version von Angular in den Startlöchern. Gleichzeitig geht auch ein neues Angular CLI an den Start, dessen Versionsnummer ab sofort mit der von Angular synchron laufen soll und daher auch direkt auf Version 6 springt.

      Angular Elements erlaubt das Bereitstellen von Web Components, und die noch experimentelle View Engine ngIvy verspricht konkurrenzlos kleine Bundles. Das CLI automatisiert lästige Aufgaben beim Einbinden und Aktualisieren von Bibliotheken und kann nun npm Packages bauen. Was gibt es sonst noch Neues in Angular 6?

      Das Changelog [1] enthält einige neue und richtungsweisende Features, aber auch viele Abrundungen wie beispielsweise einen zusätzlichen Schalter hier oder einen neuen Parameter dort. In diesem Kapitel werden wir uns auf Ersteres konzentrieren und die neuen Möglichkeiten anhand von Beispielen kennen lernen, die in meinem GitHub-Account zur Verfügung stehen [2].

      Web Components mit Angular Elements

      Bis jetzt war Angular am besten für Gesamtlösungen geeignet. Wollte man jedoch lediglich bestehende Anwendungen um interaktive Bereiche erweitern, waren häufig andere Frameworks die erste Wahl. Ein Beispiel dafür sind statische Seiten, die von einem CMS gerendert werden und mit JavaScript-Widgets anzureichern sind.

      Mit Angular Elements dringt Angular nun auch in diesen leichtgewichtigen Bereich vor, indem es Angular-Komponenten als Web Components bereitstellt. Genau genommen muss man von Custom Elements sprechen, zumal Web Components ein Sammelbegriff für verschiedene Technologien ist. Egal wie man das Kind auch nennt, unterm Strich geht es um frameworkunabhängige Komponenten, die sich wie Standard-HTML-Elemente verhalten. Hat man das dafür verantwortliche npm-Paket @angular/elements installiert, kann eine beliebige Angular-Komponente mit der Methode createCustomElement in ein Custom Element umgewandelt werden (Listing 1.1).

      [...]

      import { createCustomElement } from '@angular/elements';

      @NgModule({

        imports: [ CommonModule ],

        declarations: [FlightCancellingComponent],

        entryComponents: [FlightCancellingComponent]

      })

      export class FlightCancellingModule {

        constructor(injector: Injector) {

          const ngElementConstructor = createCustomElement(FlightCancellingComponent, {

            injector

          });

          customElements.define('flight-cancelling', ngElementConstructor);

        }

      }

      Listing 1.1

      Um das so geschaffene Element mit dem Dependency-Injection-Mechanismus von Angular zu verbinden, übergibt das gezeigte Beispiel auch den aktuellen Injector. Die Methode customElements.define, die das Element beim Browser registriert und ihm einen Tagnamen zuweist, ist bereits Bestandteil der Custom-Elements-Spezifikation.

      Da die dahinterstehende Angular-Komponente bei Bedarf dynamisch erzeugt wird, ist sie unter entryComponents einzutragen. Das ist notwendig, damit sie der Angular-Compiler entdeckt, obwohl sie zum Zeitpunkt der Kompilierung nicht mit den anderen Angular-Komponenten verbunden ist.

      Wo und wann man das Custom Element erzeugt und registriert, ist unerheblich. Sobald die dazu notwendigen Anweisungen gelaufen sind, kann die Anwendung unabhängig vom Framework das neue HTML-Element verwenden. Ein Einsatz innerhalb von Angular könnte so aussehen:

      17 (closed)=handleClosed()>

      Alternativ dazu lassen sich Custom Elements auch zur Laufzeit dynamisch zu einer Seite hinzufügen (Listing 1.2).

      @Injectable()

      export class SimpleFlightCancellingService  {

        show(flightId: number): void {

          const flightCancelling = document.createElement('flight-cancelling');

          flightCancelling['flightId'] = flightId;

          flightCancelling.addEventListener('closed', () => document.body.removeChild(flightCancelling));

          document.body.appendChild(flightCancelling);

        }

      }

      Listing 1.2

      Hierzu kommen lediglich DOM-Bordmittel zum Einsatz. Sie sind im Gegensatz zur dynamischen Erzeugung von Angular-Komponenten sehr geradlinig und gestalten solche Szenarien um einiges einfacher.

      Ein weiteres Einsatzgebiet für

      Enjoying the preview?
      Page 1 of 1