📱
M335 - Mobile-Applikation realisieren
  • ▶️Intro
  • 🗓️Kursplanung & Organisation
  • 🛠️Infrastruktur und Tools
  • âť“FAQ
  • TAG 1
    • đź“–Native, Hybrid, Web
    • đź“–Frameworks
    • đź“–Angular
    • 🦸‍♂️Tour of Heroes
      • đź“–Introduction
      • đź“–Create a project
      • đź“–1. The hero editor
        • đź’ˇHinweise und Zusatzaufgaben zu Kapitel 1
      • đź“–2. Display a list
        • đź’ˇHinweise und Zusatzaufgaben zu Kapitel 2
      • đź“–3. Create a feature component
        • đź’ˇHinweise zu Kapitel 3
      • đź“–4. Add services
        • đź’ˇHinweise zu Kapitel 4
      • đź“–5. Navigation
        • đź’ˇHinweise und Zusatzaufgaben zu Kapitel 5
        • đź’ˇErgänzend zu Navigation
      • đź’ˇ Debugging
    • đź“–CSS / SASS / SCSS
  • Tag 2
  • đź“–Ionic
  • âť“Ionic Projekt erstellen
  • đź’ˇIonic Ăśbungen
  • đź“–Usability
  • đź“–Prototyping
  • đź“–UI Elements
  • 🛠️ Projektsetup
  • Tag 3
    • đź“–Native Grundlagen
    • đź“–Capacitor EinfĂĽhrung
    • đź’ˇApp auf Gerät laufen lassen
    • đź’ˇNative Komponente mit Capacitor verwenden
    • âť“Starten auf Gerät mit Live-Reload
  • đź“–Persistenz
    • đź“–Online Persistenz
    • đź“–Offline Persistenz
  • Tag 4
    • đź“–Testing
      • âť“Testplan: Praxisbeispiel
      • âť“Testprotokoll: Praxisbeispiel
  • Tag 5
    • đź’ˇBuild, Veröffentlichung, Ausblick
Powered by GitBook
On this page
  • Was ist Angular?
  • Funktionsweise einer Single Page Applikation
  • Vorteil einer Single Page Applikation
  • Geschichte von Angular
  1. TAG 1

Angular

PreviousFrameworksNextTour of Heroes

Last updated 1 month ago

Was ist Angular?

ist ein Open-Source TypeScript basiertes Frontend Framework, welches 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!

<div>
  <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>
</div>

Dazugehöriger Controller:

export class ElementComponent {
    list: Framework[] = [
    {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

đź“–
Angular