Symfony2 e angular-js

PHP User Group Milano

Symfony2

• template
• dependency injection
• form component
• validation
• routing
• services
• translation

angular-js

• template
• dependency injection
• form component
• validation
• routing
• services
• translation

Scenario

• form ed entità configurate
• validazione yml
• tema dei form customizzati
• rotte definite
• traduzioni yml

Applicazione symfony2 esistente

Single page application

o no?

Applicazione ibrida

Obbiettivi

• far funzionare angular-js con il minor sforzo possibile

• evitare la duplicazione

Twig

Doppie parentesi

{% verbatim %}
    {{ variabileAngularjs }}
{% endverbatim %}

Soluzioni sconsigliate

• cambiare comportamento twig
• cambiare simboli angularjs (interpolateProvider)

Assetic

Minimize

function myController($http, $scope) {
    ... code ...
}

myApp.controller('myController', [
    '$http', '$scope', function($http, $scope) {
    ... code ...
}]

Routing

NgRoute: #! e html5mode

myApp.config([
    '$routeProvider', '$locationProvider', function($routeProvider, $locationProvider) {
      return $routeProvider.when('/form', {
        templateUrl: '/custom/templates/myform.html',
        controller: 'myApp.FormController'
      }).otherwise({
        redirectTo: 'form'
      });
    }
  ]);

href="javascript:void(0)"

Routing

CypressAngularNgRouting

FOSJsRoutingBundle

CypressAngularNgRouting Bundle

“A Symfony2 bundle to expose your routing in Angular.js resource format”

var url = NgRouting.generateResourceUrl('api_get_documents');
// url now is something like: /app_dev.php/documents

Translation

JMSTranslationBundle

“puts the Symfony Translation Component on steroids.”

BazingaJsTranslationBundle

Translator.trans('chiave')

Translator.trans(‘key’, { “foo” : “bar” }, ‘DOMAIN_NAME’); 
// sostituirà ogni “%foo%” con “bar”.

Translator.transChoice('key', 1, {}, 'DOMAIN_NAME');

RESTful web service

• FOSRest Bundle
• JMSSerializer Bundle
• Swagger PHP (NelmioApiDoc)

Form

Form

• controller "stampa" il form
• controller genera struttura (JSON schema)
• duplicazione form in angular-js

In conclusione

Compromessi

Single page application

Grazie!

http://milano.grusp.org

http://spaghetti.io

@aleinside