Angularjs in einer symfony2-Anwendung

73

Ich arbeite an einer SF2-Anwendung, die im Frontend viel Javascript verwendet.

SF2 bietet mir eine gute Möglichkeit, eine schöne REST-App zu erstellen, meine Datenbank mit Doctrine zu verwalten, Twig für Vorlagen zu verwenden und so weiter, aber ich würde gerne Angularjs verwenden.

Ich weiß, dass Angularjs und SF2 zwei verschiedene Frameworks mit unterschiedlichen Ansätzen sind, aber ich frage mich, wie diese Arbeit am besten funktioniert.

Lohnt es sich überhaupt?

Wenn ja, was ist Ihrer Meinung nach die sauberere und effizienteste Lösung?

Vielleicht PHP anstelle von Twig für Vorlagen verwenden, um eckige geschweifte Klammern zu verwenden?

symfony angularjs Louis Grellet
quelle

Antworten:

64

Ich denke Symfony2kann perfekt damit arbeiten AngularJS. Der Beweis ist, dass ich auf der einen Seite mit Symfony eine API und auf der anderen Seite mit AnglularJS eine Web-App erstelle.

Außerdem generiere ich aus bestimmten Gründen meine Ansichten in meiner Web-App mit Twig. Ich binde {% verbatim %} {% endverbatim %}jedes Mal, wenn ich Angular in meinen Ansichten verwenden muss, die geschweiften Klammern von Angular in eine Zweiganweisung ein.

Halim Qarroum
quelle
9
Sie können auch die Interpolations-Tags von anglejs für Ihre App ändern
Kevin Bond
@intrepion Wie lassen Sie die AngularJS-Direktiven mit den FormType-Feldern von Symfony funktionieren, z. CollectionType? Ich habe ein Problem stackoverflow.com/questions/38389740/…
utkarsh2k2
26

Ab Twig 1.12 wurde das Raw-Tag wörtlich umbenannt :

{% verbatim %}
    <ul>
    {% for item in seq %}
        <li>{{ item }}</li>
    {% endfor %}
    </ul>
{% endverbatim %}

Alles dazwischen wird nicht von der Twig Engine analysiert und kann von AngularJS verwendet werden.

Ich würde jedoch empfehlen, die AngularJS-Trennzeichen zu ändern. Andernfalls kann es schwierig sein, beim Betrachten Ihrer Vorlagen zwischen Twig- und AngularJS-Code zu unterscheiden.

Gipfel
quelle
17

Ich bin mit der gleichen Situation konfrontiert. In meinem Fall habe ich beschlossen, die Client- und Serverprojekte aufzuteilen. Ich habe symfony2 als serverseitig verwendet, da es neben anderen Vorteilen auch Einfachheit und Benutzerfreundlichkeit bietet. Andererseits habe ich mit AngularJS ein einfaches HTML-Projekt erstellt, das für mich nützlich ist, da ich eine HTML5 Mobile App mit denselben Client-Dateien erstellen möchte.

In diesem Fall denke ich, dass der Kern des Problems hier im Authentifizierungs- und Autorisierungsprozess liegt. Sie müssen auf der Serverseite eine sichere Firewall für die Arbeit in REST implementieren (z. B. WSSE: Symfony2: Erstellen eines benutzerdefinierten Authentifizierungsanbieters ).

Und dann die entsprechende Implementierung auf der Clientseite (AngularJS), die nützlichste Ressource, die ich gefunden habe: Github: witoldsz / angle-http-auth .

Wenn Sie eine tiefere Implementierung mit Ihrem sf2-Projekt wünschen, können Sie AngularJS mithilfe der Filter von Assetic kompilieren und die Leistung beim Laden von Seiten steigern.

Iván Guillén
quelle
13

Ich habe den folgenden Code verwendet, um die AngularJS-Delmiter zu ändern

Coffeescript:

# Change the angular delimiters for twig compatability
# and load module with ngResource
WAFapp2 = angular.module("WAFapp2", ['ngResource'], ($interpolateProvider) ->
  $interpolateProvider.startSymbol "{[{"
  $interpolateProvider.endSymbol "}]}"
)    var WAFapp2;

oder Javascript:

var WAFapp2;

