Routage avec Symfony2

Bonjour,

J'essaie actuellement de valider un formulaire pour une entité Tutorial en me servant d'AngularJS et Symfony2 mais j'ai des soucis de routage.

Voici tout d'abord le routage basique Symfony 2 :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
my_site_tutorials:
    path:     /tutorials/
    defaults: { _controller: MyBundle:Tutorial:index }
    methods: [GET]
 
my_site_tutorials_show:
    path:     /tutorials/{id}
    defaults: { _controller: MyBundle:Tutorial:show }
    methods: [GET]
    requirements:
      id: \d+
 
my_site_tutorials_new:
    path:     /tutorials/new
    defaults: { _controller: MyBundle:Tutorial:new }
    methods: [GET]
 
my_site_tutorials_create:
    path:     /tutorials/create
    defaults: { _controller: MyBundle:Tutorial:create }
    methods: [POST]

Voici les actions du controller pour l'entité Tutorial :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
public function newAction()
{
   $tutorial = new Tutorial();
   $form = $this->createForm(TutorialType::class, $tutorial, array('action' => $this->generateUrl('my_site_tutorials_create')));
 
   return $this->render('MyBundle:Tutorial:new.html.twig', array('tutorial' => $tutorial, 'form' => $form->createView()));
}
 
   public function createAction(Request $request)
   {
      $tutorial = new Tutorial();
 
      $form = $this->createForm(TutorialType::class, $tutorial, array('action' => $this->generateUrl('my_site_tutorials_create')));
      $form->handleRequest($request);
 
      if ($form->isValid())
      {
         $em = $this->getDoctrine()->getManager();
         $em->persist($tutorial);
         $em->flush();
 
         $request->getSession()->getFlashBag()->add('notice', 'Tutorial created.');
 
         return $this->redirect($this->generateUrl('my_site_tutorials_show', array('id' => $tutorial->getId())));
      }
 
      return $this->render('MyBundle:Tutorial:new.html.twig', array('tutorial' => $tutorial, 'form' => $form->createView()));
   }

Dans la vue maintenant, j'ai mon formulaire avec un binding angular :

Code:

1
2
3
4
5
6
7
8
9
<div class="row">
   <div id="content" class="col-md-9" ng-controller="FormController">
      {{ form_start(form, {'attr': {'id': 'registerForm'}}) }}
      {{ form_row(form.title, {'attr': {'ng-model':'formData.title'}}) }}
      {{ form_row(form.description, {'attr': {'ng-model':'formData.description'}}) }}
      <input type="submit" value="Save" ng-click="submitForm()" /></div>   
      {{ form_end(form) }}
   </div>
</div>

Et enfin, voici mon fichier angular :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
var app = angular.module("app", ['ngRoute']);
 
app.config(['$locationProvider', function($locationProvider){
   $locationProvider.html5Mode(true).hashPrefix('!');
}]);
 
app.config(['$routeProvider',function($routeProvider){
 
   $routeProvider
      .when('/tutorials',{
         templateUrl: "Tutorial/index.html.twig",
         controller: "TutorialController"
      })
      .otherwise({
         redirectTo: "/tutorials"
      });
}]);
 
app.controller("FormController", function($scope, $http) {
 
   $scope.formData = {title: "", description: ""};
 
   $scope.submitForm = function() {
 
      $http({
         method: 'POST',
         url: 'my_site_tutorials_create',
         headers: {
            'Content-Type': 'application/json',
            'Accept': 'application/json'
         },
         data: JSON.stringify($scope.formData)
      })
      .success(function(formData) {
         $scope.hello = formData.title;
      })
      .error(function(formData) {
         //$log.error(formData);
      });
   };
});

Lors de la validation du formulaire sur la page /tutorials/new, je suis redirigé sur la page show car l'action create du TutorialController est appelée et redirige vers cette vue.

Si j'enlève dans la méthode createForm de l'action new la redirection vers l'action create, rien ne se passe à la soumission d'un formulaire.

Comment faire alors pour que le routage angularJS prenne la main ?

Merci d'avance :).

Il te faut dissocier le routage angular du routage back php.

Une appli angular est SPA. Elle gère elle même 100% de son routage. Ton back PHP ne doit exposer que des endpoints de WS.

En gros ton backend PHP ne doit rien savoir du tout du front. Ca pourrait être une appli mobile client lourd que ça changerait rien.

Ton code angular doit être un projet à part, dans un SCM à part, avec un système de versioning, de livraison, etc ... complètement décorrélé du back PHP.

TLDR : Tu as deux applications différentes.

Ok je pensais qu'il était possible d'avoir les deux dans la même application et de voir chaque page comme une mini SPA avec de l'AngularJS.

Je vais revoir donc mon problème en gardant pour le moment un routage serveur.

Merci :)