Système d'onglet sous symfony

Bonjour,

je suis actuellement en train de développer une petite appli sous Symfony (je suis débutant avec ce framework, mais j'ai envie de me former dessus).
Je ne suis clairement pas spécialiste du front end, et j'ai besoin d'une petite aide.
Je voudrais faire un système d'onglet, j'ai mis en place une sidebar qui contient une liste de lien, et je voudrais que ces liens permettent de switcher ma div de contenu
Puisqu'une image explique mieux que les mots, en voici une : Pièce jointe 205826
J'ai pas mal programmé avec Angular, et donc par réflexe j'ai créé 4 templates correspondants à mes 4 liens (chacun contient "Je suis lien X")
Avec ces 4 templates je me suis dit que je pouvais passer par le contrôleur pour switcher après avoir cliqué sur un des liens, mais je crois que ça va me recharger la page, ce que je ne veux pas.

Est ce que je dois utiliser simplement du js avec un .show() .hide() ou existe t-il une meilleure solution (Comme l'idée du contrôleur) ?

Merci

pour choisir la bonne technique il faut savoir aussi si les 4 templates sont lourdes ou pas ? passer d'un onglet à un autre avec attente ou sans attente ?

si c'est quelque chose de léger un système de show, hide fera l'affaire.
coté technique, un include pour chaque template à hide(sauf le 1er bien sur)

si chaque template est assez volumineux je dirais qu'il serait bon de passer par de l'ajax.
chaque lien fait appel à une requête ajax qui correspond à une action du controller, ce dernier renvois une vue que tu affiches dans le contenu.

Les templates seront plutôt légers, ils seront composés peut être d'une quinzaine de champs chacun.
Du coup je vais peut être partir sur un système de .show() et de .hide() un peu à la Backbone alors.

Merci !

EDIT : Cependant en fait même si l'idée est bonne je vois pas trop comment m'y prendre, j'ai fait des {{ include('montemplate') }} mais je ne vois pas trop comment les cacher avec un .hide() ?

j'ai bien sur, simplifié le code. je ne sais pas comment tu l’implémentes....

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13

<div class="contenu"> <div class="template1"> {{ include('montemplate_1') }} </div> <div class="template2" style="display: none;"> {{ include('montemplate_2') }} </div> <div class="template3" style="display: none;"> {{ include('montemplate_3') }} </div> </div> ...

---

le 1er reste affiché.


pour le switch, à toi de trouver la meilleure technique. Il y a pleins de façons de faire.

Code:

---

1 2 3 4

... $(".template1").hide(); ...

---

Je ne sais même pas comment j'ai pu ne pas y penser !
Merci beaucoup !