HTML

Symfony und Angular JS

12. September 2016 HTML, Javascript, Log, PHP, Symfony No comments , , , ,

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:

Button an Formularübermittlung hindern

5. April 2016 HTML, Javascript, Log No comments , , , , , , ,

Gelegentlich kann es bei der Erstellung von HTML-Formularen nötig sein, mehrere Buttons innerhalb eines Formulares zu verwenden. Legt man ein Formular mit diversen Feldern und Buttons an, dann stößt man auf das Problem, dass mit dem Klick auf jeden Button die Seite neu geladen wird und das Formular bereits übermittelt wird.

Formularbeispiel mit normalen Buttons

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<!DOCTYPE html>
<html lang="DE">
   <head>
     <meta charset="utf-8" />
     <title>Formular</title>
   </head>
   <body>
     <form>
         Straße<br>
         <input type="text" name="straße"><br>
         Ort:<br>
         <input type="text" name="Ort">
         <button>Adresse prüfen</button>
         <button>Übermitteln</button>
     </form>
    </body>
</html>

Unser Ziel ist es aber eigentlich nur einen Übermittlungs-Button zu haben und mit den anderen Buttons zum Beispiel JavaScript Funktionen auszuführen.
Um dies zu erreichen müssen zwei wichtige Bedingungen erfüllt sein:

  • Jeder Button muss eine einzigartige id erhalten
  • Jedem Button muss ein type zugeordnet werden

Als type verwenden wir für alle Buttons welche wir nicht zur Formularübermittlung nutzen wollen button. Für unseren Übermittlungsbutton verwenden wir submit.

Formularbeispiel mit definierten Buttons

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<!DOCTYPE html>
<html lang="DE">
   <head>
     <meta charset="utf-8" />
     <title>Formular</title>
   </head>
   <body>
     <form>
         Straße<br>
         <input type="text" name="straße"><br>
         Ort:<br>
         <input type="text" name="Ort">
 
         <!--
         Buttons erhalten eine id und einen type um das Problem zu lösen
         -->
         <button id="chk_button" type="button" onclick='alert("Adresse ok!");'>Adresse prüfen</button> 
         <button id="sbm_button" type="submit">Übermitteln</button>
     </form>
    </body>
</html>

Mit dem zweiten Codebeispiel ist es nun möglich in einem Formular mehrere Buttons zu nutzen.
Die Ursache das normalerweise ein Button das Formular übermittelt liegt in der Standarddefinition für Buttons. Diese erhalten immer als Standardwert type=“submit“.