WAFapp2 = angular.module("WAFapp2", ['ngResource'], function($interpolateProvider) {
  $interpolateProvider.startSymbol("{[{");
  return $interpolateProvider.endSymbol("}]}");
});

dann ganz oben in meinen Layouts:

<!DOCTYPE html>
<html lang="en" data-ng-app="WAFapp2">
  <head>

dann später im Body-Tag-Bereich des HTML kann ich verwenden:

<ul>
{% for item in seq %}
    <li>{[{ item }]}</li>
{% endfor %}
</ul>

Ich denke, dies hält die Dinge sauberer und ermöglicht ein einfaches Mischen von Zweig- und Winkeletiketten. Das scheint für mich gut zu funktionieren.

gcman105
quelle
11

Eine gute Lösung für die beiden Schnurrbärte, um die Verwirrung zu vermeiden, ist die Attribut-basierte Direktive namens ng-bind: <p ng-bind="yourText"></p>ist dieselbe wie<p>{{yourText}}</p>

pabloRN
quelle
11

Es ist ratsamer, die Winkel-App getrennt zu halten. Verwenden Sie Symfony einfach als API für den Datenabruf / die Persistenz und als Sicherheitsanbieter.

Dies würde eine größere Trennung von Ansicht und Datenschicht ermöglichen. Infolgedessen können Sie auf der Frontend-Seite arbeiten, ohne noch an die Backend-Implementierung zu denken. Sie müssen nur die API-Aufrufe verspotten.

Ken
quelle
^ - Das. Sie tun sich selbst einen schlechten Dienst, indem Sie ng mit Twig mischen. Wenn Sie Ihre API richtig machen, können Sie die Benutzeroberfläche jederzeit herausreißen und entkernen, ohne sich mit der Geschäftslogik zu befassen. Das Testen ist dadurch einfacher.
Thinice
8

Ich habe versucht, eine einseitige Anwendung mit Symfony und anglejs zu erstellen. Ich habe Symfony2 mit dem FOSRestBundle verwendet, um eine Restful-API zu erstellen, und Angularjs, um das Frontend zu erstellen.

AngularJs benötigt für sich genommen kein Symfony2-Framework, um eine Anwendung zu erstellen, solange es über eine API verfügt, mit der es kommunizieren kann. Ich fand Symfony2 jedoch in folgenden Bereichen nützlich:

  1. Übersetzung in der Vorlage. Die Daten in der API-Nutzlast müssen in den meisten Fällen nicht übersetzt werden. Die Verwendung der Symfony I18N-Unterstützung für die Vorlage ist absolut sinnvoll.

  2. Laden von Optionslisten. Angenommen, Sie haben eine Länderliste mit mehr als 200 Optionen. Sie können eine API erstellen, um ein dynamisches Dropdown-Menü in anglejs zu füllen. Da diese Optionen jedoch statisch sind, können Sie diese Liste einfach im Zweig erstellen.

  3. Vorladen von Daten / Inhalten. Sie können Vorlagen- oder JSON-Daten auf der Hosting-Seite vorab laden, wenn Sie möchten

  4. Nutzen Sie die Authentifizierungsfunktion von Symfony. Sie können dieselbe authentifizierte Sitzung für die API auch für die Anwendung verwenden. Oauth muss nicht verwendet werden.

  5. Das Assetic-Bundle ist sehr nützlich, um Bündel von Javascript-Dateien, die von AngularJs verwendet werden, dringend zu analysieren und zu minimieren

Ich habe jedoch folgende Herausforderungen festgestellt:

  1. PHP-Sitzungssperre für mehrere Ajax-Aufrufe. Benötigen Sie einen besseren Weg, um die PHP-Sitzung freizugeben, indem Sie 'session_write_close ()' aufrufen oder eine Datenbank für die Sitzung verwenden. Wo ist der beste Ort in Symfony, um diese Funktion 'session_write_close' aufzurufen, damit wir die Sitzung so schnell wie möglich für weitere Ajax-Aufrufe freigeben können?

  2. Laden / Synchronisieren geladener Daten Angenommen, Sie haben eine Liste von Elementen (wie eBay-Elementen) in einem Browser angezeigt. Sie möchten diese Liste im Client-Browser aktualisieren, als die Liste auf der Serverseite aktualisiert wurde. Möglicherweise müssen Sie die Liste regelmäßig abfragen oder etwas wie Firebase verwenden. Firebase ist in den meisten Fällen ein Overkill. Umfragen sehen für mich nicht gut aus, aber wie kann ich das am besten erreichen?

