AngularJS

Il est possible d'implémenter AngularJS dans Symfony mais il faut ajouter un petit morceau de code Javascript en plus pour éviter les conflits avec les caractères {{}}

var awesome = angular.module('awesome', []);

awesome.config(function($interpolateProvider) {
    $interpolateProvider.startSymbol('||');
    $interpolateProvider.endSymbol('||');
});

Routes et Symfony

Nous allons construire une application SPA (single page application), il nous faudra donc indiquer les routes utilisées comme ceci:

awesome.config(function($routeProvider, $interpolateProvider) {
      
  $interpolateProvider.startSymbol('||');
  $interpolateProvider.endSymbol('||');

  $routeProvider.
  when('/dashboard', {
    templateUrl: 'page/dashboard',
    controller: 'DashboardController'
  }).
  when('/customer', {
    templateUrl: 'page/customer',
    controller: 'CustomerController'
  }).
  when('/ticket/:id', {
    templateUrl : function(params){ return '/page/ticket/' + params.id; }, 
    controller: 'TicketController'
  }).
  otherwise({
    redirectTo: '/dashboard'
  });
});

Configurons notre routing.yml

engel_awesome_page:
    path:     /page/{page}
    defaults: { _controller: ENGELAwesomeBundle:Awesome:page }

Puis notre controller

namespace ENGEL\AwesomeBundle\Controller;

use Symfony\Bundle\FrameworkBundle\Controller\Controller;

class AwesomeController extends Controller
{
   
    /* Chargement d'une page */
    public function pageAction($page)
    {
        $method = $page.'Page';

        if( !method_exists( $this, $method ) )
            return $this->render('ENGELAwesomeBundle:Awesome:'.$page.'.html.twig');

        return $this->$method($page);
    }

    /* Le cas du dashboard */
    public function dashboardPage($page)
    {
        $data = DashboardController::getData();
        return $this->render('ENGELAwesomeBundle:Awesome:dashboard.html.twig', $data);
    }
}

Dans cet exemple nous essayons de rendre générique l'appel de /page/{page}, soit on passe par une méthode spécifique, soit on charge le template du même nom.

Puis adaptons notre controller angularjs

awesome.controller('DashboardController', function ($scope) {
  $scope.products = [
    {'name': 'ipad 1',
     'description': 'Super ipad'},
    {'name': 'ipad 2',
     'description': 'Un ipad encore mieux'},
    {'name': 'ipad 3',
     'description': 'Alors celui la il est encore mieux.'}
  ];
});

Et enfin nos liens qui permettent de passer d'une page à l'autre

<ul class="nav nav-sidebar">
    <li><a title="Tableau de bord" href="#/dashboard">Dashboard</a></li>
    <li><a title="Clients" href="#/customer">Customer</a></li>
</ul>

UNE QUESTION SUR L'ARTICLE?