📖Angular

Was ist Angular?

Angular ist ein Open-Source TypeScript basiertes Frontend Framework, welchen von Google gesponsert und Unterhalten wird.

In Angular werden mit HTML-Code deklarativ die Oberflächen gestaltet. Ein wichtiger Aspekt ist, dass Anwendungslogik nur in den TypeScript-Dateien definiert wird. Dieser sollte möglichst unabhängig von der Oberfläche sein. Im Gegensatz zu manch anderen MVC-Frameworks erweitert Angular den HTML-Code aber nur, anstatt ihn zu abstrahieren. Schon an diesem simplen Beispiel zeigt sich die Leichtigkeit von Angular. Der HTML Code ist einfach zu verstehen, enthält jedoch keine Logik. Durch das von Angular kontrollierte Binding ändert sich die Anzeige in Zeile 6, sobald in Zeile 5 ein Wert geändert wird. Der vergleichbare jQuery Code wäre deutlich länger!

<ion-content>
  <span>Anzahl Elemente: {{list.length}} </span>
  <ul>
    @for(let element of list; track list) {
      <li>
        <input type="text" [(ngModel)]="element.text">
        <span>{{element.text}}</span>
      </li>
    }
  </ul>
</ion-content>

Dazugehöriger Controller:

export class ElementComponent {
    list: any[] = [
    {text:'angularjs'},
    {text:'jQuery'}];
}

Funktionsweise einer Single Page Applikation

Vorteil einer Single Page Applikation

• Gesamte Applikations-Logik im Browser

• Hohe Geschwindigkeit durch Wegfall langer Ladezyklen

• App-Feeling durch schnelle dynamische Inhaltsanpassungen

• Tiefes zu übertragendes Datenvolumen, mit einhergehendem Performance-Vorteil bei Mobile-Webapplikationen.

Geschichte von Angular

AngularJS v1.x wurde nicht für den mobilen Einsatz gebaut, Angular (> v2) hingegen schon. Angular ist durch eine hierarchische Dependency Injection um einiges schneller als AngularJS und ein grosses Update. Hier weitere wichtige Vorteile von Version > 2.0:

• Komponenten basierte Programmierung

• Ist ein Framework

• Verwendet TypeScript

• Verwendet component und directives

• Etwas kompliziertes mit Aufwand verbundenes Setup, da Abhängigkeiten zu Bibliotheken bestehen

• Verwendet camelCase, z.B. ngModel