DanLevy.net

AngularJS‑Tricks

AngularJS kann Spaß machen!

Hero image for AngularJS‑Tricks

AngularJS KANN Spaß machen!

Für: AngularJS v1.x

  1. AngularJS‑Entwickler stellen schnell fest, dass ihre mittel‑großen Anwendungen unter dem Gewicht verstreuter $watchsund der oft aufgeblähten Krücke$scope` zusammenbrechen.
  2. Halten Sie $scope frei von überflüssigem UI‑Zustand, versuchen Sie, Größe und Tiefe Ihrer gesamten Hierarchie zu begrenzen.

2‑Way‑Datenbindung: 2‑Way‑Schwert

2‑Way‑Binding allein lässt den Umstieg von anderen Frameworks wie Backbone wirklich beeindruckend wirken.

Das Problem ist: Viele Seiten übernutzen chronisch Angulars Design‑Muster.
Das führt zu einer Ausbreitung von Directives und einem $scope/rootScope, das leicht tausende Instanzen enthält und an riesigen Objekten hängen bleibt, was jede Aussicht auf effektive Garbage‑Collection zunichtemacht.

Sie wissen, worauf das hinausläuft: ein ausgelaugter Browser! Für immer dazu verdammt, mit rasender Geschwindigkeit endlose und redundante UI/DOM‑Re‑Compilings auszuführen.

Stoppen Sie die ÜBER‑Angular.JS‑ifizierung

„Wenn Ihr einziges Werkzeug ein Hammer ist, sieht jedes Problem wie ein Nagel aus.“

– altes Sprichwort

Hat Ihre Anwendung Probleme mit Directives?

current-user-status-label
  div(ng-if='loggedIn')
    view-user-surplusage(ng-if='!editMode')
      .head: contact-details(user='user')
      .tool: contact-buttons(loggedIn='loggedIn')
      a.edit-icon(ng-click='editMode = true')
    edit-user-surplusage(ng-if='editMode')
      .head: avatar-edit(user='user')
      .body: edit-contact-details(user='user')
      a.save-icon(ng-click='editMode = false')

Entwerfen wir ein flexibles User‑Widget, das Folgendes ermöglicht:

  1. Vielseitige Komponentenbildung mit DRY‑Angular‑Code
  2. Verständliche Directives, mit minimaler Größe/Tiefe (achten Sie auf Ihre ng‑repeats)
  3. Einfache Service‑Schicht
  4. Wenig eigentlicher Code – hauptsächlich HTML/View‑Code
// jade
user-widget
  div(ng-if='loggedIn')
    div.edit(ng-if='editMode')
      h4.email-icon: input(type='email', ng-model='user.email')
      h4.phone-icon: input(type='email', ng-model='user.phone')
      a.save-icon(ng-click='editMode = false')
    div.show(ng-if='!editMode')
      h1.users-icon {{ user.name  }}
      h4.email-icon {{ user.email }}
      h4.phone-icon {{ user.phone }}
      a.edit-icon(ng-click='editMode = true')
  div(ng-if='!loggedIn')
    h5: i Welcome User
    a.btn(href='/login') Login

Lösungen

Angular‑Tipps

  1. Verwenden Sie 1‑Richtungs‑Binding (z. B. { :: title } )
  2. Begrenzen Sie rekursive Verschachtelungen von Directives
  3. Und wenn Sie Directives verschachteln müssen, NIEMALS innerhalb eines ng-repeat – die Performance kann dann schnell in die Größenordnung von O(n^2)^3 geraten ;) I. Nutzen Sie nativen JS/DOM‑Code in einem Factory‑Pattern, um grundlegende DOM/UI‑Fragmente zu erzeugen, z. B. Modal‑Nachrichtenbox, Statusleiste. Rufen Sie UI‑Factories aus Directives oder Controllers auf.
  4. Bonus: Verstehen Sie Kosten und Auslöser des Browser‑Render‑Lifecycle: Animation, Composite‑Rendering, Reflows

Browserify zum Projekt‑Organisieren einsetzen

Nicht speziell für Angular, aber unverzichtbar für eine einfache Auflösung von Abhängigkeiten.

Browserify macht JS‑Projekte handhabbar, ohne nennenswerten Code‑Overhead (ok, ein paar hundert Zeichen).

Justread this section des Browserify Handbook.

Alternativen

ReactJS von Facebook

Wenn Sie viele kleine wiederverwendbare UI‑Komponenten besitzen – ReactJS könnte die bessere Wahl sein:

Polymer Project von Google

###Pure-er JS Ansatz

Loading comments...