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 : Sélectionner tout - Visualiser dans une fenêtre à part
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 : Sélectionner tout - Visualiser dans une fenêtre à part
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 : Sélectionner tout - Visualiser dans une fenêtre à part
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 : Sélectionner tout - Visualiser dans une fenêtre à part
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 .