Bitte fügen Sie Ihre Kommentare hinzu. Vielen Dank

David Lin
quelle
2
Für Ihre zweite Herausforderung websocketist der richtige Weg. Ich bin mir bewusst, dass es fast zwei Jahre her ist, seit Sie einen Beitrag verfasst haben.
Lashae
3

Sie können diese Vorlage verwenden oder diese Vorlage studieren und darauf basieren.

Ist eine Vorlagenanwendung mit gesicherter Kommunikation über eine RestFul-API zwischen dem Client-Teil mit AngularJS und dem Server-Teil mit Symfony2.

Ein weiteres Projekt , das Sie überprüfen sollten, ist Aisel, Open-Source-CMS für Hochlastprojekte, die auf Symfony2 und AngularJS basieren

Cristian Chaparro A.
quelle
3

Ich hatte selbst viele Probleme damit, Symfony und AngularJS zusammenarbeiten zu lassen. Während ich daran arbeitete, habe ich jedoch einige Dinge gelernt, die Ihnen helfen können:

  1. Um die AngularJS-Ausdrücke {{ variable }}von geschweiften Klammern zu trennen , haben Sie drei Alternativen:

ein). Verwenden Sie die Anführungszeichen um die AngularJS-Ausdrücke{{ '{{ variable }}' }}

b). Umgeben Sie Ihren AngularJS-Code mit{% verbatim %} your code {% endverbatim %}

c). Verwenden Sie den AngularJS- interpolateProviderDienst

angular.module('myApp', []).config(function($interpolateProvider){
    $interpolateProvider.startSymbol('{[{').endSymbol('}]}');
});
  1. In der js-Datei kann twig die URL nicht für Sie generieren. Hierfür können Sie "friendsofsymfony / jsrouting-bundle" verwenden. Nach der Installation können Sie es verwenden als: $http.get(Routing.generate('route_name', {'id':id}));

Dies funktioniert möglicherweise nicht für Sie zur Einreichung, warum? Eine Sache, die Sie über $ http.post wissen sollten, ist, dass die Daten nicht als "Formulardaten", sondern als "Request Payload" gesendet werden. Dies ist die normale Methode, um Daten über HTTP POST zu übertragen. Das Problem ist, dass dieser „normale Weg“ nicht einer Formularübermittlung entspricht, was zu Problemen bei der Interpretation von Daten mit dem Symfony Request-Objekt führt.

Verwenden Sie stattdessen Folgendes:

$http.put(url, $.param({foo: 'bar'}), {
     headers: {'Content-Type': 'application/x-www-form-urlencoded'}
 });

  1. Wenn Sie wissen möchten, ob eine Anforderung eine AJAX-Anforderung innerhalb des Controllers ist, verwenden wir normalerweise die Methode isXMLHttpRequest (). Das Problem ist, dass Angular seine Anforderungen nicht als XMLHttpRequest-Anforderungen identifiziert. Benutze das:

    var app = angular.module('myModule', []); app.config(['$httpProvider', function($httpProvider) { $httpProvider.defaults.headers.common["X-Requested-With"] = 'XMLHttpRequest'; }]);

  2. Während Sie Formulare erstellen, können Sie das Formular über AngularJS anzeigen und Symfony Form die Anforderung bearbeiten lassen. Dazu müssen Sie den CSRF-Schutz deaktivieren:

    public function setDefaultOptions(OptionsResolverInterface $resolver) { $resolver->setDefaults(array( 'data_class' => '...', 'csrf_protection' => false )); }

Jetzt kann Ihr Symfony-Formular Daten von einer benutzerdefinierten Angular-Anforderung empfangen.

Abgesehen von all den Dingen bin ich mir immer noch nicht sicher, ob ich Ihr Formular mit Symfony oder AngularJS anzeigen soll .

Hoffe das hilft.

utkarsh2k2
quelle
2

