SlideShare a Scribd company logo
Symfony2 and AngularJS
Antonio Perić-Mažar
16.05.2014, PHPday Verona
https://joind.in/talk/view/11290
About me
• Antonio Perić-Mažar,
mag. ing. comp.
• CEO @ locastic
• Software developer, Symfony2
• Sylius Awesome Contributor :)
• www.locastic.com
• antonio@locastic.com
• twitter: @antonioperic
Who we are?
• locastic (www.locastic.com)
• Web and mobile development
• UI/UX design
• Located in Split, Croatia
Our works?
Symfony2 and AngularJS
Symfony2
 PHP Framework, server side
 MVC, HTTP
 Toolbox, methodology
 One of the most advanced PHP framework
 Strong community
 Easy to test it
Symfony2
 Bundles
 Components
 Routing
 Templating (Twig)
 Forms
 etc
AngularJS
 Client-side JavaScript framework
 Prescriptive, MVC (MVVM)
 Makes creating UI easier thought data-binding
 Good organizing and architecture
 Learning curve, easy to start hard to master
 $scope, modules, controllers, providers, services
AngularJS Core
Two-way data binding
JS:
<span id=”someId”></span>
document.getElementById('someId').text = 'locastic';
NG
<span>{{someName}}<span>
var someName = 'locastic';
AngularJS Core
<html ng-app>
<head>
<script src=”angular.js”></script>
<script src=”controller.js”></script>
<head>
<body>
<div ng-controller=”HelloController”>
<p>{{ greeting.text}}, World</p>
</div>
</body>
</html>
// controller.js
function HelloController($scope) {
$scope.gretting = {text: 'Hello'}
}
HTML template
AngularJS Core
 Deep Linking
 Dependency Injection
 Directives
<div class=”container”>
<div class=”inner>
<ul>
<li>Item
<div class=”subitem”>Item2</div>
</li>
</ul>
</div>
</div>
<dropdown>
<item>Item 1>
<subitem >Item 2</subitem>
</item>
</dropdown>
+
SPA (Singe Page App)
SPA
 Aka SPI (Single Page interface)
 desktop apps UX
 HTML / JS / CSS / etc in single page load
 fast
 AJAX and XHR
Symfony2 and AngularJS
SPA Arhitecture
Backend (rest api) with Symfony2
Frontend with AngularJs
Separation or combination?
UI == APP
Symfony2 AngularJS
Usage, language Backend, PHP Frontend, Javascript
Dependency Injection Yes Yes
Templating Twig HTML
Form component Yes Yes
Routing component Yes Yes
MVC Yes Yes
Testable Yes Yes
Services Yes Yes
Events Yes Yes
i18n Yes Yes
Dependency management Yes Yes
RESTful ws
Simpler than SOAP & WSDL
Resource-oriented (URI)
Principles:
HTTP methods (idempotent & not)
stateless
directory structure-like URIs
XML or JSON (or XHTML)
Building Rest Api with SF2
There is bundle for everything in Sf2. Right?
So lets use some of them!
Building Rest Api with SF2
What we need?
JMSSerializerBundle
FOSRestBundle
NelmioApiDocBundle
Building Rest API with SF2
JMSSerializerBundle
(de)serialization
via annotations / YAML / XML / PHP
integration with the Doctrine ORM
handling of other complex cases (e.g. circular references)
Building Rest Api with SF2
LocasticBundleTodoBundleEntityTodo:
# exclusion_policy: ALL
exclusion_policy: NONE
properties:
# description:
# expose: true
createdAt:
# expose: true
exclude: true
deadline:
type: DateTime<'d.m.Y. H:i:s'>
# expose: true
done:
# expose: true
serialized_name: status
Building Rest Api with SF2
fos_rest:
disable_csrf_role: ROLE_API
param_fetcher_listener: true
view:
view_response_listener: 'force'
formats:
xml: true
json: true
templating_formats:
html: true
format_listener:
rules:
- { path: ^/, priorities: [ html, json, xml ], fallback_format: ~, prefer_extension: true }
exception:
codes:
'SymfonyComponentRoutingExceptionResourceNotFoundException': 404
'DoctrineORMOptimisticLockException': HTTP_CONFLICT
messages:
'SymfonyComponentRoutingExceptionResourceNotFoundException': true
allowed_methods_listener: true
access_denied_listener:
json: true
body_listener: true
Building Rest Api with SF2
/**
* @ApiDoc(
* resource = true,
* description = "Get stories from users that you follow (newsfeed)",
* section = "Feed",
* output={
* "class" = "LocasticBundleFeedBundleEntityStory"
* },
* statusCodes = {
* 200 = "Returned when successful",
* 400 = "Returned when bad parameters given"
* }
* )
*
* @RestView(
* serializerGroups = {"feed"}
* )
*/
public function getFeedAction()
{
$this->get('locastic_auth.auth.handler')->validateRequest($this->get('request'));
return $this->getDoctrine()->getRepository('locastic.repository.story')->getStories($this->get('request')-
>get('me'));
}
Building Rest Api with SF2
Templating
TWIG <3
Templating
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>{% block title %}Welcome!{% endblock %}</title>
{% block stylesheets %}
<!-- Place favicon.ico and apple-touch-icon.png in the root directory -->
{#<link rel="stylesheet" href="{{ asset('css/normalize.css') }}">#}
<link rel="stylesheet" href="{{ asset('css/main.css') }}">
<!-- load bootstrap and fontawesome via CDN -->
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" />
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/4.0.0/css/font-awesome.css" />
<script src="{{ asset('js/vendor/modernizr-2.6.2.min.js') }}"></script>
{% endblock %}
<link rel="icon" type="image/x-icon" href="{{ asset('favicon.ico') }}" />
</head>
<body>
{% block body %}{% endblock %}
{% block javascripts %}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.min.js"></script>
<script src="https://code.angularjs.org/1.2.16/angular-route.min.js"></script>
<script src="{{ asset('js/main.js') }}"></script>
{% endblock %}
</body>
</html>
Templating
Problem:
{{ interpolation tags }} - used both by twig and AngularJS
Templating
{% verbatim %}
{{ message }}
{% endverbatim %}
Templating
var phpDayDemoApp = angular.module('phpDayDemoApp', [],
function($interpolateProvider) {
$interpolateProvider.startSymbol('[[');
$interpolateProvider.endSymbol(']]');
});
Now we can use
{% block content %}
[[ message ]] {# rendered by AngularJS #}
{% end block %}
Templating
Using assetic for minimize
{% javascripts
"js/angular-modules/mod1.js"
"#s/angular-modules/mod2.js"
"@AngBundle/Resources/public/js/controller/*.js"
output="compiled/js/app.js"
%}
<script type="text/javascript" src="{{ asset_url }}"></script>
{% endjavascripts %}
Templating
Using assetic for minimize
Since Angular infers the controller's dependencies from the names of
arguments to the controller's constructor function, if you were to minify the
JavaScript code for PhoneListCtrl controller, all of its function arguments
would be minified as well, and the dependency injector would not be able
to identify services correctly.
Use an inline annotation where, instead of just providing the function, you
provide an array. This array contains a list of the service names, followed by
the function itself.
function PhoneListCtrl($scope, $http) {...}
phonecatApp.controller('phpDayCtrl', ['$scope', '$http', PhoneListCtrl]);
Managing routes
Client side:
ngRoute
independent since Angular 1.1.6
hashbang #! & HTML5 mode
<base href="/">
$locationProvider
.html5Mode(true)
.hashPrefix('!');
Managing routes
http://localhost/todos
http://localhost/#todos
Resolving conflicts
Fallback, managing 404
Managing routes
Client side:
// module configuration...$routeProvider.when('/todos/show/:id', {
templateUrl : 'todo/show',
controller : 'todoController'
})
// receive paramssfugDemoApp.controller('todoController', function($scope, $http, $routeParams){
$scope.todo = {};
$http
.get('/api/todo/show/' + $routeParams.id)
.success(function(data){
$scope.todo = data['todo'];
});
});
Managing routes
Server side:
locastic_rest_todo_getall:
pattern: /api/get-all
defaults:
_controller: LocasticRestBundle:Todo:getAll
locastic_rest_todo_create:
pattern: /api/create
defaults:
_controller: LocasticRestBundle:Todo:create
locastic_rest_todo_show:
pattern: /api/show/{id}
defaults:
_controller: LocasticRestBundle:Todo:show
Translations
AngularJS has its own translation system
I18N/L10N . But it might be interesting to monitor
and centralize translations from your backend
Symfony.
Forms
Symfony Forms <3
We don't want to throw them away
Build custom directive
Forms
sfugDemoApp.directive('ngToDoForm', function() {
return {
restrict: 'E',
template: '<div class="todoForm">Form will be!</div>'
}
});
'A' - <span ng-sparkline></span>
'E' - <ng-sparkline></ng-sparkline>
'C' - <span class="ng-sparkline"></span>
'M' - <!-- directive: ng-sparkline →
Usage of directive in HTML:
<ng-to-do-form></ng-to-do-form>
Forms
sfugDemoApp.directive('ngToDoForm', function() {
return {
restrict: 'E',
templateUrl: '/api/form/show.html'
}
});
Forms
sfugDemoApp.directive('ngToDoForm', function() {
return {
restrict: 'E',
templateUrl: '/api/form/show.html'
}
});
locastic_show_form:
pattern: /form/show.html
defaults:
_controller: LocasticWebBundle:Default:renderForm
public function renderFormAction()
{
$form = $this->createForm(new TodoType());
return $this->render('LocasticWebBundle::render_form.html.twig', array(
'form' => $form->createView()
));
}
Forms
Suprise!!!
Form
Template behind directive
<form class="form-inline" role="form" style="margin-bottom: 30px;">
Create new todo:
<div class="form-group">
{{ form_label(form.description) }}
{{ form_widget(form.description, {'attr': {'ng-model': 'newTodo.description', 'placeholder':
'description', 'class': 'form-control'}}) }}
</div>
<div class="form-group">
<label class="sr-only" for="deadline">Deadline</label>
<input type="text" class="form-control" id="deadline" placeholder="deadline (angular-ui)" ng-
model="newTodo.deadline">
</div>
<input type="button" class="btn btn-default" ng-click="addNew()" value="add"/>
</form>
Testing
Symfony and AngularJS are designed to test. So write test
Behat
PHPUnit
PHPSpec
Jasmine
…
Or whatever you want just write tests
Summary
The cleanest way is to separate backend and frontend. But there is some
advantages to use both together.
Twig + HTML works well.
Assetic Bundle is very useful to minify bunches of Javascript files used by
AngularJs
Translation in the template. the data in the API payload does not need
translation in most cases. Using Symfony I18N support for the template
makes perfect sense.
Loading of Option lists. Say you have a country list with 200+ options. You
can build an API to populate a dynamic dropdown in angularjs, but as these
And remember
Keep controllers small and stupid, master Dependency
injection, delegate to services and events.
Thank you!
QA
Please rate my talk
https://joind.in/talk/view/11290
follow me on twitter: @antonioperic

