Wer Symfony und AngularJS in einem Projekt nutzen will stößt schnell auf Probleme.
In diesem Beitrag möchten wir vor allem auf die grundlegenden Probleme eingehen welche aber relative schnell gelöst werden können.

Angular Expressions kollidieren mit Twig Template

AngularJS nutzt für den Zugriff auf Daten im Zwei-Wege-Databinding Ausdrücke in geschweiften Klammern.

1
2
<input type="text" ng-model="user.name" />
Hallo {{user.name}}!

Möchten wir nun dieses Beispiel innerhalb eines Symfony Projektes nutzen wird dieses Versuchen {{user.name}} mittels TWIG zu verarbeiten und einen Fehler ausgeben.
Um dieses Problem zu Umgehen verschachteln wir unseren für Angular zu verarbeitenden Ausdruck in ein weiteres paar doppelter geschweifter Klammern und in Anführungsstriche.
Damit gibt TWIG den Ausdruck aus, als wäre dieser ein einfacher String:

1
2
<input type="text" ng-model="user.name" />
Hallo {{'{{user.name}}'}}!

Nun wird unser kleines AngularJS Beispiel wie gewohnt verarbeitet ohne mit vorhandenem TWIG zu kollidieren

Inhalte beim Laden der Seite Ausblenden

Während die Seite lädt können möglicherweise Inhalte zu sehen sein welche per Controller in Angular ausgeblendet wurden. An diesem Punkt verarbeitet Angular den DOM erst nachdem alle Inhalte sichtbar sind und der Nutzer bekommt möglicherweise Formulare oder Modals zu sehen welche eigentlich später erscheinen sollen.
Zwar verschwindet dieser Inhalt nach dem Bruchteil einer Sekunde, wenn Angular geladen wurde, doch wir können mit einem kleinen Trick alles noch beim Laden der Seite Ausblenden.

Mit der Direktive ngCloak werden Angular Templates daran gehindert sichtbar zu sein bevor die Seite komplett geladen wurde. Damit lässt sich der eben beschriebene Flakkereffekt entfernen. In diesem Beispiel wird die Verwendung als Klasse oder Attribut gezeigt:

1
2
<div id="Meldung1" ng-cloak>Meldung 1: Als Attribut</div>
<div id="Meldung2" class="ng-cloak">Meldung 2: Als Klasse</div>

Werbeanzeigen: