AngularJS

Home » Frameworks » AngularJS

AngularJS & Angular 2

 

Angular ist ein Open-Source-Framework, das es ermöglicht, Web-Apps und Single-Page-Anwendungen mit JavaScript oder HTML zu erstellen. Mit Angular lässt sich die Entwicklung von Apps deutlich effizienter gestalten, und auch das Testing wird dadurch einfacher. Davon profitieren wir als Entwickler, aber auch ihre Anwendung. Mit Angular entwickeln wir schneller, testen Grenzen aus und machen jede noch so gute Applikation ein bisschen besser. So entstehen intelligente Web-Anwendungen, die man zukunftssicher, ortsunabhängig und auf verschiedensten Endgeräten einsetzen kann.

Angular war im Jahre 2009 das erste Web-Framework, das Nutzern klare Richtlinien und Standards in der Programmierung bot. Das ermöglichte erstmals das schnelle und effektive Arbeiten eines Ingenieurs – im Web. Weitere Vorteile sind die gute Testbarkeit sowie ein sehr großes Ökosystem. Angular 2 hebt dies noch einmal auf ein ganz neues Level – dank der Einbindung von TypeScript und moderner Architekturmuster wie Reactive Programming.

Das bei Google entwickelte Framework bringt bewährte Konzepte aus der Rich-Client-Entwicklung in den Browser. An die Stelle der aufwändigen und fehlerträchtigen Manipulationen auf Ebene der HTML-Elemente tritt ein sauberes Model-View-Controller-Konzept.

AngularJS macht einen Großteil des Codes, den man normalerweise schreibt, überflüssig. Wer bisher mit jQuery gearbeitet hat, staunt häufig, wie viel kleiner der Quelltext wird. Die Reduktion des Codes begründet sich durch die Automatisierung von Standardaufgaben.

Viel Arbeit investiert man in die manuelle DOM-Selektion, DOM-Manipulation und Event-Behandlung. Um z.B. ein Element im DOM verändern, muss man es referenzieren können. Das macht man normalerweise über die Vergabe einer ID/Class und benutzt einen Selektor, wie $('#mein-element').. Hat man es selektiert, schreibt man explizit, was mit dem Element gemacht werden soll, z.B. $('#mein-element').addClass('active'). Es gibt auch die Möglichkeit auf ein Ereignis zu reagieren, wie z.B. das Bewegen der Maus. In diesem Fall würde man normalerweise einen Event-Listener mit einem Callback setzen.

Diese Aktionen nehmen in einem typischen Projekt extrem viel Platz in Anspruch. AngularJS automatisiert diese Sachen fast vollständig durch Databinding und Direktiven.

Ein Beispiel um es zu veranschaulichen.

Zwei-Wege-Datenbindung

<input type="text" ng-model="search">
<p>Du suchst gerade nach: {{search}}</p>

Wenn etwas in das Eingabefeld eingebt, wird der Text an der Stelle ausgegeben, wo {{search}} steht. Dies funktioniert durch die Zwei-Wege-Datenbindung.

Die Direktiven helfen, große Teile eine Applikation ohne eine Zeile Code zu schreiben.

Eine einfache Direktive sieht so aus:

<p ng-show="search">Du suchst gerade nach: {{search}}</p>

Der Paragraph wird nun erst sichtbar, wenn etwas in das Eingabefeld geschrieben wird. ng-show ist eine Direktive, die Elemente nur einblendet, wenn die übergebene Variable einen Wert enthält.

 

Nach langer Entwicklungszeit ist die von vielen Entwicklern sehnsüchtig erwartete Version 2.0 von Angular erschienen. Das neue Release des derzeit wohl wichtigsten JavaScript-Framework zur Entwicklung von Single Page Applications (SPA) stellt eine komplette Überarbeitung der Architektur dar. So wird Angular nun nicht mehr allein als Framework zum Erstellen von Webseiten positioniert, sondern zunehmend auch für den Bereich Cross-Plattfom-Entwicklung interessant.