More Related Content

What's hot (20)

Mojolicious, real-time web framework
Mojolicious, real-time web frameworkMojolicious, real-time web framework
Mojolicious, real-time web framework
taggg
 
Using Renderless Components in Vue.js during your software development.
Using Renderless Components in Vue.js during your software development.Using Renderless Components in Vue.js during your software development.
Using Renderless Components in Vue.js during your software development.
tothepointIT
 
Symfony Guard Authentication: Fun with API Token, Social Login, JWT and more
Symfony Guard Authentication: Fun with API Token, Social Login, JWT and moreSymfony Guard Authentication: Fun with API Token, Social Login, JWT and more
Symfony Guard Authentication: Fun with API Token, Social Login, JWT and more
Ryan Weaver
 
Mojolicious
MojoliciousMojolicious
Mojolicious
Marcus Ramberg
 
PHP MVC
PHP MVCPHP MVC
PHP MVC
Reggie Niccolo Santos
 
Microservice Teststrategie mit Symfony2
Microservice Teststrategie mit Symfony2Microservice Teststrategie mit Symfony2
Microservice Teststrategie mit Symfony2
Per Bernhardt
 
#31.스프링프레임워크 & 마이바티스 (Spring Framework, MyBatis)_스프링프레임워크 강좌, 재직자환급교육,실업자국비지원...
#31.스프링프레임워크 & 마이바티스 (Spring Framework, MyBatis)_스프링프레임워크 강좌, 재직자환급교육,실업자국비지원...#31.스프링프레임워크 & 마이바티스 (Spring Framework, MyBatis)_스프링프레임워크 강좌, 재직자환급교육,실업자국비지원...
#31.스프링프레임워크 & 마이바티스 (Spring Framework, MyBatis)_스프링프레임워크 강좌, 재직자환급교육,실업자국비지원...
탑크리에듀(구로디지털단지역3번출구 2분거리)
 
New Symfony Tips & Tricks (SymfonyCon Paris 2015)
New Symfony Tips & Tricks (SymfonyCon Paris 2015)New Symfony Tips & Tricks (SymfonyCon Paris 2015)
New Symfony Tips & Tricks (SymfonyCon Paris 2015)
Javier Eguiluz
 
Creating the interfaces of the future with the APIs of today
Creating the interfaces of the future with the APIs of todayCreating the interfaces of the future with the APIs of today
Creating the interfaces of the future with the APIs of today
gerbille
 
Application Layer in PHP
Application Layer in PHPApplication Layer in PHP
Application Layer in PHP
Per Bernhardt
 
A Little Backbone For Your App
A Little Backbone For Your AppA Little Backbone For Your App
A Little Backbone For Your App
Luca Mearelli
 
Laravel 로 배우는 서버사이드 #5
Laravel 로 배우는 서버사이드 #5Laravel 로 배우는 서버사이드 #5
Laravel 로 배우는 서버사이드 #5
성일 한
 
Curso Symfony - Clase 4
Curso Symfony - Clase 4Curso Symfony - Clase 4
Curso Symfony - Clase 4
Javier Eguiluz
 
Introducing Assetic: Asset Management for PHP 5.3
Introducing Assetic: Asset Management for PHP 5.3Introducing Assetic: Asset Management for PHP 5.3
Introducing Assetic: Asset Management for PHP 5.3
Kris Wallsmith
 
Symfony & Javascript. Combining the best of two worlds
Symfony & Javascript. Combining the best of two worldsSymfony & Javascript. Combining the best of two worlds
Symfony & Javascript. Combining the best of two worlds
Ignacio Martín
 
OSCON Google App Engine Codelab - July 2010
OSCON Google App Engine Codelab - July 2010OSCON Google App Engine Codelab - July 2010
OSCON Google App Engine Codelab - July 2010
ikailan
 
And now you have two problems. Ruby regular expressions for fun and profit by...
And now you have two problems. Ruby regular expressions for fun and profit by...And now you have two problems. Ruby regular expressions for fun and profit by...
And now you have two problems. Ruby regular expressions for fun and profit by...
Codemotion
 
Sane Async Patterns
Sane Async PatternsSane Async Patterns
Sane Async Patterns
TrevorBurnham
 
Symfony 2
Symfony 2Symfony 2
Symfony 2
Kris Wallsmith
 
Controlling The Cloud With Python
Controlling The Cloud With PythonControlling The Cloud With Python
Controlling The Cloud With Python
Luca Mearelli
 
Mojolicious, real-time web framework
Mojolicious, real-time web frameworkMojolicious, real-time web framework
Mojolicious, real-time web framework
taggg
 
Using Renderless Components in Vue.js during your software development.
Using Renderless Components in Vue.js during your software development.Using Renderless Components in Vue.js during your software development.
Using Renderless Components in Vue.js during your software development.
tothepointIT
 
Symfony Guard Authentication: Fun with API Token, Social Login, JWT and more
Symfony Guard Authentication: Fun with API Token, Social Login, JWT and moreSymfony Guard Authentication: Fun with API Token, Social Login, JWT and more
Symfony Guard Authentication: Fun with API Token, Social Login, JWT and more
Ryan Weaver
 
Microservice Teststrategie mit Symfony2
Microservice Teststrategie mit Symfony2Microservice Teststrategie mit Symfony2
Microservice Teststrategie mit Symfony2
Per Bernhardt
 
#31.스프링프레임워크 & 마이바티스 (Spring Framework, MyBatis)_스프링프레임워크 강좌, 재직자환급교육,실업자국비지원...
#31.스프링프레임워크 & 마이바티스 (Spring Framework, MyBatis)_스프링프레임워크 강좌, 재직자환급교육,실업자국비지원...#31.스프링프레임워크 & 마이바티스 (Spring Framework, MyBatis)_스프링프레임워크 강좌, 재직자환급교육,실업자국비지원...
#31.스프링프레임워크 & 마이바티스 (Spring Framework, MyBatis)_스프링프레임워크 강좌, 재직자환급교육,실업자국비지원...
탑크리에듀(구로디지털단지역3번출구 2분거리)
 
New Symfony Tips & Tricks (SymfonyCon Paris 2015)
New Symfony Tips & Tricks (SymfonyCon Paris 2015)New Symfony Tips & Tricks (SymfonyCon Paris 2015)
New Symfony Tips & Tricks (SymfonyCon Paris 2015)
Javier Eguiluz
 
Creating the interfaces of the future with the APIs of today
Creating the interfaces of the future with the APIs of todayCreating the interfaces of the future with the APIs of today
Creating the interfaces of the future with the APIs of today
gerbille
 
Application Layer in PHP
Application Layer in PHPApplication Layer in PHP
Application Layer in PHP
Per Bernhardt
 
A Little Backbone For Your App
A Little Backbone For Your AppA Little Backbone For Your App
A Little Backbone For Your App
Luca Mearelli
 
Laravel 로 배우는 서버사이드 #5
Laravel 로 배우는 서버사이드 #5Laravel 로 배우는 서버사이드 #5
Laravel 로 배우는 서버사이드 #5
성일 한
 
Curso Symfony - Clase 4
Curso Symfony - Clase 4Curso Symfony - Clase 4
Curso Symfony - Clase 4
Javier Eguiluz
 
Introducing Assetic: Asset Management for PHP 5.3
Introducing Assetic: Asset Management for PHP 5.3Introducing Assetic: Asset Management for PHP 5.3
Introducing Assetic: Asset Management for PHP 5.3
Kris Wallsmith
 
Symfony & Javascript. Combining the best of two worlds
Symfony & Javascript. Combining the best of two worldsSymfony & Javascript. Combining the best of two worlds
Symfony & Javascript. Combining the best of two worlds
Ignacio Martín
 
OSCON Google App Engine Codelab - July 2010
OSCON Google App Engine Codelab - July 2010OSCON Google App Engine Codelab - July 2010
OSCON Google App Engine Codelab - July 2010
ikailan
 
And now you have two problems. Ruby regular expressions for fun and profit by...
And now you have two problems. Ruby regular expressions for fun and profit by...And now you have two problems. Ruby regular expressions for fun and profit by...
And now you have two problems. Ruby regular expressions for fun and profit by...
Codemotion
 
Controlling The Cloud With Python
Controlling The Cloud With PythonControlling The Cloud With Python
Controlling The Cloud With Python
Luca Mearelli
 

Viewers also liked (20)

Symfony + AngularJS | Mladen Plavsic @DaFED26
Symfony + AngularJS | Mladen Plavsic @DaFED26Symfony + AngularJS | Mladen Plavsic @DaFED26
Symfony + AngularJS | Mladen Plavsic @DaFED26
Mladen Plavšić
 
Desarrollo Web Ágil con Symfony, Bootstrap y Angular
Desarrollo Web Ágil con Symfony, Bootstrap y AngularDesarrollo Web Ágil con Symfony, Bootstrap y Angular
Desarrollo Web Ágil con Symfony, Bootstrap y Angular
Freelancer
 
Symfony with angular.pptx
Symfony with angular.pptxSymfony with angular.pptx
Symfony with angular.pptx
Esokia
 
deSymfony 2013 - Creando aplicaciones web desde otro ángulo con Symfony y A...
deSymfony 2013 -  Creando aplicaciones web desde otro ángulo con Symfony y A...deSymfony 2013 -  Creando aplicaciones web desde otro ángulo con Symfony y A...
deSymfony 2013 - Creando aplicaciones web desde otro ángulo con Symfony y A...
Pablo Godel
 
A Practical Introduction to Symfony2
A Practical Introduction to Symfony2A Practical Introduction to Symfony2
A Practical Introduction to Symfony2
Kris Wallsmith
 
Symfony 2 : chapitre 4 - Les services et les formulaires
Symfony 2 : chapitre 4 - Les services et les formulairesSymfony 2 : chapitre 4 - Les services et les formulaires
Symfony 2 : chapitre 4 - Les services et les formulaires
Abdelkader Rhouati
 
REST APIs in the context of single-page applications
REST APIs in the context of single-page applicationsREST APIs in the context of single-page applications
REST APIs in the context of single-page applications
yoranbe
 
برنامج جمعية بسمة أمل بوجدة لسنة 2013
برنامج جمعية بسمة أمل بوجدة لسنة 2013برنامج جمعية بسمة أمل بوجدة لسنة 2013
برنامج جمعية بسمة أمل بوجدة لسنة 2013
Abdelkader Rhouati
 
Symfony2 e Elasticsearch com FosElasticaBundle
Symfony2 e Elasticsearch com FosElasticaBundleSymfony2 e Elasticsearch com FosElasticaBundle
Symfony2 e Elasticsearch com FosElasticaBundle
Waldemar Neto
 
Maintainable + Extensible = Clean ... yes, Code!
Maintainable + Extensible = Clean ... yes, Code! Maintainable + Extensible = Clean ... yes, Code!
Maintainable + Extensible = Clean ... yes, Code!
Antonio Peric-Mazar
 
Starting with Symfony2
Starting with Symfony2Starting with Symfony2
Starting with Symfony2
Kevin Bond
 
Bash Scripting
Bash ScriptingBash Scripting
Bash Scripting
Marian Marinov
 
Applications secure by default
Applications secure by defaultApplications secure by default
Applications secure by default
SecuRing
 
PPT on Angular 2 Development Tutorial
PPT on Angular 2 Development TutorialPPT on Angular 2 Development Tutorial
PPT on Angular 2 Development Tutorial
Paddy Lock
 
Bash Scripting
Bash ScriptingBash Scripting
Bash Scripting
Vincent Claes
 
LVIV IT Arena - SmartHome using low cost components
LVIV IT Arena - SmartHome using low cost componentsLVIV IT Arena - SmartHome using low cost components
LVIV IT Arena - SmartHome using low cost components
Oriol Rius
 
Javascript Memory leaks and Performance & Angular
Javascript Memory leaks and Performance & AngularJavascript Memory leaks and Performance & Angular
Javascript Memory leaks and Performance & Angular
Erik Guzman
 
Java9 moduulit jigsaw
Java9 moduulit jigsawJava9 moduulit jigsaw
Java9 moduulit jigsaw
Arto Santala
 
AngularJS - Overcoming performance issues. Limits.
AngularJS - Overcoming performance issues. Limits.AngularJS - Overcoming performance issues. Limits.
AngularJS - Overcoming performance issues. Limits.
Dragos Mihai Rusu
 
Symfony + AngularJS | Mladen Plavsic @DaFED26
Symfony + AngularJS | Mladen Plavsic @DaFED26Symfony + AngularJS | Mladen Plavsic @DaFED26
Symfony + AngularJS | Mladen Plavsic @DaFED26
Mladen Plavšić
 
Desarrollo Web Ágil con Symfony, Bootstrap y Angular
Desarrollo Web Ágil con Symfony, Bootstrap y AngularDesarrollo Web Ágil con Symfony, Bootstrap y Angular
Desarrollo Web Ágil con Symfony, Bootstrap y Angular
Freelancer
 
Symfony with angular.pptx
Symfony with angular.pptxSymfony with angular.pptx
Symfony with angular.pptx
Esokia
 
deSymfony 2013 - Creando aplicaciones web desde otro ángulo con Symfony y A...
deSymfony 2013 -  Creando aplicaciones web desde otro ángulo con Symfony y A...deSymfony 2013 -  Creando aplicaciones web desde otro ángulo con Symfony y A...
deSymfony 2013 - Creando aplicaciones web desde otro ángulo con Symfony y A...
Pablo Godel
 
A Practical Introduction to Symfony2
A Practical Introduction to Symfony2A Practical Introduction to Symfony2
A Practical Introduction to Symfony2
Kris Wallsmith
 
Symfony 2 : chapitre 4 - Les services et les formulaires
Symfony 2 : chapitre 4 - Les services et les formulairesSymfony 2 : chapitre 4 - Les services et les formulaires
Symfony 2 : chapitre 4 - Les services et les formulaires
Abdelkader Rhouati
 
REST APIs in the context of single-page applications
REST APIs in the context of single-page applicationsREST APIs in the context of single-page applications
REST APIs in the context of single-page applications
yoranbe
 
برنامج جمعية بسمة أمل بوجدة لسنة 2013
برنامج جمعية بسمة أمل بوجدة لسنة 2013برنامج جمعية بسمة أمل بوجدة لسنة 2013
برنامج جمعية بسمة أمل بوجدة لسنة 2013
Abdelkader Rhouati
 
Symfony2 e Elasticsearch com FosElasticaBundle
Symfony2 e Elasticsearch com FosElasticaBundleSymfony2 e Elasticsearch com FosElasticaBundle
Symfony2 e Elasticsearch com FosElasticaBundle
Waldemar Neto
 
Maintainable + Extensible = Clean ... yes, Code!
Maintainable + Extensible = Clean ... yes, Code! Maintainable + Extensible = Clean ... yes, Code!
Maintainable + Extensible = Clean ... yes, Code!
Antonio Peric-Mazar
 
Starting with Symfony2
Starting with Symfony2Starting with Symfony2
Starting with Symfony2
Kevin Bond
 
Applications secure by default
Applications secure by defaultApplications secure by default
Applications secure by default
SecuRing
 
PPT on Angular 2 Development Tutorial
PPT on Angular 2 Development TutorialPPT on Angular 2 Development Tutorial
PPT on Angular 2 Development Tutorial
Paddy Lock
 
LVIV IT Arena - SmartHome using low cost components
LVIV IT Arena - SmartHome using low cost componentsLVIV IT Arena - SmartHome using low cost components
LVIV IT Arena - SmartHome using low cost components
Oriol Rius
 
Javascript Memory leaks and Performance & Angular
Javascript Memory leaks and Performance & AngularJavascript Memory leaks and Performance & Angular
Javascript Memory leaks and Performance & Angular
Erik Guzman
 
Java9 moduulit jigsaw
Java9 moduulit jigsawJava9 moduulit jigsaw
Java9 moduulit jigsaw
Arto Santala
 
AngularJS - Overcoming performance issues. Limits.
AngularJS - Overcoming performance issues. Limits.AngularJS - Overcoming performance issues. Limits.
AngularJS - Overcoming performance issues. Limits.
Dragos Mihai Rusu
 
Ad

Similar to Symfony2 and AngularJS (20)

Building APIs in an easy way using API Platform
Building APIs in an easy way using API PlatformBuilding APIs in an easy way using API Platform
Building APIs in an easy way using API Platform
Antonio Peric-Mazar
 
Lone StarPHP 2013 - Building Web Apps from a New Angle
Lone StarPHP 2013 - Building Web Apps from a New AngleLone StarPHP 2013 - Building Web Apps from a New Angle
Lone StarPHP 2013 - Building Web Apps from a New Angle
Pablo Godel
 
Hands-on with the Symfony2 Framework
Hands-on with the Symfony2 FrameworkHands-on with the Symfony2 Framework
Hands-on with the Symfony2 Framework
Ryan Weaver
 
Symfony
SymfonySymfony
Symfony
Артём Курапов
 
Symfony2 San Francisco Meetup 2009
Symfony2 San Francisco Meetup 2009Symfony2 San Francisco Meetup 2009
Symfony2 San Francisco Meetup 2009
Fabien Potencier
 
Tek 2013 - Building Web Apps from a New Angle with AngularJS
Tek 2013 - Building Web Apps from a New Angle with AngularJSTek 2013 - Building Web Apps from a New Angle with AngularJS
Tek 2013 - Building Web Apps from a New Angle with AngularJS
Pablo Godel
 
Symfony101
Symfony101Symfony101
Symfony101
Berislav Sapina
 
Symony2 A Next Generation PHP Framework
Symony2 A Next Generation PHP FrameworkSymony2 A Next Generation PHP Framework
Symony2 A Next Generation PHP Framework
Ryan Weaver
 
symfony_from_scratch
symfony_from_scratchsymfony_from_scratch
symfony_from_scratch
tutorialsruby
 
symfony_from_scratch
symfony_from_scratchsymfony_from_scratch
symfony_from_scratch
tutorialsruby
 
Crash Course in AngularJS + Ionic (Deep dive)
Crash Course in AngularJS + Ionic (Deep dive)Crash Course in AngularJS + Ionic (Deep dive)
Crash Course in AngularJS + Ionic (Deep dive)
ColdFusionConference
 
Complex Sites with Silex
Complex Sites with SilexComplex Sites with Silex
Complex Sites with Silex
Chris Tankersley
 
Build powerfull and smart web applications with Symfony2
Build powerfull and smart web applications with Symfony2Build powerfull and smart web applications with Symfony2
Build powerfull and smart web applications with Symfony2
Hugo Hamon
 
Angular training - Day 3 - custom directives, $http, $resource, setup with ye...
Angular training - Day 3 - custom directives, $http, $resource, setup with ye...Angular training - Day 3 - custom directives, $http, $resource, setup with ye...
Angular training - Day 3 - custom directives, $http, $resource, setup with ye...
murtazahaveliwala
 
Symfony 2.0
Symfony 2.0Symfony 2.0
Symfony 2.0
GrUSP
 
An introduction to Symfony 2 for symfony 1 developers
An introduction to Symfony 2 for symfony 1 developersAn introduction to Symfony 2 for symfony 1 developers
An introduction to Symfony 2 for symfony 1 developers
Giorgio Cefaro
 
Symfony quick tour_2.3
Symfony quick tour_2.3Symfony quick tour_2.3
Symfony quick tour_2.3
Frédéric Delorme
 
Angular js for enteprise application
Angular js for enteprise applicationAngular js for enteprise application
Angular js for enteprise application
vu van quyet
 
AngularJS in Production (CTO Forum)
AngularJS in Production (CTO Forum)AngularJS in Production (CTO Forum)
AngularJS in Production (CTO Forum)
Alex Ross
 
AngularJS for Web and Mobile
 AngularJS for Web and Mobile AngularJS for Web and Mobile
AngularJS for Web and Mobile
Rocket Software
 
Building APIs in an easy way using API Platform
Building APIs in an easy way using API PlatformBuilding APIs in an easy way using API Platform
Building APIs in an easy way using API Platform
Antonio Peric-Mazar
 
Lone StarPHP 2013 - Building Web Apps from a New Angle
Lone StarPHP 2013 - Building Web Apps from a New AngleLone StarPHP 2013 - Building Web Apps from a New Angle
Lone StarPHP 2013 - Building Web Apps from a New Angle
Pablo Godel
 
Hands-on with the Symfony2 Framework
Hands-on with the Symfony2 FrameworkHands-on with the Symfony2 Framework
Hands-on with the Symfony2 Framework
Ryan Weaver
 
