SlideShare une entreprise Scribd logo
1  sur  41
Utiliser AngularJs
avec Symfony2
Symfony et Angular JS
Esokia Ltd
•Agence de développement web
•Depuis 7 ans à l’île Maurice
•De très nombreux projets à Maurice et à l’international
Symfony et Angular JS
Jérémy Gachet
•Développeur web depuis près de 10 ans en France et à Maurice
•Spécialisé dans les projets utilisant le framework Symfony depuis 5 ans.
Symfony et Angular JS
•Framework de développement PHP très complet
•Norme de codages
•Un nombre énorme de “Bundles” (2500)
•Une documentation très aboutie
•Une communauté active
•Grosse demande client
Symfony et Angular JS
•Framework de développement front
•MVC
•Two way data binding
•Routing
•One page app
•Projet lancé et supporté par Google
Symfony et Angular JS
+
Symfony et Angular JS
Pourquoi Coupler les deux frameworks?
● Vitesse et réactivité = meilleure expérience utilisateur
● Facilité de développements front avec AngularJS
● Indépendance du développement entre le front et le dev. (export plus facile
vers le mobile)
Symfony et Angular JS
Difficultés
• Conflits
○ Routing géré par les deux systèmes
○ Même signe d’interpolation pour angular et twig
○ Gestion des formulaires
• Gestion de la sécurité
• Perte d’une partie des fonctionnalités apportées par les commandes de
Symfony
Symfony et Angular JS
SECTION BREAK-
CENTURY GOTHIC
REGULAR 45pt /
LEADING 1.2
ALL CAPS
Symfony et Angular JS
Solution proposée
● Symfony
○ Utiliser Symfony principalement en mode RESTfull.
○ Mais aussi pour la génération des templates et du cache serveur.
● AngularJS:
○ User interface, réception et traitement local des données en Json
Symfony et Angular JS
Presentation REST
● REST (representational state transfer) est un style d’architecture
pour les systèmes hypermédia distribués.
Ses spécificités:
■ Séparation Client-serveur : les responsabilités sont séparées entre le client et
le serveur. L'interface utilisateur est séparée de celle du stockage des
données. Cela permet aux deux d'évoluer indépendamment.
■ Mise en cache : le serveur envoie une réponse qui donne l'information sur la
propension de cette réponse à être mise en cache
■ Un système hiérarchisé par couche : les états de l'application sont identifiés
par des ressources individuelles (URL)
http://fr.wikipedia.org/wiki/Representational_State_Transfer
Symfony et Angular JS
Presentation REST
Créer des urls et renvoyer des données sérialisées. (en JSON ou XML)
Normes d’urls pour la récupération des données:
●GET http://mywebsite.com/books renvoie une liste de livres
●GET http://mywebsite.com/books/123 renvoie le livre avec la PK 123
●POST http://mywebsite.com/books + donnes en post pour ajouter un livre
●PUT http://mywebsite.com/books/123 + données PUT pour modifier un livre
●PATCH http://mywebsite.com/books/123 + données PATCH pour modifier une partie d’un livre
●DELETE http://mywebsite.com/books/87 pour supprimer le livre avec la PK 87
●GET http://mywebsite.com/books/87/comments pour recuperer tous les commentaires sur le livre avec la PK 87
●GET http://mywebsite.com/books/87/comments/125 pour recuperer le commentaire avec la PK 125 lie au livre avec la PK 87
Utilisation des méthodes et des codes réponses HTTP de manière adéquates.
Symfony et Angular JS
Utiliser Symfony en mode RESTfull
Une distribution:
https://github.com/gimler/symfony-rest-edition
Qui intègre les bundles pour faciliter la création d’API REST
Symfony et Angular JS
Utiliser Symfony en mode RESTfull
Les bundles:
JMSSerializerBundle
Pour serialize simplement vos entités en json et en xml. avec la possibilité de modifier les comportements à l’aide
d’annotations ou de méthodes spécifiques
un serilizer efficace :
$serializer = JMSSerializerSerializerBuilder::create()->build();
$serializer->serialize($object, 'json');
Symfony et Angular JS
Utiliser Symfony en mode RESTfull
Les bundles:
JMSSerializerBundle
Des annotations pour modifier le contenu de vos serialisations:
● Changer le getter utilisé (et donc modifer le rendu d’un champs comme vous le souhaitez)
/** @JMS/Accessor(getter="getTrimmedName",setter="setName") */
private $name;
● Exclure un champ de l’export de votre entité
/** @JMS/Exclude */
private $password;
● Modifier la clé de l’export:
/** @JMS/SerializedName(my_property) */
private $myProperty;
Liste complète:
http://jmsyst.com/libs/serializer/master/reference/annotations
Symfony et Angular JS
Utiliser Symfony en mode RESTfull
Les bundles:
FOSRestBundle:
Les routes REST sont normées et très répétitives à écrire. Ce bundle vous génère vos routes dynamiquement à partir du nom
de vos controllers.
# app/config/routing.yml
users:
type: rest
resource: AcmeHelloBundleControllerUsersController
Symfony et Angular JS
Utiliser Symfony en mode RESTfull
<?php
use FOSRestBundleRoutingClassResourceInterface;
class UserController implements ClassResourceInterface
{
public function getUsersAction()
{} // "get_users" [GET] /users
public function postUsersAction()
{} // "new_users" [POST] /users
public function getUserAction($slug)
{} // "get_user" [GET] /users/{slug}
public function getUserCommentsAction($slug)
{} // "get_user_comments" [GET] /users/{slug}/comments
}
Symfony et Angular JS
Exemple complet d’action :
<?php
/**
* Returns an user by username/email.
* @param string $slug Username or Email
* @Secure(roles="ROLE_USER")
*/
public function getUserAction($slug)
{
$userManager = $this->container->get('fos_user.user_manager');
$user = $userManager->findUserByUsernameOrEmail($slug);
return $user;
} // "get_user" [GET] /users/{slug}
Utiliser Symfony en mode RESTfull
Symfony et Angular JS
Pensez à sécuriser vos actions
● En mode REST, vos URL sont les seuls garants de la sécurité de votre
application.
● Annotation @secure : toute la puissance de symfony
Utiliser Symfony en mode RESTfull
Symfony et Angular JS
BazingaHateoasBundle
Ajoutez automatiquement un lien vers votre ressource à vos réponses
{
"user": {
"id": 123,
"first_name": "John",
"last_name": "Doe",
"_links": {
"self": { "href": "http://example.com/api/users/123" }
}
}
}
Possibilité de paramétrer la génération des liens en fonction des privilèges de
l’utilisateur. (le lien delete n’est pas envoyé le l’utilisateur n’a pas le droit de
supprimer une entité)
Utiliser Symfony en mode RESTfull
Symfony et Angular JS
BazingaHateoasBundle
Vous pouvez également ajouter des liens vers les relations de votre entités ou les liens utilisés pour un
page dans une collection
{
"page": 1,
"limit": 10,
"pages": 1,
"_links": {
"self": {
"href": "/api/users?page=1&limit=10"
},
"first": {
"href": "/api/users?page=1&limit=10"
},
"last": {
"href": "/api/users?page=129&limit=10"
Utiliser Symfony en mode RESTfull
Symfony et Angular JS
La validation des formulaires
• Désactivez le CSRF
Cette protection n’est utile que lorsqu’on identifie l’utilisateur à l’aide de cookies. (voir la partie Sécurité
pour plus d’informations sur l’authentification)
Avec fos rest bundle:
fos_rest:
disable_csrf_role: ROLE_API
Utiliser Symfony en mode RESTfull
Symfony et Angular JS
La validation des formulaires
Valider un formulaire :
Valider les formulaires ne se fait pas aussi simplement que l’on pourrait s’y attendre
o Utiliser les bons codes de responses HTTP :
 201 created après une création
 204 no content après un update ou un delete
 400 bad request si l’utilisateur envoi des paramètres invalides, etc…
Tips: Utiliser les constantes de la class Response:
Response::HTTP_CREATED
ou JsonResponse::HTTP_CREATED
Utiliser Symfony en mode RESTfull
Symfony et Angular JS
La validation des formulaires
Une requête Ajax ne renvoie pas des données que les formulaires de Symfony peuvent bind automatiquement.
Il faut donc le faire à la main:
$json_data = json_decode($request->request->get(“datas”), true);
$form = $this->createForm(new NoteType(), $note, array('method'=>$request->getMethod()));
//remove extra forms fields
$children = $form->all();
$data = array_intersect_key($json_data, $children);
//bind
$form->bind($data);
//return $form;
if ($form->isValid()) {
….
Utiliser Symfony en mode RESTfull
Symfony et Angular JS
La sécurité
LexikJWTAuthenticationBundle
● Alterative simple à OAuth
● Utilisation d’un token JWT en header
● SSL
● Login via HTTP form
Intégration avec AngularJs :
https://github.com/auth0/angular-jwt
Utiliser Symfony en mode RESTfull
Symfony et Angular JS
Intégrer
Symfony et Angular JS
Utiliser Bower pour télécharger vos
modules
● Gestionnaire de dépendance pour
Javascript
● Téléchargement en ligne de
commande :
bower install angularjs
● Creation d’un fichier bower.js
fonctionnant comme le
composer.json
Intégrer Angular JS - Utiliser Bower
Symfony et Angular JS
Utiliser assetic pour importer vos fichiers
La déclaration de vos modules doit donc toujours être faite en suivant les best practices pour éviter les
soucis lors de la minification :
['$scope', function($scope)...
app.controller('mainController', ['$scope', function($scope) {
$scope.message = 'HOORAY!';
}]);
https://docs.angularjs.org/tutorial/step_05
Intégrer Angular JS
Symfony et Angular JS
Twig et AngularJS utilisent les mêmes symboles d’interpolation : {{ }}
Donc il faut modifier les symboles d'interprétation d’angularJS :
Au niveau de la déclaration du module:
angular.module('myApp', [], function($interpolateProvider) {
$interpolateProvider.startSymbol('[[');
$interpolateProvider.endSymbol(']]');
});
Angular fonctionnera désormais avec [[ myScopeVariable ]]
Intégrer Angular JS - les templates
Symfony et Angular JS
Gérer les templates AngularJs avec twig
● Garder toute la puissance de twig
o Utilisation des balises {% spaceless %} {% endspaceless %}
o Utilisation du filtre |trans pour générer simplement et efficacement les
traductions des interfaces
● Sortir les templates du dossier public de l’application
Intégrer Angular JS - les templates
Symfony et Angular JS
Créer des routes pour accéder au template:
1. Static controller de Symfony2:
acme_privacy:
path: /privacy
defaults:
_controller: FrameworkBundle:Template:template
template: 'AcmeBundle:Static:privacy.html.twig'
a. Permet de créer des routes sans controller
b. inconvénient: 1 route à créer par template.
Intégrer Angular JS - les templates
Symfony et Angular JS
Créer des routes pour accéder au template:
Universal route:
Créer une route universelle pour accéder à vos templates statiques :
get_static_template:
path: /tpl/{templateName}.{_format}
defaults:
_controller: "EsokiaAdminBundle:Default:getStaticTemplate"
requirements:
_format: html
templateName: .+
options:
expose: true
Intégrer Angular JS - les templates
Symfony et Angular JS
Créer des routes pour accéder au template
Universal route - controller :
/**
* @Cache(expires="tomorrow")
*/
public function getStaticTemplateAction($templateName, $_format){
return $this->render('EsokiaAdminBundle:Default:Static/'.$templateName.'.'.$_format.'.twig');
}
Intégrer Angular JS - les templates
Symfony et Angular JS
En dehors de l’interface REST, le routing de symfony n’est utilisé que pour
● Accéder à la home page
● Accéder aux templates statics
● Les autres routes sont gérées par Angular JS
Intégrer Angular JS - Routing
Symfony et Angular JS
Utiliser les routes dynamiques de Symfony avec Angular JS
● FOSJsRoutingBundle
Créer un fichier Javascript pour exposer vos routes:
o ajouter expose: true aux routes que vous voulez utiliser en JS
options:
expose: true
● Utiliser la fonction du bundle pour utiliser vos routes :
Routing.generate('route_id', /* your params */)
Intégrer Angular JS - Routing
Symfony et Angular JS
Utiliser les routes dynamiques de Symfony avec Angular JS
Exemple:
var userDetailsUrl = Routing.generate('get_static_template', {'templateName': 'userDetails',
'_format':'html'});
$routeProvider.when('/details/:username', {
controller: 'userDetailsController',
templateUrl: userDetailsUrl
})
Avantages :
● Pas de soucis de routing dans angular si vous déplacez vos fichiers js quand vous les compressez
avec assetic.
● Domain name agnostic
Intégrer Angular JS - Routing
Symfony et Angular JS
Solution 1 :
Override les templates de générations des formulaires de Symfony
● Permet de générer les templates de formulaire avec la ligne de commande
● Proche des habitudes des développeurs Symfony2
● Intéressant si beaucoup de formulaires sont standards
Intégrer Angular JS
- Les templates de formulaires
Symfony et Angular JS
Gérer les templates de formulaires avec Angular Js
● Abandonner complètement les templates de formulaire Symfony
● Utiliser Xeditable
Intégrer Angular JS
- Les templates de formulaires
Symfony et Angular JS
XEditable:
● Série de directive de formulaire permettant le click-to-edit aussi appelé edit-in-
place
● Meilleure expérience utilisateur
● Une seule vue à créer pour les actions de visualisation et d’editing
Intégrer Angular JS
- Les templates de formulaires
Symfony et Angular JS
Intégrer Angular JS
- Les templates de formulaires
Template de vue Template d’édition
● Un seul template, deux utilisations.
● Masquer le bouton d’édition pour les personnes non autorisées à éditer
Symfony et Angular JSSymfony et Angular JS
Merci
http://esokia-webagency.com

Contenu connexe

Tendances

rapport PFE ingénieur génie logiciel INSAT
rapport PFE ingénieur génie logiciel INSATrapport PFE ingénieur génie logiciel INSAT
rapport PFE ingénieur génie logiciel INSATSiwar GUEMRI
 
Projet de fin d’études
Projet de fin d’études  Projet de fin d’études
Projet de fin d’études TombariAhmed
 
Rapport PFE Ilef Ben Slima
Rapport PFE Ilef Ben SlimaRapport PFE Ilef Ben Slima
Rapport PFE Ilef Ben SlimaIlef Ben Slima
 
Rapport pfe talan_2018_donia_hammami
Rapport pfe talan_2018_donia_hammamiRapport pfe talan_2018_donia_hammami
Rapport pfe talan_2018_donia_hammamiDonia Hammami
 
Conception et réalisation d’une application Mobile banking
Conception et réalisation d’une application  Mobile banking  Conception et réalisation d’une application  Mobile banking
Conception et réalisation d’une application Mobile banking Khaled Fayala
 
Presentation pfe Système de gestion des rendez-vous médicaux
Presentation pfe Système de gestion des rendez-vous médicauxPresentation pfe Système de gestion des rendez-vous médicaux
Presentation pfe Système de gestion des rendez-vous médicauxFehmi Arbi
 
Présentation pfe Développement d'une application bancaire mobile
Présentation pfe Développement d'une application bancaire mobilePrésentation pfe Développement d'une application bancaire mobile
Présentation pfe Développement d'une application bancaire mobileNader Somrani
 
Rapport du Projet de Fin d'année Génie informatique
Rapport du Projet de Fin d'année Génie informatique Rapport du Projet de Fin d'année Génie informatique
Rapport du Projet de Fin d'année Génie informatique ayoub daoudi
 
Conception et Mise en place d'une Application Web SPA pour les établissements...
Conception et Mise en place d'une Application Web SPA pour les établissements...Conception et Mise en place d'une Application Web SPA pour les établissements...
Conception et Mise en place d'une Application Web SPA pour les établissements...Ben Ahmed Zohra
 
Rapport de sprint finale (All Project part)
Rapport de sprint finale (All Project part)Rapport de sprint finale (All Project part)
Rapport de sprint finale (All Project part)Ghodbane Heni
 
Présentation pfe - Etude, conception et réalisation d'une application web de ...
Présentation pfe - Etude, conception et réalisation d'une application web de ...Présentation pfe - Etude, conception et réalisation d'une application web de ...
Présentation pfe - Etude, conception et réalisation d'une application web de ...Ayoub Mkharbach
 
Rapport de projet de conception et de développement
Rapport de projet de conception et de développementRapport de projet de conception et de développement
Rapport de projet de conception et de développementDonia Hammami
 
Rapport PFE "Conception et développement d'un Portail web pour le Smart Met...
Rapport  PFE  "Conception et développement d'un Portail web pour le Smart Met...Rapport  PFE  "Conception et développement d'un Portail web pour le Smart Met...
Rapport PFE "Conception et développement d'un Portail web pour le Smart Met...Hajer Dahech
 
Rapport pfe isi_Big data Analytique
Rapport pfe isi_Big data AnalytiqueRapport pfe isi_Big data Analytique
Rapport pfe isi_Big data AnalytiqueYosra ADDALI
 
Conception et réalisation d'une application web et mobile de e-commerce
Conception et réalisation d'une application web et mobile de e-commerceConception et réalisation d'une application web et mobile de e-commerce
Conception et réalisation d'une application web et mobile de e-commerceAHMEDBELGHITH4
 

Tendances (20)

rapport PFE ingénieur génie logiciel INSAT
rapport PFE ingénieur génie logiciel INSATrapport PFE ingénieur génie logiciel INSAT
rapport PFE ingénieur génie logiciel INSAT
 
Projet de fin d’études
Projet de fin d’études  Projet de fin d’études
Projet de fin d’études
 
Présentation PFE
Présentation PFEPrésentation PFE
Présentation PFE
 
Rapport PFE Ilef Ben Slima
Rapport PFE Ilef Ben SlimaRapport PFE Ilef Ben Slima
Rapport PFE Ilef Ben Slima
 
Rapport pfe talan_2018_donia_hammami
Rapport pfe talan_2018_donia_hammamiRapport pfe talan_2018_donia_hammami
Rapport pfe talan_2018_donia_hammami
 
Conception et réalisation d’une application Mobile banking
Conception et réalisation d’une application  Mobile banking  Conception et réalisation d’une application  Mobile banking
Conception et réalisation d’une application Mobile banking
 
Presentation pfe Système de gestion des rendez-vous médicaux
Presentation pfe Système de gestion des rendez-vous médicauxPresentation pfe Système de gestion des rendez-vous médicaux
Presentation pfe Système de gestion des rendez-vous médicaux
 
Présentation pfe Développement d'une application bancaire mobile
Présentation pfe Développement d'une application bancaire mobilePrésentation pfe Développement d'une application bancaire mobile
Présentation pfe Développement d'une application bancaire mobile
 
Rapport du Projet de Fin d'année Génie informatique
Rapport du Projet de Fin d'année Génie informatique Rapport du Projet de Fin d'année Génie informatique
Rapport du Projet de Fin d'année Génie informatique
 
Conception et Mise en place d'une Application Web SPA pour les établissements...
Conception et Mise en place d'une Application Web SPA pour les établissements...Conception et Mise en place d'une Application Web SPA pour les établissements...
Conception et Mise en place d'une Application Web SPA pour les établissements...
 
Présentation PFE
Présentation PFEPrésentation PFE
Présentation PFE
 
Rapport pfe
Rapport pfeRapport pfe
Rapport pfe
 
Mobi resto
Mobi restoMobi resto
Mobi resto
 
Rapport de sprint finale (All Project part)
Rapport de sprint finale (All Project part)Rapport de sprint finale (All Project part)
Rapport de sprint finale (All Project part)
 
Présentation pfe - Etude, conception et réalisation d'une application web de ...
Présentation pfe - Etude, conception et réalisation d'une application web de ...Présentation pfe - Etude, conception et réalisation d'une application web de ...
Présentation pfe - Etude, conception et réalisation d'une application web de ...
 
Rapport de projet de conception et de développement
Rapport de projet de conception et de développementRapport de projet de conception et de développement
Rapport de projet de conception et de développement
 
Prez PFE
Prez PFEPrez PFE
Prez PFE
 
Rapport PFE "Conception et développement d'un Portail web pour le Smart Met...
Rapport  PFE  "Conception et développement d'un Portail web pour le Smart Met...Rapport  PFE  "Conception et développement d'un Portail web pour le Smart Met...
Rapport PFE "Conception et développement d'un Portail web pour le Smart Met...
 
Rapport pfe isi_Big data Analytique
Rapport pfe isi_Big data AnalytiqueRapport pfe isi_Big data Analytique
Rapport pfe isi_Big data Analytique
 
Conception et réalisation d'une application web et mobile de e-commerce
Conception et réalisation d'une application web et mobile de e-commerceConception et réalisation d'une application web et mobile de e-commerce
Conception et réalisation d'une application web et mobile de e-commerce
 

En vedette

Building Single Page Application (SPA) with Symfony2 and AngularJS
Building Single Page Application (SPA) with Symfony2 and AngularJSBuilding Single Page Application (SPA) with Symfony2 and AngularJS
Building Single Page Application (SPA) with Symfony2 and AngularJSAntonio Peric-Mazar
 
Symfony + AngularJS | Mladen Plavsic @DaFED26
Symfony + AngularJS | Mladen Plavsic @DaFED26Symfony + AngularJS | Mladen Plavsic @DaFED26
Symfony + AngularJS | Mladen Plavsic @DaFED26Mladen Plavšić
 
AngularJS - Présentation (french)
AngularJS - Présentation (french)AngularJS - Présentation (french)
AngularJS - Présentation (french)Yacine Rezgui
 
symfony : Un Framework Open-Source pour les Professionnels
symfony : Un Framework Open-Source pour les Professionnelssymfony : Un Framework Open-Source pour les Professionnels
symfony : Un Framework Open-Source pour les ProfessionnelsFabien Potencier
 
symfony: Un Framework Open-Source pour les Entreprises (Solutions Linux 2008)
symfony: Un Framework Open-Source pour les Entreprises (Solutions Linux 2008)symfony: Un Framework Open-Source pour les Entreprises (Solutions Linux 2008)
symfony: Un Framework Open-Source pour les Entreprises (Solutions Linux 2008)Fabien Potencier
 
Comment construire un environnement e-commerce complet avec Symfony 2 ?
Comment construire un environnement e-commerce complet avec Symfony 2 ? Comment construire un environnement e-commerce complet avec Symfony 2 ?
Comment construire un environnement e-commerce complet avec Symfony 2 ? Fabien Gasser
 
Introduction à Angular JS
Introduction à Angular JSIntroduction à Angular JS
Introduction à Angular JSAntoine Rey
 
Doctrine MongoDB ODM (PDXPHP)
Doctrine MongoDB ODM (PDXPHP)Doctrine MongoDB ODM (PDXPHP)
Doctrine MongoDB ODM (PDXPHP)Kris Wallsmith
 
Symfony Day 2010 Doctrine MongoDB ODM
Symfony Day 2010 Doctrine MongoDB ODMSymfony Day 2010 Doctrine MongoDB ODM
Symfony Day 2010 Doctrine MongoDB ODMJonathan Wage
 
Symfi formation-symfony-les-bases
Symfi formation-symfony-les-basesSymfi formation-symfony-les-bases
Symfi formation-symfony-les-basesCERTyou Formation
 
برنامج جمعية بسمة أمل بوجدة لسنة 2013
برنامج جمعية بسمة أمل بوجدة لسنة 2013برنامج جمعية بسمة أمل بوجدة لسنة 2013
برنامج جمعية بسمة أمل بوجدة لسنة 2013Abdelkader Rhouati
 
Symfony2 e Elasticsearch com FosElasticaBundle
Symfony2 e Elasticsearch com FosElasticaBundleSymfony2 e Elasticsearch com FosElasticaBundle
Symfony2 e Elasticsearch com FosElasticaBundleWaldemar Neto
 
Boostez vos-developpements-symfony-avec-phpedit
Boostez vos-developpements-symfony-avec-phpeditBoostez vos-developpements-symfony-avec-phpedit
Boostez vos-developpements-symfony-avec-phpeditauto entrepreneur
 
La Console Symfony
La Console Symfony La Console Symfony
La Console Symfony Imad ZAIRIG
 
Conference drupal 8 au Forum PHP 2013 à Paris
Conference drupal 8 au Forum PHP 2013 à ParisConference drupal 8 au Forum PHP 2013 à Paris
Conference drupal 8 au Forum PHP 2013 à ParisChipway
 

En vedette (20)

Building Single Page Application (SPA) with Symfony2 and AngularJS
Building Single Page Application (SPA) with Symfony2 and AngularJSBuilding Single Page Application (SPA) with Symfony2 and AngularJS
Building Single Page Application (SPA) with Symfony2 and AngularJS
 
Symfony and Angularjs
Symfony and AngularjsSymfony and Angularjs
Symfony and Angularjs
 
Symfony2 and AngularJS
Symfony2 and AngularJSSymfony2 and AngularJS
Symfony2 and AngularJS
 
Symfony + AngularJS | Mladen Plavsic @DaFED26
Symfony + AngularJS | Mladen Plavsic @DaFED26Symfony + AngularJS | Mladen Plavsic @DaFED26
Symfony + AngularJS | Mladen Plavsic @DaFED26
 
Symfony Best Practices
Symfony Best PracticesSymfony Best Practices
Symfony Best Practices
 
AngularJS - Présentation (french)
AngularJS - Présentation (french)AngularJS - Présentation (french)
AngularJS - Présentation (french)
 
symfony : Un Framework Open-Source pour les Professionnels
symfony : Un Framework Open-Source pour les Professionnelssymfony : Un Framework Open-Source pour les Professionnels
symfony : Un Framework Open-Source pour les Professionnels
 
symfony: Un Framework Open-Source pour les Entreprises (Solutions Linux 2008)
symfony: Un Framework Open-Source pour les Entreprises (Solutions Linux 2008)symfony: Un Framework Open-Source pour les Entreprises (Solutions Linux 2008)
symfony: Un Framework Open-Source pour les Entreprises (Solutions Linux 2008)
 
Comment construire un environnement e-commerce complet avec Symfony 2 ?
Comment construire un environnement e-commerce complet avec Symfony 2 ? Comment construire un environnement e-commerce complet avec Symfony 2 ?
Comment construire un environnement e-commerce complet avec Symfony 2 ?
 
Introduction à Angular JS
Introduction à Angular JSIntroduction à Angular JS
Introduction à Angular JS
 
Doctrine MongoDB ODM (PDXPHP)
Doctrine MongoDB ODM (PDXPHP)Doctrine MongoDB ODM (PDXPHP)
Doctrine MongoDB ODM (PDXPHP)
 
Symfony Day 2010 Doctrine MongoDB ODM
Symfony Day 2010 Doctrine MongoDB ODMSymfony Day 2010 Doctrine MongoDB ODM
Symfony Day 2010 Doctrine MongoDB ODM
 
Symfi formation-symfony-les-bases
Symfi formation-symfony-les-basesSymfi formation-symfony-les-bases
Symfi formation-symfony-les-bases
 
برنامج جمعية بسمة أمل بوجدة لسنة 2013
برنامج جمعية بسمة أمل بوجدة لسنة 2013برنامج جمعية بسمة أمل بوجدة لسنة 2013
برنامج جمعية بسمة أمل بوجدة لسنة 2013
 
Symfony2 e Elasticsearch com FosElasticaBundle
Symfony2 e Elasticsearch com FosElasticaBundleSymfony2 e Elasticsearch com FosElasticaBundle
Symfony2 e Elasticsearch com FosElasticaBundle
 
Boostez vos-developpements-symfony-avec-phpedit
Boostez vos-developpements-symfony-avec-phpeditBoostez vos-developpements-symfony-avec-phpedit
Boostez vos-developpements-symfony-avec-phpedit
 
La Console Symfony
La Console Symfony La Console Symfony
La Console Symfony
 
Presentation symfony
Presentation symfonyPresentation symfony
Presentation symfony
 
Drupal 8
Drupal 8Drupal 8
Drupal 8
 
Conference drupal 8 au Forum PHP 2013 à Paris
Conference drupal 8 au Forum PHP 2013 à ParisConference drupal 8 au Forum PHP 2013 à Paris
Conference drupal 8 au Forum PHP 2013 à Paris
 

Similaire à Symfony with angular.pptx

ENIB cours CAI Web - Séance 4 - Frameworks/Spring - Cours
ENIB cours CAI Web - Séance 4 - Frameworks/Spring - CoursENIB cours CAI Web - Séance 4 - Frameworks/Spring - Cours
ENIB cours CAI Web - Séance 4 - Frameworks/Spring - CoursHoracio Gonzalez
 
Aperçu de RequireJS
Aperçu de RequireJSAperçu de RequireJS
Aperçu de RequireJSVISEO
 
jQuery GTI780 & MTI780 ETS A09
jQuery   GTI780 & MTI780   ETS   A09jQuery   GTI780 & MTI780   ETS   A09
jQuery GTI780 & MTI780 ETS A09Claude Coulombe
 
Flex, une techno RIA incontournable pour les futures app web ?
Flex, une techno RIA incontournable pour les futures app web ?Flex, une techno RIA incontournable pour les futures app web ?
Flex, une techno RIA incontournable pour les futures app web ?GreenIvory
 
Soutenance Zend Framework vs Symfony
Soutenance Zend Framework vs SymfonySoutenance Zend Framework vs Symfony
Soutenance Zend Framework vs SymfonyVincent Composieux
 
Introduction à Angularjs
Introduction à AngularjsIntroduction à Angularjs
Introduction à AngularjsRossi Oddet
 
Ionic, AngularJS,Cordova,NodeJS,Sass
Ionic, AngularJS,Cordova,NodeJS,SassIonic, AngularJS,Cordova,NodeJS,Sass
Ionic, AngularJS,Cordova,NodeJS,Sassmarwa baich
 
jQuery mobile / PhoneGap : contenus dynamiques client-side
jQuery mobile / PhoneGap : contenus dynamiques client-sidejQuery mobile / PhoneGap : contenus dynamiques client-side
jQuery mobile / PhoneGap : contenus dynamiques client-sidemaru.maru
 
Présentation GWT et HTML 5 pour l'Offline
Présentation GWT et HTML 5 pour l'OfflinePrésentation GWT et HTML 5 pour l'Offline
Présentation GWT et HTML 5 pour l'OfflineDNG Consulting
 
20100225 Ippon Osgi Are You Ready
20100225 Ippon Osgi Are You Ready20100225 Ippon Osgi Are You Ready
20100225 Ippon Osgi Are You ReadyGeoffray Gruel
 
Cours yeoman backbone box2d
Cours yeoman backbone box2dCours yeoman backbone box2d
Cours yeoman backbone box2dhugomallet
 
Nuxt.js et les applications isomorphiques (Universelles/SSR)
Nuxt.js et les applications isomorphiques (Universelles/SSR)Nuxt.js et les applications isomorphiques (Universelles/SSR)
Nuxt.js et les applications isomorphiques (Universelles/SSR)Joffrey LEVEUGLE
 
WebServices.pdfbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb
WebServices.pdfbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbWebServices.pdfbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb
WebServices.pdfbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbHINDGUENDOUZ
 
GtugDakar AppEngine, Gwt
GtugDakar AppEngine, GwtGtugDakar AppEngine, Gwt
GtugDakar AppEngine, Gwthkairi
 
Comment créer une application Angular performante ?
Comment créer une application Angular performante ?Comment créer une application Angular performante ?
Comment créer une application Angular performante ?Sébastien Ollivier
 
La mobilité dans Drupal
La mobilité dans DrupalLa mobilité dans Drupal
La mobilité dans DrupalAdyax
 

Similaire à Symfony with angular.pptx (20)

ENIB cours CAI Web - Séance 4 - Frameworks/Spring - Cours
ENIB cours CAI Web - Séance 4 - Frameworks/Spring - CoursENIB cours CAI Web - Séance 4 - Frameworks/Spring - Cours
ENIB cours CAI Web - Séance 4 - Frameworks/Spring - Cours
 
Aperçu de RequireJS
Aperçu de RequireJSAperçu de RequireJS
Aperçu de RequireJS
 
jQuery GTI780 & MTI780 ETS A09
jQuery   GTI780 & MTI780   ETS   A09jQuery   GTI780 & MTI780   ETS   A09
jQuery GTI780 & MTI780 ETS A09
 
Flex, une techno RIA incontournable pour les futures app web ?
Flex, une techno RIA incontournable pour les futures app web ?Flex, une techno RIA incontournable pour les futures app web ?
Flex, une techno RIA incontournable pour les futures app web ?
 
Soutenance Zend Framework vs Symfony
Soutenance Zend Framework vs SymfonySoutenance Zend Framework vs Symfony
Soutenance Zend Framework vs Symfony
 
Introduction à Angularjs
Introduction à AngularjsIntroduction à Angularjs
Introduction à Angularjs
 
Ionic, AngularJS,Cordova,NodeJS,Sass
Ionic, AngularJS,Cordova,NodeJS,SassIonic, AngularJS,Cordova,NodeJS,Sass
Ionic, AngularJS,Cordova,NodeJS,Sass
 
jQuery vs AngularJS
jQuery vs AngularJS jQuery vs AngularJS
jQuery vs AngularJS
 
Angular 11
Angular 11Angular 11
Angular 11
 
jQuery mobile / PhoneGap : contenus dynamiques client-side
jQuery mobile / PhoneGap : contenus dynamiques client-sidejQuery mobile / PhoneGap : contenus dynamiques client-side
jQuery mobile / PhoneGap : contenus dynamiques client-side
 
Retour d'experience projet AngularJS
Retour d'experience projet AngularJSRetour d'experience projet AngularJS
Retour d'experience projet AngularJS
 
Présentation GWT et HTML 5 pour l'Offline
Présentation GWT et HTML 5 pour l'OfflinePrésentation GWT et HTML 5 pour l'Offline
Présentation GWT et HTML 5 pour l'Offline
 
20100225 Ippon Osgi Are You Ready
20100225 Ippon Osgi Are You Ready20100225 Ippon Osgi Are You Ready
20100225 Ippon Osgi Are You Ready
 
Cours yeoman backbone box2d
Cours yeoman backbone box2dCours yeoman backbone box2d
Cours yeoman backbone box2d
 
Nuxt.js et les applications isomorphiques (Universelles/SSR)
Nuxt.js et les applications isomorphiques (Universelles/SSR)Nuxt.js et les applications isomorphiques (Universelles/SSR)
Nuxt.js et les applications isomorphiques (Universelles/SSR)
 
WebServices.pdfbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb
WebServices.pdfbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbWebServices.pdfbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb
WebServices.pdfbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb
 
GtugDakar AppEngine, Gwt
GtugDakar AppEngine, GwtGtugDakar AppEngine, Gwt
GtugDakar AppEngine, Gwt
 
Comment créer une application Angular performante ?
Comment créer une application Angular performante ?Comment créer une application Angular performante ?
Comment créer une application Angular performante ?
 
Support de Cours JSF2 Première partie Intégration avec Spring
Support de Cours JSF2 Première partie Intégration avec SpringSupport de Cours JSF2 Première partie Intégration avec Spring
Support de Cours JSF2 Première partie Intégration avec Spring
 
La mobilité dans Drupal
La mobilité dans DrupalLa mobilité dans Drupal
La mobilité dans Drupal
 

Symfony with angular.pptx

  • 2. Symfony et Angular JS Esokia Ltd •Agence de développement web •Depuis 7 ans à l’île Maurice •De très nombreux projets à Maurice et à l’international
  • 3. Symfony et Angular JS Jérémy Gachet •Développeur web depuis près de 10 ans en France et à Maurice •Spécialisé dans les projets utilisant le framework Symfony depuis 5 ans.
  • 4. Symfony et Angular JS •Framework de développement PHP très complet •Norme de codages •Un nombre énorme de “Bundles” (2500) •Une documentation très aboutie •Une communauté active •Grosse demande client
  • 5. Symfony et Angular JS •Framework de développement front •MVC •Two way data binding •Routing •One page app •Projet lancé et supporté par Google
  • 7. Symfony et Angular JS Pourquoi Coupler les deux frameworks? ● Vitesse et réactivité = meilleure expérience utilisateur ● Facilité de développements front avec AngularJS ● Indépendance du développement entre le front et le dev. (export plus facile vers le mobile)
  • 8. Symfony et Angular JS Difficultés • Conflits ○ Routing géré par les deux systèmes ○ Même signe d’interpolation pour angular et twig ○ Gestion des formulaires • Gestion de la sécurité • Perte d’une partie des fonctionnalités apportées par les commandes de Symfony
  • 9. Symfony et Angular JS SECTION BREAK- CENTURY GOTHIC REGULAR 45pt / LEADING 1.2 ALL CAPS
  • 10. Symfony et Angular JS Solution proposée ● Symfony ○ Utiliser Symfony principalement en mode RESTfull. ○ Mais aussi pour la génération des templates et du cache serveur. ● AngularJS: ○ User interface, réception et traitement local des données en Json
  • 11. Symfony et Angular JS Presentation REST ● REST (representational state transfer) est un style d’architecture pour les systèmes hypermédia distribués. Ses spécificités: ■ Séparation Client-serveur : les responsabilités sont séparées entre le client et le serveur. L'interface utilisateur est séparée de celle du stockage des données. Cela permet aux deux d'évoluer indépendamment. ■ Mise en cache : le serveur envoie une réponse qui donne l'information sur la propension de cette réponse à être mise en cache ■ Un système hiérarchisé par couche : les états de l'application sont identifiés par des ressources individuelles (URL) http://fr.wikipedia.org/wiki/Representational_State_Transfer
  • 12. Symfony et Angular JS Presentation REST Créer des urls et renvoyer des données sérialisées. (en JSON ou XML) Normes d’urls pour la récupération des données: ●GET http://mywebsite.com/books renvoie une liste de livres ●GET http://mywebsite.com/books/123 renvoie le livre avec la PK 123 ●POST http://mywebsite.com/books + donnes en post pour ajouter un livre ●PUT http://mywebsite.com/books/123 + données PUT pour modifier un livre ●PATCH http://mywebsite.com/books/123 + données PATCH pour modifier une partie d’un livre ●DELETE http://mywebsite.com/books/87 pour supprimer le livre avec la PK 87 ●GET http://mywebsite.com/books/87/comments pour recuperer tous les commentaires sur le livre avec la PK 87 ●GET http://mywebsite.com/books/87/comments/125 pour recuperer le commentaire avec la PK 125 lie au livre avec la PK 87 Utilisation des méthodes et des codes réponses HTTP de manière adéquates.
  • 13. Symfony et Angular JS Utiliser Symfony en mode RESTfull Une distribution: https://github.com/gimler/symfony-rest-edition Qui intègre les bundles pour faciliter la création d’API REST
  • 14. Symfony et Angular JS Utiliser Symfony en mode RESTfull Les bundles: JMSSerializerBundle Pour serialize simplement vos entités en json et en xml. avec la possibilité de modifier les comportements à l’aide d’annotations ou de méthodes spécifiques un serilizer efficace : $serializer = JMSSerializerSerializerBuilder::create()->build(); $serializer->serialize($object, 'json');
  • 15. Symfony et Angular JS Utiliser Symfony en mode RESTfull Les bundles: JMSSerializerBundle Des annotations pour modifier le contenu de vos serialisations: ● Changer le getter utilisé (et donc modifer le rendu d’un champs comme vous le souhaitez) /** @JMS/Accessor(getter="getTrimmedName",setter="setName") */ private $name; ● Exclure un champ de l’export de votre entité /** @JMS/Exclude */ private $password; ● Modifier la clé de l’export: /** @JMS/SerializedName(my_property) */ private $myProperty; Liste complète: http://jmsyst.com/libs/serializer/master/reference/annotations
  • 16. Symfony et Angular JS Utiliser Symfony en mode RESTfull Les bundles: FOSRestBundle: Les routes REST sont normées et très répétitives à écrire. Ce bundle vous génère vos routes dynamiquement à partir du nom de vos controllers. # app/config/routing.yml users: type: rest resource: AcmeHelloBundleControllerUsersController
  • 17. Symfony et Angular JS Utiliser Symfony en mode RESTfull <?php use FOSRestBundleRoutingClassResourceInterface; class UserController implements ClassResourceInterface { public function getUsersAction() {} // "get_users" [GET] /users public function postUsersAction() {} // "new_users" [POST] /users public function getUserAction($slug) {} // "get_user" [GET] /users/{slug} public function getUserCommentsAction($slug) {} // "get_user_comments" [GET] /users/{slug}/comments }
  • 18. Symfony et Angular JS Exemple complet d’action : <?php /** * Returns an user by username/email. * @param string $slug Username or Email * @Secure(roles="ROLE_USER") */ public function getUserAction($slug) { $userManager = $this->container->get('fos_user.user_manager'); $user = $userManager->findUserByUsernameOrEmail($slug); return $user; } // "get_user" [GET] /users/{slug} Utiliser Symfony en mode RESTfull
  • 19. Symfony et Angular JS Pensez à sécuriser vos actions ● En mode REST, vos URL sont les seuls garants de la sécurité de votre application. ● Annotation @secure : toute la puissance de symfony Utiliser Symfony en mode RESTfull
  • 20. Symfony et Angular JS BazingaHateoasBundle Ajoutez automatiquement un lien vers votre ressource à vos réponses { "user": { "id": 123, "first_name": "John", "last_name": "Doe", "_links": { "self": { "href": "http://example.com/api/users/123" } } } } Possibilité de paramétrer la génération des liens en fonction des privilèges de l’utilisateur. (le lien delete n’est pas envoyé le l’utilisateur n’a pas le droit de supprimer une entité) Utiliser Symfony en mode RESTfull
  • 21. Symfony et Angular JS BazingaHateoasBundle Vous pouvez également ajouter des liens vers les relations de votre entités ou les liens utilisés pour un page dans une collection { "page": 1, "limit": 10, "pages": 1, "_links": { "self": { "href": "/api/users?page=1&limit=10" }, "first": { "href": "/api/users?page=1&limit=10" }, "last": { "href": "/api/users?page=129&limit=10" Utiliser Symfony en mode RESTfull
  • 22. Symfony et Angular JS La validation des formulaires • Désactivez le CSRF Cette protection n’est utile que lorsqu’on identifie l’utilisateur à l’aide de cookies. (voir la partie Sécurité pour plus d’informations sur l’authentification) Avec fos rest bundle: fos_rest: disable_csrf_role: ROLE_API Utiliser Symfony en mode RESTfull
  • 23. Symfony et Angular JS La validation des formulaires Valider un formulaire : Valider les formulaires ne se fait pas aussi simplement que l’on pourrait s’y attendre o Utiliser les bons codes de responses HTTP :  201 created après une création  204 no content après un update ou un delete  400 bad request si l’utilisateur envoi des paramètres invalides, etc… Tips: Utiliser les constantes de la class Response: Response::HTTP_CREATED ou JsonResponse::HTTP_CREATED Utiliser Symfony en mode RESTfull
  • 24. Symfony et Angular JS La validation des formulaires Une requête Ajax ne renvoie pas des données que les formulaires de Symfony peuvent bind automatiquement. Il faut donc le faire à la main: $json_data = json_decode($request->request->get(“datas”), true); $form = $this->createForm(new NoteType(), $note, array('method'=>$request->getMethod())); //remove extra forms fields $children = $form->all(); $data = array_intersect_key($json_data, $children); //bind $form->bind($data); //return $form; if ($form->isValid()) { …. Utiliser Symfony en mode RESTfull
  • 25. Symfony et Angular JS La sécurité LexikJWTAuthenticationBundle ● Alterative simple à OAuth ● Utilisation d’un token JWT en header ● SSL ● Login via HTTP form Intégration avec AngularJs : https://github.com/auth0/angular-jwt Utiliser Symfony en mode RESTfull
  • 26. Symfony et Angular JS Intégrer
  • 27. Symfony et Angular JS Utiliser Bower pour télécharger vos modules ● Gestionnaire de dépendance pour Javascript ● Téléchargement en ligne de commande : bower install angularjs ● Creation d’un fichier bower.js fonctionnant comme le composer.json Intégrer Angular JS - Utiliser Bower
  • 28. Symfony et Angular JS Utiliser assetic pour importer vos fichiers La déclaration de vos modules doit donc toujours être faite en suivant les best practices pour éviter les soucis lors de la minification : ['$scope', function($scope)... app.controller('mainController', ['$scope', function($scope) { $scope.message = 'HOORAY!'; }]); https://docs.angularjs.org/tutorial/step_05 Intégrer Angular JS
  • 29. Symfony et Angular JS Twig et AngularJS utilisent les mêmes symboles d’interpolation : {{ }} Donc il faut modifier les symboles d'interprétation d’angularJS : Au niveau de la déclaration du module: angular.module('myApp', [], function($interpolateProvider) { $interpolateProvider.startSymbol('[['); $interpolateProvider.endSymbol(']]'); }); Angular fonctionnera désormais avec [[ myScopeVariable ]] Intégrer Angular JS - les templates
  • 30. Symfony et Angular JS Gérer les templates AngularJs avec twig ● Garder toute la puissance de twig o Utilisation des balises {% spaceless %} {% endspaceless %} o Utilisation du filtre |trans pour générer simplement et efficacement les traductions des interfaces ● Sortir les templates du dossier public de l’application Intégrer Angular JS - les templates
  • 31. Symfony et Angular JS Créer des routes pour accéder au template: 1. Static controller de Symfony2: acme_privacy: path: /privacy defaults: _controller: FrameworkBundle:Template:template template: 'AcmeBundle:Static:privacy.html.twig' a. Permet de créer des routes sans controller b. inconvénient: 1 route à créer par template. Intégrer Angular JS - les templates
  • 32. Symfony et Angular JS Créer des routes pour accéder au template: Universal route: Créer une route universelle pour accéder à vos templates statiques : get_static_template: path: /tpl/{templateName}.{_format} defaults: _controller: "EsokiaAdminBundle:Default:getStaticTemplate" requirements: _format: html templateName: .+ options: expose: true Intégrer Angular JS - les templates
  • 33. Symfony et Angular JS Créer des routes pour accéder au template Universal route - controller : /** * @Cache(expires="tomorrow") */ public function getStaticTemplateAction($templateName, $_format){ return $this->render('EsokiaAdminBundle:Default:Static/'.$templateName.'.'.$_format.'.twig'); } Intégrer Angular JS - les templates
  • 34. Symfony et Angular JS En dehors de l’interface REST, le routing de symfony n’est utilisé que pour ● Accéder à la home page ● Accéder aux templates statics ● Les autres routes sont gérées par Angular JS Intégrer Angular JS - Routing
  • 35. Symfony et Angular JS Utiliser les routes dynamiques de Symfony avec Angular JS ● FOSJsRoutingBundle Créer un fichier Javascript pour exposer vos routes: o ajouter expose: true aux routes que vous voulez utiliser en JS options: expose: true ● Utiliser la fonction du bundle pour utiliser vos routes : Routing.generate('route_id', /* your params */) Intégrer Angular JS - Routing
  • 36. Symfony et Angular JS Utiliser les routes dynamiques de Symfony avec Angular JS Exemple: var userDetailsUrl = Routing.generate('get_static_template', {'templateName': 'userDetails', '_format':'html'}); $routeProvider.when('/details/:username', { controller: 'userDetailsController', templateUrl: userDetailsUrl }) Avantages : ● Pas de soucis de routing dans angular si vous déplacez vos fichiers js quand vous les compressez avec assetic. ● Domain name agnostic Intégrer Angular JS - Routing
  • 37. Symfony et Angular JS Solution 1 : Override les templates de générations des formulaires de Symfony ● Permet de générer les templates de formulaire avec la ligne de commande ● Proche des habitudes des développeurs Symfony2 ● Intéressant si beaucoup de formulaires sont standards Intégrer Angular JS - Les templates de formulaires
  • 38. Symfony et Angular JS Gérer les templates de formulaires avec Angular Js ● Abandonner complètement les templates de formulaire Symfony ● Utiliser Xeditable Intégrer Angular JS - Les templates de formulaires
  • 39. Symfony et Angular JS XEditable: ● Série de directive de formulaire permettant le click-to-edit aussi appelé edit-in- place ● Meilleure expérience utilisateur ● Une seule vue à créer pour les actions de visualisation et d’editing Intégrer Angular JS - Les templates de formulaires
  • 40. Symfony et Angular JS Intégrer Angular JS - Les templates de formulaires Template de vue Template d’édition ● Un seul template, deux utilisations. ● Masquer le bouton d’édition pour les personnes non autorisées à éditer
  • 41. Symfony et Angular JSSymfony et Angular JS Merci http://esokia-webagency.com