Theoretisch würde nur Ihre Indexseite aus Symfony gerendert, sodass Sie überhaupt keinen Zweig verwenden müssen. Sie müssen nur die erste Seite rendern und dann übernimmt das eckige Framework. Angularjs verfügt über eine eigene Vorlagensyntax und eigene Funktionen. Ich glaube nicht, dass es notwendig ist, diese beiden zu mischen, da Sie beide Frameworks vollständig trennen können. Vielleicht lassen Sie Ihren Server mit der Datei index.html (Ihrer eckigen App) auf yourdomain.com antworten, und alles von symfony kommt von / API-Präfix oder so ähnlich. Stellen Sie sich vor, Ihr WebApi-Projekt ist ein Server und ein AngularJS-Projekt auf dem anderen. Meiner Meinung nach würden sie nur über API-Aufrufe sprechen, ohne dass Vorlagen gemischt werden müssten.

qwerty_igor
quelle
0

Beim Durchsuchen des Webs bin ich auf verschiedene Lösungen gestoßen. Sie können beispielsweise wie bereits erwähnt die Winkelsymbole ändern. Ich habe es jedoch vorgezogen, es so einfach wie möglich zu halten, indem ich twig einfach anwies, die Winkelsymbole auszugeben:

{{ '{{entity.property}}' }}

http://louisracicot.com/blog/angularjs-and-symfony2/

Schwindlig Bryan High
quelle
0

Verwendung {@ variable @}in Vorlagen. Nach Vorlage nur ersetzen erzeugt {@mit {{und @}mit }}mit einem einfachen str_replaceFunktion. Dieser Weg ist sauber und viel schneller als die Verkettung von Saiten und so weiter.

Aleksandr Aleksandr
quelle
0

Ich bin auf die gleiche Situation gestoßen, in der ich eine einseitige Anwendung mit AngularJS auf Symfony2 entwickeln musste.

Wenn Sie die beiden Apps trennen können, perfekt !!! Dies würde eine gute Trennung zwischen Modell- und Ansichtsebene bewirken. Wenn nicht, wie es bei meiner Anwendung der Fall war, können Sie AngularJS mit Symfony2 und TWIG sicher einwandfrei verwenden.

Ich habe Anführungszeichen um die AngularJS-Ausdrücke verwendet wie -

{{ '{{someAngularJsExpression}}' }}

Es dauert nur einige Zeit, bis Sie sich daran gewöhnt haben, aber wenn Sie dies tun, werden Sie nicht mit vielen Problemen konfrontiert sein. Mit Symfony können Sie auch andere Template-Engines verwenden, aber ich würde es vorziehen, dies nicht zu tun.

Mein Rat ist also, entweder zwei verschiedene Anwendungen für AngularJS und Symfony zu haben. Wenn Sie nicht über die Ressourcen verfügen, können Sie so vorgehen, wie ich es getan habe. Mach dir keine Sorgen, du wirst dich daran gewöhnen.

Rahul Sharma
quelle
0

Heute wollen alle Symfony-Backend mit API und Angular / Vue-Frontend - es ist schön, aber auf diese Weise verlieren wir alle Symfony-Fähigkeiten in Frontned.

Ich verwende Angular erfolgreich mit meinen Symfony-Apps. Vielleicht ist es keine Hochleistungssache, aber es funktioniert.

Einige Tipps für Sie:

1

Lesen Sie mehr über $ interpolateProvider

angular.module('myApp', [], function($interpolateProvider) {
            $interpolateProvider.startSymbol('{[{');
            $interpolateProvider.endSymbol('}]}');
  });

Auf diese Weise können Sie {{}} im Winkel für etwas anderes ändern. Ich benutze {[{und}]}, damit es den Zweig nicht stört

2

Das zweitbeste hier ist https://symfony.com/doc/master/bundles/FOSJsRoutingBundle/index.html

Dadurch wird das Symfony-Routing mit js verbunden, sodass alle Ihre Winkelansichten / oder Ajax-Aufrufe in js von symfony generiert werden können. Dies bietet Ihnen enorme Möglichkeiten

Michał G.
quelle
-2

Sie können einfach geschweiften Klammern entkommen wie:

Hello {{ '{{' }} name {{ '}}' }}

und es wird auf den nächsten HTML-Code analysiert:

Hello {{ name }}

Sie können auch versuchen, einen HTML-codierten Zeichensatz mit geschweiften geschweiften Klammern zu verwenden, zum Beispiel:

&#123; name &#125;

Aber ich bin nicht sicher, ob es von AngularJS lib verstanden wird :).

Victor Bocharsky
quelle