Symfony2 San Francisco Meetup 2009
Symfony2 San Francisco Meetup 2009Symfony2 San Francisco Meetup 2009
Symfony2 San Francisco Meetup 2009
Fabien Potencier
 
Tek 2013 - Building Web Apps from a New Angle with AngularJS
Tek 2013 - Building Web Apps from a New Angle with AngularJSTek 2013 - Building Web Apps from a New Angle with AngularJS
Tek 2013 - Building Web Apps from a New Angle with AngularJS
Pablo Godel
 
Symony2 A Next Generation PHP Framework
Symony2 A Next Generation PHP FrameworkSymony2 A Next Generation PHP Framework
Symony2 A Next Generation PHP Framework
Ryan Weaver
 
symfony_from_scratch
symfony_from_scratchsymfony_from_scratch
symfony_from_scratch
tutorialsruby
 
symfony_from_scratch
symfony_from_scratchsymfony_from_scratch
symfony_from_scratch
tutorialsruby
 
Crash Course in AngularJS + Ionic (Deep dive)
Crash Course in AngularJS + Ionic (Deep dive)Crash Course in AngularJS + Ionic (Deep dive)
Crash Course in AngularJS + Ionic (Deep dive)
ColdFusionConference
 
Build powerfull and smart web applications with Symfony2
Build powerfull and smart web applications with Symfony2Build powerfull and smart web applications with Symfony2
Build powerfull and smart web applications with Symfony2
Hugo Hamon
 
Angular training - Day 3 - custom directives, $http, $resource, setup with ye...
Angular training - Day 3 - custom directives, $http, $resource, setup with ye...Angular training - Day 3 - custom directives, $http, $resource, setup with ye...
Angular training - Day 3 - custom directives, $http, $resource, setup with ye...
murtazahaveliwala
 
Symfony 2.0
Symfony 2.0Symfony 2.0
Symfony 2.0
GrUSP
 
An introduction to Symfony 2 for symfony 1 developers
An introduction to Symfony 2 for symfony 1 developersAn introduction to Symfony 2 for symfony 1 developers
An introduction to Symfony 2 for symfony 1 developers
Giorgio Cefaro
 
Angular js for enteprise application
Angular js for enteprise applicationAngular js for enteprise application
Angular js for enteprise application
vu van quyet
 
AngularJS in Production (CTO Forum)
AngularJS in Production (CTO Forum)AngularJS in Production (CTO Forum)
AngularJS in Production (CTO Forum)
Alex Ross
 
AngularJS for Web and Mobile
 AngularJS for Web and Mobile AngularJS for Web and Mobile
AngularJS for Web and Mobile
Rocket Software
 
Ad

More from Antonio Peric-Mazar (20)

You call yourself a Senior Developer?
You call yourself a Senior Developer?You call yourself a Senior Developer?
You call yourself a Senior Developer?
Antonio Peric-Mazar
 
Using API Platform to build ticketing system #symfonycon
Using API Platform to build ticketing system #symfonyconUsing API Platform to build ticketing system #symfonycon
Using API Platform to build ticketing system #symfonycon
Antonio Peric-Mazar
 
Using API platform to build ticketing system (translations, time zones, ...) ...
Using API platform to build ticketing system (translations, time zones, ...) ...Using API platform to build ticketing system (translations, time zones, ...) ...
Using API platform to build ticketing system (translations, time zones, ...) ...
Antonio Peric-Mazar
 
Are you failing at being agile? #digitallabin
Are you failing at being agile? #digitallabinAre you failing at being agile? #digitallabin
Are you failing at being agile? #digitallabin
Antonio Peric-Mazar
 
Symfony 4: A new way to develop applications #ipc19
Symfony 4: A new way to develop applications #ipc19Symfony 4: A new way to develop applications #ipc19
Symfony 4: A new way to develop applications #ipc19
Antonio Peric-Mazar
 
A year with progressive web apps! #webinale
A year with progressive web apps! #webinaleA year with progressive web apps! #webinale
A year with progressive web apps! #webinale
Antonio Peric-Mazar
 
The UI is the THE application #dpc19
The UI is the THE application #dpc19The UI is the THE application #dpc19
The UI is the THE application #dpc19
Antonio Peric-Mazar
 
Symfony 4: A new way to develop applications #phpsrb
 Symfony 4: A new way to develop applications #phpsrb Symfony 4: A new way to develop applications #phpsrb
Symfony 4: A new way to develop applications #phpsrb
Antonio Peric-Mazar
 
REST easy with API Platform
REST easy with API PlatformREST easy with API Platform
REST easy with API Platform
Antonio Peric-Mazar
 
A year with progressive web apps! #DevConMU
A year with progressive web apps! #DevConMUA year with progressive web apps! #DevConMU
A year with progressive web apps! #DevConMU
Antonio Peric-Mazar
 
Service workers are your best friends
Service workers are your best friendsService workers are your best friends
Service workers are your best friends
Antonio Peric-Mazar
 
Progressive Web Apps are here!
Progressive Web Apps are here!Progressive Web Apps are here!
Progressive Web Apps are here!
Antonio Peric-Mazar
 
Symfony4 - A new way of developing web applications
Symfony4 - A new way of developing web applicationsSymfony4 - A new way of developing web applications
Symfony4 - A new way of developing web applications
Antonio Peric-Mazar
 
Build your business on top of Open Source
Build your business on top of Open SourceBuild your business on top of Open Source
Build your business on top of Open Source
Antonio Peric-Mazar
 
Building APIs in an easy way using API Platform
Building APIs in an easy way using API PlatformBuilding APIs in an easy way using API Platform
Building APIs in an easy way using API Platform
Antonio Peric-Mazar
 
Lessons learned while developing with Sylius
Lessons learned while developing with SyliusLessons learned while developing with Sylius
Lessons learned while developing with Sylius
Antonio Peric-Mazar
 
Drupal8 for Symfony developers - Dutch PHP
Drupal8 for Symfony developers - Dutch PHPDrupal8 for Symfony developers - Dutch PHP
Drupal8 for Symfony developers - Dutch PHP
Antonio Peric-Mazar
 
Drupal8 for Symfony Developers (PHP Day Verona 2017)
Drupal8 for Symfony Developers (PHP Day Verona 2017)Drupal8 for Symfony Developers (PHP Day Verona 2017)
Drupal8 for Symfony Developers (PHP Day Verona 2017)
Antonio Peric-Mazar
 
Drupal8 for Symfony Developers
Drupal8 for Symfony DevelopersDrupal8 for Symfony Developers
Drupal8 for Symfony Developers
Antonio Peric-Mazar
 
A recipe for effective leadership
A recipe for effective leadershipA recipe for effective leadership
A recipe for effective leadership
Antonio Peric-Mazar
 
You call yourself a Senior Developer?
You call yourself a Senior Developer?You call yourself a Senior Developer?
You call yourself a Senior Developer?
Antonio Peric-Mazar
 
Using API Platform to build ticketing system #symfonycon
Using API Platform to build ticketing system #symfonyconUsing API Platform to build ticketing system #symfonycon
Using API Platform to build ticketing system #symfonycon
Antonio Peric-Mazar
 
Using API platform to build ticketing system (translations, time zones, ...) ...
Using API platform to build ticketing system (translations, time zones, ...) ...Using API platform to build ticketing system (translations, time zones, ...) ...
Using API platform to build ticketing system (translations, time zones, ...) ...
Antonio Peric-Mazar
 
Are you failing at being agile? #digitallabin
Are you failing at being agile? #digitallabinAre you failing at being agile? #digitallabin
Are you failing at being agile? #digitallabin
Antonio Peric-Mazar
 
Symfony 4: A new way to develop applications #ipc19
Symfony 4: A new way to develop applications #ipc19Symfony 4: A new way to develop applications #ipc19
Symfony 4: A new way to develop applications #ipc19
Antonio Peric-Mazar
 
