2024-11-19 13:49:39 +01:00
|
|
|
|
|
|
|
|
|
|
:PROPERTIES:
|
|
|
|
|
|
:ID: b5a66830-d196-4a2f-92b8-19a5c0ed080b
|
|
|
|
|
|
:END:
|
|
|
|
|
|
|
|
|
|
|
|
#+title: twig-et-angular
|
|
|
|
|
|
#+post_ID: 197
|
|
|
|
|
|
#+post_slug: twig-et-angular
|
|
|
|
|
|
#+post_url: https://www.ciperbliss.com/2015/twig-et-angular
|
|
|
|
|
|
#+post_title: twig et angular
|
2024-11-19 23:50:42 +01:00
|
|
|
|
#+post_tags:
|
2024-11-19 13:49:39 +01:00
|
|
|
|
#+post_type: post
|
|
|
|
|
|
#+post_mime_types:
|
|
|
|
|
|
#+post_guid: undefined
|
|
|
|
|
|
#+post_status: publish
|
|
|
|
|
|
#+post_date_published: <2015-12-08T09:12:42>
|
|
|
|
|
|
#+post_date_modified: <2016-05-11T07:17:10>
|
|
|
|
|
|
#+post_index_page_roam_id: fa7f2a8c-2b94-4e42-bb4c-25c026ed7ff9
|
|
|
|
|
|
#+retrieved_from_db_at: <2024-11-18 16:25:08>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
* twig et angular
|
|
|
|
|
|
:PROPERTIES:
|
|
|
|
|
|
:CUSTOM_ID: twig-et-angular
|
|
|
|
|
|
:END:
|
|
|
|
|
|
|
|
|
|
|
|
twig utilise des marquerus en double accolade, angular aussi dans ses
|
|
|
|
|
|
templates.SI on veut éviter de se marcher sur les
|
|
|
|
|
|
pieds et de voir ses instructions de template angular mangées par celles
|
|
|
|
|
|
de twig (car évaluées avant que le js n'y ait accès), il existe deux
|
|
|
|
|
|
méthodes courantes:entourer les instructions angular
|
|
|
|
|
|
de balise twig "verbatim" afin qu'elles ne soient pas interprêtées, ce
|
|
|
|
|
|
qui rallonge considérablement le code des templates en plus d'être assez
|
|
|
|
|
|
laid.
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
#+begin_example
|
|
|
|
|
|
{% verbatim %} {{ monExpressionAngular }}{% verbatim %}
|
|
|
|
|
|
#+end_example
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
ou bien on peut changer les marqueurs d'expressions angular dans la
|
|
|
|
|
|
config de notre app. Par example, utiliser des double parenthèses. mon
|
|
|
|
|
|
clavier azerty préfère, car cela évite de faire deux boutons pour un
|
|
|
|
|
|
caractère. Pour cela, dans l'instanciation de votre app angular, dans la
|
|
|
|
|
|
config, mettez le service $interpolateProvider et définissez lui ses
|
|
|
|
|
|
symboles de début et de fin comme ceci:
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
#+begin_src js
|
|
|
|
|
|
(function () { window.tykaynApp = angular.module('tykaynApp', []) .config(['$interpolateProvider', function ($interpolateProvider) { $interpolateProvider.startSymbol('(('); $interpolateProvider.endSymbol('))'); }]) ;})();
|
|
|
|
|
|
#+end_src
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
Ainsi vous aurez la possibilité de faire vos expressions angular dans
|
|
|
|
|
|
twig avec des double parenthèses. (Sans oublier de définir ng-app et
|
|
|
|
|
|
ng-controller dans votre template)
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
#+begin_example
|
|
|
|
|
|
(( monExpressionAngular ))
|
|
|
|
|
|
#+end_example
|
|
|
|
|
|
|
|
|
|
|
|
|