Durch die massiven Änderungen verhält sich das mit Microsofts JavaScript-Aufsatz TypeScript geschriebene Framework nicht kompatibel zum Vorläufer – AngularJS 1.x. TypeScript ist ein JavaScript-Aufsatz mit zusätzlichen Features wie statischer Typisierung und objektorientierte Programmierstil über die Nutzung von Klassen.Die Entwickler des von Google geförderten Projekts haben aber über die letzten beiden Jahre hinweg viel dafür getan, dass Anwendern die Migration auf Angular 2 einfach fallen soll.

Ausserdem is Angular im Gegensattz zu AngularJS von Anfang an voll für mobile Devices ausgelegt. Wichtige Kernfunktionen werden nun in Modulen bereitgestellt, was es vereinfachen soll, fremde Bibliotheken mit Angular zu verwenden.

Wir entwickeln:

Rich Web Applications / Single Page Applications

Wir entwickeln mit Angular JS eigenständige Anwendungen, die im Browser ausgeführt werden können. So sind benutzerfreundlichere, performantere und offlinefähige Oberflächen möglich, die im Funktionsumfang mit Desktop-Anwendungen vergleichbar sind.

Mobile Applikationen

AngularJS, Ionic und ngCordova sind unsere Frameworks zum erstellen von Plattformübergreifenden Apps. Jedes Framework kann seine Stärken ausspielen. Während AngularJS für die Code-Architektur verantwortlich ist, ist Ionic für das Frontend zuständig. ngCordova sorgt für den Zugriff auf die Smartphone-Hardware.

Systemübergreifendes Prozessmanagment

Mit Angular JS ist es möglich,verschiedenen Prozessen auf unterschiedlichen Systemen zu einer einzelnen funktionierenden Single Page Application zusammenzufassen, die die Prozesse übersichtlich und sicher verwaltet.

 

Das können Sie erwarten:

Applikationen die Ihre Anforderungen genauestens erfüllen

Schnelle & effiziente Entwicklung duch Nutzung des Frameworks

Unit- und Funktionstests

Interaktive Web-Anwendungen mit dynamischen Inhalten

Bessere User Experience und durchdachte Navigation durch SPA

extrem kurze Ladezeiten der Anwendungen

 

Sie suchen eine Agentur für Ihre AngularJS - SPA Entwicklung?

Wir freuen uns auf Ihr Projekt und übernehmen gerne die Weiterentwicklung bestehender AngularJS- Applikationenoder entwickeln mit Ihnen gemeinsam eine neue AngularJS Anwendung.

 

Kontaktieren Sie uns jetzt!

Angular 2? - 5 Vorteile, die auch Nicht-Programmierer kennen sollten

Bessere Conversion Rate durch schnellere Seitenladezeiten

Angular 2 kann viel schneller laden, als AngularJS und immernoch schneller als das schon als sehr performante React. Das liegt zum einen an der verbesserten Architektur des Frameworks und den schnelleren Compiler. Die größten Performance Sprünge kommen aber durch die Möglichkeit, Angular 2 Applikationen schon vor dem Seitenladen kompilieren zu lassen und einzelne Module nur bei Bedarf nachzuladen (Lazy Loading). Das sorgt nicht nur dafür, dass der Browser weniger zu tun hat. Auch die Größe der Dateien, die an den Browser gesendet werden müssen, reduziert sich dadurch deutlich. Und damit wird Angular 2 gerade in Umgebungen mit langsamer Internetverbindung (z.B. auf dem Smartphone) zu einem echten Game Changer. Denn kürzere Ladezeiten bringen bares Geld. Wie stark sich die Seitenladezeiten auf die Conversion Rate einer Seite auswirkt, hat schon eine Walmart Studie aus dem Jahr 2012 gezeigt. Hier konnte die Conversion-Rate von 3,5% auf 9% gesteigert werden, indem man die Seitenladezeit auf unter einer Sekunde reduzierte.

Bessere Skalierbarkeit durch ECMAScript 6 Module, Typescript und Lazy Loading