A year with progressive web apps! #webinale
A year with progressive web apps! #webinaleA year with progressive web apps! #webinale
A year with progressive web apps! #webinale
Antonio Peric-Mazar
 
The UI is the THE application #dpc19
The UI is the THE application #dpc19The UI is the THE application #dpc19
The UI is the THE application #dpc19
Antonio Peric-Mazar
 
Symfony 4: A new way to develop applications #phpsrb
 Symfony 4: A new way to develop applications #phpsrb Symfony 4: A new way to develop applications #phpsrb
Symfony 4: A new way to develop applications #phpsrb
Antonio Peric-Mazar
 
A year with progressive web apps! #DevConMU
A year with progressive web apps! #DevConMUA year with progressive web apps! #DevConMU
A year with progressive web apps! #DevConMU
Antonio Peric-Mazar
 
Service workers are your best friends
Service workers are your best friendsService workers are your best friends
Service workers are your best friends
Antonio Peric-Mazar
 
Symfony4 - A new way of developing web applications
Symfony4 - A new way of developing web applicationsSymfony4 - A new way of developing web applications
Symfony4 - A new way of developing web applications
Antonio Peric-Mazar
 
Build your business on top of Open Source
Build your business on top of Open SourceBuild your business on top of Open Source
Build your business on top of Open Source
Antonio Peric-Mazar
 
Building APIs in an easy way using API Platform
Building APIs in an easy way using API PlatformBuilding APIs in an easy way using API Platform
Building APIs in an easy way using API Platform
Antonio Peric-Mazar
 
Lessons learned while developing with Sylius
Lessons learned while developing with SyliusLessons learned while developing with Sylius
Lessons learned while developing with Sylius
Antonio Peric-Mazar
 
Drupal8 for Symfony developers - Dutch PHP
Drupal8 for Symfony developers - Dutch PHPDrupal8 for Symfony developers - Dutch PHP
Drupal8 for Symfony developers - Dutch PHP
Antonio Peric-Mazar
 
Drupal8 for Symfony Developers (PHP Day Verona 2017)
Drupal8 for Symfony Developers (PHP Day Verona 2017)Drupal8 for Symfony Developers (PHP Day Verona 2017)
Drupal8 for Symfony Developers (PHP Day Verona 2017)
Antonio Peric-Mazar
 
A recipe for effective leadership
A recipe for effective leadershipA recipe for effective leadership
A recipe for effective leadership
Antonio Peric-Mazar
 

Recently uploaded (20)

Artificial Intelligence Applications Across Industries
Artificial Intelligence Applications Across IndustriesArtificial Intelligence Applications Across Industries
Artificial Intelligence Applications Across Industries
SandeepKS52
 
Automating Map Production With FME and Python
Automating Map Production With FME and PythonAutomating Map Production With FME and Python
Automating Map Production With FME and Python
Safe Software
 
Simplify Training with an Online Induction Portal for Contractors
Simplify Training with an Online Induction Portal for ContractorsSimplify Training with an Online Induction Portal for Contractors
Simplify Training with an Online Induction Portal for Contractors
SHEQ Network Limited
 
Agentic Techniques in Retrieval-Augmented Generation with Azure AI Search
Agentic Techniques in Retrieval-Augmented Generation with Azure AI SearchAgentic Techniques in Retrieval-Augmented Generation with Azure AI Search
Agentic Techniques in Retrieval-Augmented Generation with Azure AI Search
Maxim Salnikov
 
Boost Student Engagement with Smart Attendance Software for Schools
Boost Student Engagement with Smart Attendance Software for SchoolsBoost Student Engagement with Smart Attendance Software for Schools
Boost Student Engagement with Smart Attendance Software for Schools
Visitu
 
Topic 26 Security Testing Considerations.pptx
Topic 26 Security Testing Considerations.pptxTopic 26 Security Testing Considerations.pptx
Topic 26 Security Testing Considerations.pptx
marutnand8
 
Why Indonesia’s $12.63B Alt-Lending Boom Needs Loan Servicing Automation & Re...
Why Indonesia’s $12.63B Alt-Lending Boom Needs Loan Servicing Automation & Re...Why Indonesia’s $12.63B Alt-Lending Boom Needs Loan Servicing Automation & Re...
Why Indonesia’s $12.63B Alt-Lending Boom Needs Loan Servicing Automation & Re...
Prachi Desai
 
Providing Better Biodiversity Through Better Data
Providing Better Biodiversity Through Better DataProviding Better Biodiversity Through Better Data
Providing Better Biodiversity Through Better Data
Safe Software
 
From Chaos to Clarity - Designing (AI-Ready) APIs with APIOps Cycles
From Chaos to Clarity - Designing (AI-Ready) APIs with APIOps CyclesFrom Chaos to Clarity - Designing (AI-Ready) APIs with APIOps Cycles
From Chaos to Clarity - Designing (AI-Ready) APIs with APIOps Cycles
Marjukka Niinioja
 
Generative Artificial Intelligence and its Applications
Generative Artificial Intelligence and its ApplicationsGenerative Artificial Intelligence and its Applications
Generative Artificial Intelligence and its Applications
SandeepKS52
 
Essentials of Resource Planning in a Downturn
Essentials of Resource Planning in a DownturnEssentials of Resource Planning in a Downturn
Essentials of Resource Planning in a Downturn
OnePlan Solutions
 
iOS Developer Resume 2025 | Pramod Kumar
iOS Developer Resume 2025 | Pramod KumariOS Developer Resume 2025 | Pramod Kumar
iOS Developer Resume 2025 | Pramod Kumar
Pramod Kumar
 
Scalefusion Remote Access for Apple Devices
Scalefusion Remote Access for Apple DevicesScalefusion Remote Access for Apple Devices
Scalefusion Remote Access for Apple Devices
Scalefusion
 
Content Mate Web App Triples Content Managers‘ Productivity
Content Mate Web App Triples Content Managers‘ ProductivityContent Mate Web App Triples Content Managers‘ Productivity
Content Mate Web App Triples Content Managers‘ Productivity
Alex Vladimirovich
 
AI and Deep Learning with NVIDIA Technologies
AI and Deep Learning with NVIDIA TechnologiesAI and Deep Learning with NVIDIA Technologies
AI and Deep Learning with NVIDIA Technologies
SandeepKS52
 
AI-ASSISTED METAMORPHIC TESTING FOR DOMAIN-SPECIFIC MODELLING AND SIMULATION
AI-ASSISTED METAMORPHIC TESTING FOR DOMAIN-SPECIFIC MODELLING AND SIMULATIONAI-ASSISTED METAMORPHIC TESTING FOR DOMAIN-SPECIFIC MODELLING AND SIMULATION
AI-ASSISTED METAMORPHIC TESTING FOR DOMAIN-SPECIFIC MODELLING AND SIMULATION
miso_uam
 
Build enterprise-ready applications using skills you already have!
Build enterprise-ready applications using skills you already have!Build enterprise-ready applications using skills you already have!
Build enterprise-ready applications using skills you already have!
PhilMeredith3
 
Neuralink Templateeeeeeeeeeeeeeeeeeeeeeeeee
Neuralink TemplateeeeeeeeeeeeeeeeeeeeeeeeeeNeuralink Templateeeeeeeeeeeeeeeeeeeeeeeeee
Neuralink Templateeeeeeeeeeeeeeeeeeeeeeeeee
alexandernoetzold
 
Top 11 Fleet Management Software Providers in 2025 (2).pdf
Top 11 Fleet Management Software Providers in 2025 (2).pdfTop 11 Fleet Management Software Providers in 2025 (2).pdf
Top 11 Fleet Management Software Providers in 2025 (2).pdf
Trackobit
 
zOS CommServer support for the Network Express feature on z17
zOS CommServer support for the Network Express feature on z17zOS CommServer support for the Network Express feature on z17
zOS CommServer support for the Network Express feature on z17
zOSCommserver
 
