Ik werk aan een SF2-toepassing die veel javascript aan de voorkant gebruikt.
SF2 biedt me een goede manier om een mooie REST-app te bouwen, mijn database te beheren met doctrine, twig te gebruiken voor sjablonen enzovoort, maar ik zou graag Angularjs gebruiken.
Ik weet dat angularjs en SF2 2 verschillende frameworks zijn met een verschillende benadering, maar ik vraag me af wat de beste manier is om dit te laten werken.
Is het het zelfs waard?
Zo ja, wat is volgens u de schonere en meest efficiënte oplossing?
Misschien php gebruiken in plaats van twig voor sjablonen om angularjs accolades te gebruiken?
Antwoord 1, autoriteit 100%
Ik denk dat Symfony2perfect kan werken met AngularJS. Het bewijs is dat ik aan de ene kant een API maak met Symfony en aan de andere kant een web-app met AnglularJS.
Bovendien genereer ik om de een of andere reden mijn weergaven in mijn web-app met Twig. Ik sluit de accolades van Angular eenvoudig in een twig {% verbatim %} {% endverbatim %}statement in elke keer dat ik Angular in mijn weergaven moet gebruiken.
Antwoord 2, autoriteit 41%
Vanaf Twig 1.12 is de onbewerkte tag hernoemd naar woordelijk:
{% verbatim %}
<ul>
{% for item in seq %}
<li>{{ item }}</li>
{% endfor %}
</ul>
{% endverbatim %}
Alles daartussenin wordt niet geparseerd door de Twig Engine en kan worden gebruikt door AngularJS.
Hoewel ik zou aanraden de AngularJS-scheidingstekens te wijzigen. Anders kan het moeilijk zijn om onderscheid te maken tussen Twig- en AngularJS-code als je naar je sjablonen kijkt.
Antwoord 3, autoriteit 27%
Ik zit met dezelfde situatie, in mijn geval heb ik besloten om de client- en serverprojecten te splitsen, ik gebruikte symfony2 als server-side omdat het eenvoud en bruikbaarheid is naast andere voordelen die mij met zich meebrengen.
Aan de andere kant heb ik een eenvoudig HTML-project gemaakt met AngularJS, dat is handig voor mij omdat ik een HTML5 mobiele app wil maken met dezelfde clientbestanden.
In dat geval denk ik dat de kern van het probleem hier in het authenticatie- en autorisatieproces zit. U moet een veilige firewall implementeren om in REST te kunnen werken (bijvoorbeeld WSSE: Symfony2: How to maak een aangepaste authenticatieprovider) aan de serverzijde.
En dan de bijbehorende implementatie aan de clientzijde (AngularJS), de meest bruikbare bron die ik heb gevonden:
Github:witoldsz/angular-http-auth.
Als je een diepere implementatie van je sf2-project wilt, kun je AngularJS compileren met behulp van de filters van Assetic en betere prestaties behalen bij het laden van pagina’s.
Antwoord 4, autoriteit 20%
Ik heb de volgende code gebruikt om de AngularJS-delmiters te wijzigen
Koffiescript:
# Change the angular delimiters for twig compatability
# and load module with ngResource
WAFapp2 = angular.module("WAFapp2", ['ngResource'], ($interpolateProvider) ->
$interpolateProvider.startSymbol "{[{"
$interpolateProvider.endSymbol "}]}"
) var WAFapp2;
of Javascript:
var WAFapp2;
WAFapp2 = angular.module("WAFapp2", ['ngResource'], function($interpolateProvider) {
$interpolateProvider.startSymbol("{[{");
return $interpolateProvider.endSymbol("}]}");
});
vervolgens bovenaan mijn lay-outs:
<!DOCTYPE html>
<html lang="en" data-ng-app="WAFapp2">
<head>
dan later in de body-tag-sectie van de html die ik kan gebruiken:
<ul>
{% for item in seq %}
<li>{[{ item }]}</li>
{% endfor %}
</ul>
Ik denk dat dit de zaken schoner houdt en een gemakkelijke vermenging van twijgjes en hoekige tags mogelijk maakt. Dit lijkt goed te werken voor mij.
Antwoord 5, autoriteit 17%
Een goede oplossing voor de twee snorren om verwarring te voorkomen, is de op attributen gebaseerde richtlijn genaamd ng-bind: <p ng-bind="yourText"></p>is hetzelfde als <p>{{yourText}}</p>
Antwoord 6, autoriteit 17%
Het is beter om de hoekige app apart te houden. Gebruik Symfony gewoon als een api voor het ophalen/persistentie van gegevens en als beveiligingsprovider.
Dit zou een grotere scheiding tussen weergave en de gegevenslaag mogelijk maken. Hierdoor kun je aan de frontend kant aan de slag zonder na te denken over de backend implementatie. Je hoeft alleen maar de api-oproepen te bespotten.
Antwoord 7, autoriteit 12%
Ik heb geprobeerd een applicatie met één pagina te bouwen met Symfony en angularjs. Ik gebruikte Symfony2 met de FOSrestBundle om een Restful API te bouwen en Angularjs om de frontend te bouwen.
Op zichzelf heeft AngularJs geen Symfony2-framework nodig om een applicatie te bouwen, zolang het maar een API heeft om mee te praten. Ik vond Symfony2 echter nuttig op deze gebieden:
-
Vertaling in de sjabloon.
de gegevens in de API-payload hoeven in de meeste gevallen niet te worden vertaald. Het gebruik van Symfony I18N-ondersteuning voor de sjabloon is volkomen logisch. -
Optielijsten laden.
Stel dat u een landenlijst heeft met meer dan 200 opties. U kunt een API bouwen om een dynamische vervolgkeuzelijst in angularjs in te vullen, maar aangezien deze opties statisch zijn, kunt u die lijst eenvoudig in twig bouwen. -
Gegevens/inhoud vooraf laden.
U kunt desgewenst sjabloon- of JSON-gegevens vooraf laden op de hostingpagina -
Profiteer van de authenticatiefunctie van Symfony.
U kunt dezelfde geverifieerde sessie ook gebruiken voor de API voor de toepassing. U hoeft OAuth niet te gebruiken. -
De Assetic-bundel is erg handig om grote hoeveelheden Javascript-bestanden die door AngularJs worden gebruikt, aan te scherpen en te verkleinen
Ik heb echter de volgende uitdagingen gevonden:
-
PHP-sessievergrendeling voor meerdere Ajax-oproepen.
Een betere manier nodig om de php-sessie vrij te maken door ‘session_write_close()’ aan te roepen of een database voor sessie te gebruiken. Waar is de beste plaats in Symfony om die ‘session_write_close’-functie aan te roepen, zodat we de sessie zo snel mogelijk kunnen vrijmaken voor meer ajax-aanroepen? -
Geladen gegevens opnieuw laden/synchroniseren
Stel dat u een lijst met items hebt (zoals ebay-items) die in een browser worden weergegeven, u wilt die lijst in de browser van de klant bijwerken toen de lijst aan de serverzijde werd bijgewerkt. Mogelijk moet u de lijst regelmatig opvragen of iets als Firebase gebruiken. Firebase is in de meeste gevallen een overkill, polling vind ik niet leuk, maar wat is de beste manier om dit te bereiken?
Voeg uw opmerkingen toe. bedankt
Antwoord 8, autoriteit 5%
Je kunt deze sjabloongebruiken of je kunt deze sjabloon bestuderen en je erop baseren.
Is een sjabloonapplicatie met beveiligde communicatie via een RestFul API tussen het clientgedeelte met AngularJS en het servergedeelte met Symfony2.
Een ander projectdat u moet controleren, is dat Aisel een open-source CMS is voor zwaarbelaste projecten op basis van Symfony2 en AngularJS
Antwoord 9, autoriteit 5%
Ik heb zelf veel problemen ondervonden om Symfony en AngularJS samen te laten werken. Maar terwijl ik eraan werkte, heb ik een paar dingen geleerd die je kunnen helpen:
- Om de AngularJS-expressies
{{ variable }}te scheiden van accolades met twijgjes heb je drie alternatieven:
a). Gebruik de aanhalingstekens rond de AngularJS-expressies {{ '{{ variable }}' }}
b). Omring uw AngularJS-code met {% verbatim %} your code {% endverbatim %}
c). Gebruik AngularJS interpolateProvider-service
angular.module('myApp', []).config(function($interpolateProvider){
$interpolateProvider.startSymbol('{[{').endSymbol('}]}');
});
- In het js-bestand kan twig de URL niet voor u genereren. Hiervoor kun je “friendsofsymfony/jsrouting-bundle” gebruiken. Na installatie kun je het gebruiken als:
$http.get(Routing.generate('route_name', {'id':id}));
Dit werkt misschien niet voor u voor inzending, waarom? Een ding dat u moet weten over $http.post is dat het de gegevens niet als “Form Data” verzendt, maar als “Request Payload”, wat de normale manier is om gegevens via HTTP POST te verzenden. Het probleem is dat deze “normale manier” niet gelijk is aan het indienen van een formulier, wat problemen veroorzaakt bij het interpreteren van gegevens met het Symfony Request-object.
gebruik dit in plaats daarvan:
$http.put(url, $.param({foo: 'bar'}), {
headers: {'Content-Type': 'application/x-www-form-urlencoded'}
});
-
Als je wilt weten of een verzoek een AJAX-verzoek is binnen de controller, gebruiken we meestal de methode isXMLHttpRequest(). Het probleem is dat Angular zijn verzoeken niet identificeert als XMLHttpRequest-verzoeken. Gebruik dit:
var app = angular.module('myModule', []);
app.config(['$httpProvider', function($httpProvider) {
$httpProvider.defaults.headers.common["X-Requested-With"] = 'XMLHttpRequest';
}]); -
Tijdens het maken van formulieren kunt u ervoor kiezen om het formulier via AngularJS weer te geven en Symfony Form het verzoek te laten afhandelen. Daarvoor moet u de CSRF-beveiliging uitschakelen:
public function setDefaultOptions(OptionsResolverInterface $resolver)
{
$resolver->setDefaults(array(
'data_class' => '...',
'csrf_protection' => false
));
}
Je symfony-formulier kan nu gegevens ontvangen van een aangepast Angular-verzoek.
Alles terzijde, ik ben nog steeds niet zeker over één ding, of ik je formulier moet weergeven met Symfony of AngularJS.
Hopelijk helpt dit.
Antwoord 10, autoriteit 3%
In theorie zou je alleen je indexpagina laten renderen vanuit symfony, dus je hoeft helemaal geen twig te gebruiken. u hoeft alleen de eerste pagina weer te geven en dan neemt het hoekige raamwerk het over. Angularjs heeft zijn eigen sjabloonsyntaxis en -mogelijkheden. Ik denk niet dat het nodig is om die twee te mixen, omdat je beide frameworks volledig kunt scheiden. Laat je server misschien reageren met het bestand index.html (je hoekige app) op jedomein.com,
en alles van symfony komt van /api prefix, of iets dergelijks. Stelt u zich eens voor dat uw WebApi-project de ene server is en het angularjs-project de andere. ze zouden alleen via API-oproepen praten, naar mijn mening is het helemaal niet nodig om sjablonen te mixen.
Antwoord 11
Bij het zoeken op internet kwam ik verschillende oplossingen tegen. U kunt, zoals eerder gezegd, bijvoorbeeld de hoeksymbolen wijzigen. Ik gaf er echter de voorkeur aan om het zo eenvoudig mogelijk te houden door het takje simpelweg te vertellen om de hoekige symbolen uit te voeren:
{{ '{{entity.property}}' }}
http://louisracicot.com/blog/angularjs-and-symfony2/
Antwoord 12
Gebruik {@ variable @}in sjablonen. Nadat het sjabloon is gegenereerd, vervangt u gewoon {@door {{en @}door }}door eenvoudig str_replacefunctie. Deze manier is schoon en veel sneller dan het aaneenschakelen van snaren enzovoort.
Antwoord 13
Ik ben dezelfde situatie tegengekomen waarin ik een applicatie met één pagina moest ontwikkelen met AngularJS bovenop Symfony2.
Als je de twee apps kunt scheiden, perfect!!! Het zou een geweldige scheiding creëren tussen de laag Model en View.
Zo niet, zoals het geval was met mijn applicatie, dan kun je AngularJS zeker prima gebruiken met Symfony2 en TWIG.
Ik gebruikte aanhalingstekens rond de AngularJS-expressies zoals –
{{ '{{someAngularJsExpression}}' }}
Het kost alleen wat tijd om eraan te wennen, maar als je dat doet, zul je niet veel problemen tegenkomen.
Met Symfony kun je ook andere template-engines gebruiken, maar dat doe ik liever niet.
Dus mijn advies is om ofwel twee verschillende applicaties te hebben voor AngularJS en Symfony.
Als je de middelen niet hebt om dit te doen, kun je het doen zoals ik deed.
Maak je geen zorgen, je zult er wel aan wennen.
Antwoord 14
Vandaag de dag wil iedereen een symfony-backend met api en angular/vue-frontend – het is leuk, maar op deze manier verliezen we alle symfony-mogelijkheden in frontned.
Ik gebruik met succes angular met mijn symfony-apps. Misschien is het geen high-performance ding, maar het werkt.
Enkele tips voor u:
1
lees over $interpolateProvider
angular.module('myApp', [], function($interpolateProvider) {
$interpolateProvider.startSymbol('{[{');
$interpolateProvider.endSymbol('}]}');
});
Op deze manier kun je {{ }} in hoekig veranderen voor iets anders. Ik gebruik {[{ and }]} , dus het zal de tak niet hinderen
2
het op één na beste hier is
https://symfony.com/doc/master/bundles/FOSJsRoutingBundle/index. html
Hiermee verbindt symfony routing met js , zodat al uw hoekweergaven / of ajax-aanroepen in js kunnen worden gegenereerd door symfony – dit geeft u enorme mogelijkheden
Antwoord 15
Je kunt accolades eenvoudig laten ontsnappen, zoals:
Hello {{ '{{' }} name {{ '}}' }}
en het wordt geparseerd naar de volgende HTML-code:
Hello {{ name }}
U kunt ook proberen om accolades links en rechts HTML-gecodeerde tekenset te gebruiken, bijvoorbeeld:
{ name }
Maar ik weet niet zeker of het begrepen zal worden door AngularJS lib :).