Die neue Version von Angular ist eines der ersten Javascript Frameworks, die intensiven Gebrauch von den Funktionen der neuesten Javascript Version (ECMAScript 6) machen. Objektorientierte Programmierung (OOP) und die Aufteilung einer Applikation in verschiedene wiederverwendbare Module war bislang in Javascript nur mit komplizierten Hilfsmitteln möglich, die nicht viele Entwickler beherrschen. Die neue Javascript Version übernimmt viele bekannte Konzepte aus etablierten Programmiersprachen wie Java und PHP. Typescript (eine Erweiterung von Javascript) bietet den Entwicklern sehr gutes Tooling, was dazu führt, dass Code schneller geschrieben werden kann und Fehler einfacher auffindbar sind. Nicht zuletzt muss man mit Angular 2 keine Umwege über 3rd Party Extensions mehr gehen, um nur solche Teile des Codes zu laden, die der Webseiten-Benutzer auch wirklich braucht (Lazy Loading). Das sorgt dafür, dass selbst sehr große Angular 2 Projekte schnell geladen werden können.

Für Sie bedeutet das, dass Sie mit Angular 2 kleine Projekte starten können, die sich dann später beliebig weiter ausbauen und skalieren lassen. Google selber zeigt, dass selbst gigantisch große Web-Projekte mit Angular 2 umzusetzen sind: Gerade wird Google Adwords auf das neue Framework umgeschrieben.

Bessere Code-Qualität durch automatisiertes Testing

Schon AngularJS war bekannt dafür, dass für den Code, der mit dem Framework geschrieben wurde, leicht automatisierte Tests erstellt werden können. Automatisierte Tests laufen im Hintergrund und überprüfen, ob Änderungen an ihrem Applikations-Code zu neuen Fehlern geführt haben. Eine gute Test-Abdeckung sorgt dafür, dass Ihre Web-Applikation kontinuierlich weiterentwickelt werden kann, ohne dass Sie sich sorgen machen müssen, dass durch die Neuerungen existierende Features aufhören zu funktionieren. Angular 2 macht solche Tests noch einfacher. Und je einfacher sich solche Tests erzeugen lassen, desto mehr Tests werden Ihre Entwickler schreiben.

Schnellere, agilere Entwicklungszyklen durch modularen Aufbau

Schon AngularJS konnte durch eigens entwickelte Module erweitert werden. Angular 2 treibt diese Entwicklung jedoch auf die Spitze. Die ganze Applikation besteht aus einer Hierarchie aus Komponenten und Modulen, die beliebig ausgetauscht und kombiniert werden können. Für Entwickler heißt das, dass Sie sich auf einen speziellen Teil der Web-Applikation konzentrieren können, ohne die Arbeit anderer Entwickler zu beeinflussen. Das Team kann dadurch unabhängiger voneinander arbeiten, Module die außer Haus programmiert wurden können leichter in das eigene Projekt integriert werden und Sie als Projekt-Manager können Sprints einfacher planen.

Internationalisierung, die sich an Standards hält

Die Übersetzung von Javascript-Applikationen in andere Sprachen ist für Entwickler ein Graus. Angular 2 bringt nun endlich einen Compiler, der sich an die Software-Standards der Internationalisierung hält. Angular 2 exportiert Ihnen alle zu übersetzenden Texte Ihrer Webapplikationen in eine Standard XML Datei, die Sie unverändert an ein Übersetzungsbüro geben können (bisher werden die Standards XLIFF, XTB und XMB unterstützt). Das sorgt nicht nur dafür, dass Sie bei der Übersetzung der Webseite weniger Arbeit haben, die Standards bringen zahlreiche Hilfestellungen mit sich, die den Übersetzern dabei helfen, die tatsächliche Bedeutung der zu übersetzenden Texte zu verstehen.

Fazit

Angular 2 ist das technisch umfassendste und architektonisch durchdachteste Javascript Framework, das uns Webentwicklern derzeit zur Verfügung steht. Es gibt einen neuen State-of-the-Art und dieser wird sich in den nächsten Monaten in zahlreichen neuen Webapplikationen wiederspiegeln.