Artificial Intelligence Applications Across Industries
Artificial Intelligence Applications Across IndustriesArtificial Intelligence Applications Across Industries
Artificial Intelligence Applications Across Industries
SandeepKS52
 
Automating Map Production With FME and Python
Automating Map Production With FME and PythonAutomating Map Production With FME and Python
Automating Map Production With FME and Python
Safe Software
 
Simplify Training with an Online Induction Portal for Contractors
Simplify Training with an Online Induction Portal for ContractorsSimplify Training with an Online Induction Portal for Contractors
Simplify Training with an Online Induction Portal for Contractors
SHEQ Network Limited
 
Agentic Techniques in Retrieval-Augmented Generation with Azure AI Search
Agentic Techniques in Retrieval-Augmented Generation with Azure AI SearchAgentic Techniques in Retrieval-Augmented Generation with Azure AI Search
Agentic Techniques in Retrieval-Augmented Generation with Azure AI Search
Maxim Salnikov
 
Boost Student Engagement with Smart Attendance Software for Schools
Boost Student Engagement with Smart Attendance Software for SchoolsBoost Student Engagement with Smart Attendance Software for Schools
Boost Student Engagement with Smart Attendance Software for Schools
Visitu
 
Topic 26 Security Testing Considerations.pptx
Topic 26 Security Testing Considerations.pptxTopic 26 Security Testing Considerations.pptx
Topic 26 Security Testing Considerations.pptx
marutnand8
 
Why Indonesia’s $12.63B Alt-Lending Boom Needs Loan Servicing Automation & Re...
Why Indonesia’s $12.63B Alt-Lending Boom Needs Loan Servicing Automation & Re...Why Indonesia’s $12.63B Alt-Lending Boom Needs Loan Servicing Automation & Re...
Why Indonesia’s $12.63B Alt-Lending Boom Needs Loan Servicing Automation & Re...
Prachi Desai
 
Providing Better Biodiversity Through Better Data
Providing Better Biodiversity Through Better DataProviding Better Biodiversity Through Better Data
Providing Better Biodiversity Through Better Data
Safe Software
 
From Chaos to Clarity - Designing (AI-Ready) APIs with APIOps Cycles
From Chaos to Clarity - Designing (AI-Ready) APIs with APIOps CyclesFrom Chaos to Clarity - Designing (AI-Ready) APIs with APIOps Cycles
From Chaos to Clarity - Designing (AI-Ready) APIs with APIOps Cycles
Marjukka Niinioja
 
Generative Artificial Intelligence and its Applications
Generative Artificial Intelligence and its ApplicationsGenerative Artificial Intelligence and its Applications
Generative Artificial Intelligence and its Applications
SandeepKS52
 
Essentials of Resource Planning in a Downturn
Essentials of Resource Planning in a DownturnEssentials of Resource Planning in a Downturn
Essentials of Resource Planning in a Downturn
OnePlan Solutions
 
iOS Developer Resume 2025 | Pramod Kumar
iOS Developer Resume 2025 | Pramod KumariOS Developer Resume 2025 | Pramod Kumar
iOS Developer Resume 2025 | Pramod Kumar
Pramod Kumar
 
Scalefusion Remote Access for Apple Devices
Scalefusion Remote Access for Apple DevicesScalefusion Remote Access for Apple Devices
Scalefusion Remote Access for Apple Devices
Scalefusion
 
Content Mate Web App Triples Content Managers‘ Productivity
Content Mate Web App Triples Content Managers‘ ProductivityContent Mate Web App Triples Content Managers‘ Productivity
Content Mate Web App Triples Content Managers‘ Productivity
Alex Vladimirovich
 
AI and Deep Learning with NVIDIA Technologies
AI and Deep Learning with NVIDIA TechnologiesAI and Deep Learning with NVIDIA Technologies
AI and Deep Learning with NVIDIA Technologies
SandeepKS52
 
AI-ASSISTED METAMORPHIC TESTING FOR DOMAIN-SPECIFIC MODELLING AND SIMULATION
AI-ASSISTED METAMORPHIC TESTING FOR DOMAIN-SPECIFIC MODELLING AND SIMULATIONAI-ASSISTED METAMORPHIC TESTING FOR DOMAIN-SPECIFIC MODELLING AND SIMULATION
AI-ASSISTED METAMORPHIC TESTING FOR DOMAIN-SPECIFIC MODELLING AND SIMULATION
miso_uam
 
Build enterprise-ready applications using skills you already have!
Build enterprise-ready applications using skills you already have!Build enterprise-ready applications using skills you already have!
Build enterprise-ready applications using skills you already have!
PhilMeredith3
 
Neuralink Templateeeeeeeeeeeeeeeeeeeeeeeeee
Neuralink TemplateeeeeeeeeeeeeeeeeeeeeeeeeeNeuralink Templateeeeeeeeeeeeeeeeeeeeeeeeee
Neuralink Templateeeeeeeeeeeeeeeeeeeeeeeeee
alexandernoetzold
 
Top 11 Fleet Management Software Providers in 2025 (2).pdf
Top 11 Fleet Management Software Providers in 2025 (2).pdfTop 11 Fleet Management Software Providers in 2025 (2).pdf
Top 11 Fleet Management Software Providers in 2025 (2).pdf
Trackobit
 
zOS CommServer support for the Network Express feature on z17
zOS CommServer support for the Network Express feature on z17zOS CommServer support for the Network Express feature on z17
zOS CommServer support for the Network Express feature on z17
zOSCommserver
 

Symfony2 and AngularJS

  • 1. Symfony2 and AngularJS Antonio Perić-Mažar 16.05.2014, PHPday Verona https://joind.in/talk/view/11290
  • 2. About me • Antonio Perić-Mažar, mag. ing. comp. • CEO @ locastic • Software developer, Symfony2 • Sylius Awesome Contributor :) • www.locastic.com • [email protected] • twitter: @antonioperic
  • 3. Who we are? • locastic (www.locastic.com) • Web and mobile development • UI/UX design • Located in Split, Croatia
  • 6. Symfony2  PHP Framework, server side  MVC, HTTP  Toolbox, methodology  One of the most advanced PHP framework  Strong community  Easy to test it
  • 7. Symfony2  Bundles  Components  Routing  Templating (Twig)  Forms  etc
  • 8. AngularJS  Client-side JavaScript framework  Prescriptive, MVC (MVVM)  Makes creating UI easier thought data-binding  Good organizing and architecture  Learning curve, easy to start hard to master  $scope, modules, controllers, providers, services
  • 9. AngularJS Core Two-way data binding JS: <span id=”someId”></span> document.getElementById('someId').text = 'locastic'; NG <span>{{someName}}<span> var someName = 'locastic';
  • 10. AngularJS Core <html ng-app> <head> <script src=”angular.js”></script> <script src=”controller.js”></script> <head> <body> <div ng-controller=”HelloController”> <p>{{ greeting.text}}, World</p> </div> </body> </html> // controller.js function HelloController($scope) { $scope.gretting = {text: 'Hello'} } HTML template
  • 11. AngularJS Core  Deep Linking  Dependency Injection  Directives <div class=”container”> <div class=”inner> <ul> <li>Item <div class=”subitem”>Item2</div> </li> </ul> </div> </div> <dropdown> <item>Item 1> <subitem >Item 2</subitem> </item> </dropdown>
  • 13. SPA  Aka SPI (Single Page interface)  desktop apps UX  HTML / JS / CSS / etc in single page load  fast  AJAX and XHR
  • 15. SPA Arhitecture Backend (rest api) with Symfony2 Frontend with AngularJs Separation or combination?
  • 17. Symfony2 AngularJS Usage, language Backend, PHP Frontend, Javascript Dependency Injection Yes Yes Templating Twig HTML Form component Yes Yes Routing component Yes Yes MVC Yes Yes Testable Yes Yes Services Yes Yes Events Yes Yes i18n Yes Yes Dependency management Yes Yes
  • 18. RESTful ws Simpler than SOAP & WSDL Resource-oriented (URI) Principles: HTTP methods (idempotent & not) stateless directory structure-like URIs XML or JSON (or XHTML)
  • 19. Building Rest Api with SF2 There is bundle for everything in Sf2. Right? So lets use some of them!
  • 20. Building Rest Api with SF2 What we need? JMSSerializerBundle FOSRestBundle NelmioApiDocBundle
  • 21. Building Rest API with SF2 JMSSerializerBundle (de)serialization via annotations / YAML / XML / PHP integration with the Doctrine ORM handling of other complex cases (e.g. circular references)
  • 22. Building Rest Api with SF2 LocasticBundleTodoBundleEntityTodo: # exclusion_policy: ALL exclusion_policy: NONE properties: # description: # expose: true createdAt: # expose: true exclude: true deadline: type: DateTime<'d.m.Y. H:i:s'> # expose: true done: # expose: true serialized_name: status
  • 23. Building Rest Api with SF2 fos_rest: disable_csrf_role: ROLE_API param_fetcher_listener: true view: view_response_listener: 'force' formats: xml: true json: true templating_formats: html: true format_listener: rules: - { path: ^/, priorities: [ html, json, xml ], fallback_format: ~, prefer_extension: true } exception: codes: 'SymfonyComponentRoutingExceptionResourceNotFoundException': 404 'DoctrineORMOptimisticLockException': HTTP_CONFLICT messages: 'SymfonyComponentRoutingExceptionResourceNotFoundException': true allowed_methods_listener: true access_denied_listener: json: true body_listener: true
  • 24. Building Rest Api with SF2 /** * @ApiDoc( * resource = true, * description = "Get stories from users that you follow (newsfeed)", * section = "Feed", * output={ * "class" = "LocasticBundleFeedBundleEntityStory" * }, * statusCodes = { * 200 = "Returned when successful", * 400 = "Returned when bad parameters given" * } * ) * * @RestView( * serializerGroups = {"feed"} * ) */ public function getFeedAction() { $this->get('locastic_auth.auth.handler')->validateRequest($this->get('request')); return $this->getDoctrine()->getRepository('locastic.repository.story')->getStories($this->get('request')- >get('me')); }
  • 25. Building Rest Api with SF2
  • 27. Templating <!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>{% block title %}Welcome!{% endblock %}</title> {% block stylesheets %} <!-- Place favicon.ico and apple-touch-icon.png in the root directory --> {#<link rel="stylesheet" href="{{ asset('css/normalize.css') }}">#} <link rel="stylesheet" href="{{ asset('css/main.css') }}"> <!-- load bootstrap and fontawesome via CDN --> <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" /> <link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/4.0.0/css/font-awesome.css" /> <script src="{{ asset('js/vendor/modernizr-2.6.2.min.js') }}"></script> {% endblock %} <link rel="icon" type="image/x-icon" href="{{ asset('favicon.ico') }}" /> </head> <body> {% block body %}{% endblock %} {% block javascripts %} <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.min.js"></script> <script src="https://code.angularjs.org/1.2.16/angular-route.min.js"></script> <script src="{{ asset('js/main.js') }}"></script> {% endblock %} </body> </html>
  • 28. Templating Problem: {{ interpolation tags }} - used both by twig and AngularJS
  • 29. Templating {% verbatim %} {{ message }} {% endverbatim %}
  • 30. Templating var phpDayDemoApp = angular.module('phpDayDemoApp', [], function($interpolateProvider) { $interpolateProvider.startSymbol('[['); $interpolateProvider.endSymbol(']]'); }); Now we can use {% block content %} [[ message ]] {# rendered by AngularJS #} {% end block %}
  • 31. Templating Using assetic for minimize {% javascripts "js/angular-modules/mod1.js" "#s/angular-modules/mod2.js" "@AngBundle/Resources/public/js/controller/*.js" output="compiled/js/app.js" %} <script type="text/javascript" src="{{ asset_url }}"></script> {% endjavascripts %}
  • 32. Templating Using assetic for minimize Since Angular infers the controller's dependencies from the names of arguments to the controller's constructor function, if you were to minify the JavaScript code for PhoneListCtrl controller, all of its function arguments would be minified as well, and the dependency injector would not be able to identify services correctly. Use an inline annotation where, instead of just providing the function, you provide an array. This array contains a list of the service names, followed by the function itself. function PhoneListCtrl($scope, $http) {...} phonecatApp.controller('phpDayCtrl', ['$scope', '$http', PhoneListCtrl]);
  • 33. Managing routes Client side: ngRoute independent since Angular 1.1.6 hashbang #! & HTML5 mode <base href="/"> $locationProvider .html5Mode(true) .hashPrefix('!');
  • 35. Managing routes Client side: // module configuration...$routeProvider.when('/todos/show/:id', { templateUrl : 'todo/show', controller : 'todoController' }) // receive paramssfugDemoApp.controller('todoController', function($scope, $http, $routeParams){ $scope.todo = {}; $http .get('/api/todo/show/' + $routeParams.id) .success(function(data){ $scope.todo = data['todo']; }); });
  • 36. Managing routes Server side: locastic_rest_todo_getall: pattern: /api/get-all defaults: _controller: LocasticRestBundle:Todo:getAll locastic_rest_todo_create: pattern: /api/create defaults: _controller: LocasticRestBundle:Todo:create locastic_rest_todo_show: pattern: /api/show/{id} defaults: _controller: LocasticRestBundle:Todo:show
  • 37. Translations AngularJS has its own translation system I18N/L10N . But it might be interesting to monitor and centralize translations from your backend Symfony.
  • 38. Forms Symfony Forms <3 We don't want to throw them away Build custom directive
  • 39. Forms sfugDemoApp.directive('ngToDoForm', function() { return { restrict: 'E', template: '<div class="todoForm">Form will be!</div>' } }); 'A' - <span ng-sparkline></span> 'E' - <ng-sparkline></ng-sparkline> 'C' - <span class="ng-sparkline"></span> 'M' - <!-- directive: ng-sparkline → Usage of directive in HTML: <ng-to-do-form></ng-to-do-form>
  • 40. Forms sfugDemoApp.directive('ngToDoForm', function() { return { restrict: 'E', templateUrl: '/api/form/show.html' } });
  • 41. Forms sfugDemoApp.directive('ngToDoForm', function() { return { restrict: 'E', templateUrl: '/api/form/show.html' } }); locastic_show_form: pattern: /form/show.html defaults: _controller: LocasticWebBundle:Default:renderForm public function renderFormAction() { $form = $this->createForm(new TodoType()); return $this->render('LocasticWebBundle::render_form.html.twig', array( 'form' => $form->createView() )); }
  • 43. Form Template behind directive <form class="form-inline" role="form" style="margin-bottom: 30px;"> Create new todo: <div class="form-group"> {{ form_label(form.description) }} {{ form_widget(form.description, {'attr': {'ng-model': 'newTodo.description', 'placeholder': 'description', 'class': 'form-control'}}) }} </div> <div class="form-group"> <label class="sr-only" for="deadline">Deadline</label> <input type="text" class="form-control" id="deadline" placeholder="deadline (angular-ui)" ng- model="newTodo.deadline"> </div> <input type="button" class="btn btn-default" ng-click="addNew()" value="add"/> </form>
  • 44. Testing Symfony and AngularJS are designed to test. So write test Behat PHPUnit PHPSpec Jasmine … Or whatever you want just write tests
  • 45. Summary The cleanest way is to separate backend and frontend. But there is some advantages to use both together. Twig + HTML works well. Assetic Bundle is very useful to minify bunches of Javascript files used by AngularJs Translation in the template. the data in the API payload does not need translation in most cases. Using Symfony I18N support for the template makes perfect sense. Loading of Option lists. Say you have a country list with 200+ options. You can build an API to populate a dynamic dropdown in angularjs, but as these
  • 46. And remember Keep controllers small and stupid, master Dependency injection, delegate to services and events.
  • 48. QA Please rate my talk https://joind.in/talk/view/11290 follow me on twitter: @antonioperic