deSymfony 2013 -  Creando aplicaciones web desde otro ángulo con Symfony y AngularJS
Upcoming SlideShare
Loading in...5
×
 

deSymfony 2013 - Creando aplicaciones web desde otro ángulo con Symfony y AngularJS

on

  • 6,014 views

AngularJS es un framework Javascript relativamente nuevo, patrocinado por Google, que está ganando mucha popularidad gracias a su potencia, flexibilidad y simplicidad. ...

AngularJS es un framework Javascript relativamente nuevo, patrocinado por Google, que está ganando mucha popularidad gracias a su potencia, flexibilidad y simplicidad.

En esta charla haremos una introducción de sus caulidades más importantes, veremos como se acopla con Symfony para la creación de aplicaciones web con interfaz ricas y complejas, incluyendo consejos prácticos de como diseñar nuestra aplicación establecer su estructura.

Por último, mostraremos una aplicación escrita en AngularJS que se conecta a servidores REST y WebSockets creados con Symfony.

Statistics

Views

Total Views
6,014
Views on SlideShare
2,493
Embed Views
3,521

Actions

Likes
9
Downloads
93
Comments
0

17 Embeds 3,521

http://librosweb.es 2137
http://desymfony.com 816
http://yosymfony.com 329
http://www.desymfony.com 112
https://twitter.com 64
http://feeds.feedburner.com 12
http://lw.192.168.2.13.xip.io 10
http://cloud.feedly.com 7
http://desymfony.local 7
http://librosweb.dev 6
http://kred.com 5
http://feedly.com 4
http://www.google.es 4
https://www.google.es 3
http://plus.url.google.com 2
http://devi-vm.local 2
http://digg.com 1
More...

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

deSymfony 2013 -  Creando aplicaciones web desde otro ángulo con Symfony y AngularJS deSymfony 2013 - Creando aplicaciones web desde otro ángulo con Symfony y AngularJS Presentation Transcript

  • Monday, June 24, 13
  • Monday, June 24, 13
  • ¿Quién soy?⁃ Argentino viviendo en Estados Unidos desde 1999⁃ Desarrollador PHP & Symfony⁃ Fundador de la primera lista de discusión de PHPde habla hispana⁃ Socio fundador de ServerGrove⁃ Amante de la parrillaMonday, June 24, 13
  • Monday, June 24, 13
  • Monday, June 24, 13
  • ⁃ Fundada en 2005⁃ Proveedor de servicios de hosting especializado en PHP,Symfony, ZendFramework, y otros⁃ Servidores en Europa y Estados UnidosServerGrove!Monday, June 24, 13
  • ⁃ Muy activos en la comunidad de Open Sourcecontribuyendo con código o patrocinando eventos ygrupos de usuariosLa comunidad es nuestra guiaMonday, June 24, 13
  • En el comienzo teniamos HTML...Monday, June 24, 13
  • Monday, June 24, 13
  • Luego vino JavaScriptMonday, June 24, 13
  • Luego vino JavaScripty no era ‘cool’...Monday, June 24, 13
  • Pero era algo serio!Monday, June 24, 13
  • Pero era algo serio!Monday, June 24, 13
  • Pero era algo serio!Monday, June 24, 13
  • Usos muy importantesMonday, June 24, 13
  • Rollovers!Monday, June 24, 13
  • http://joemaller.com/javascript/simpleroll/simpleroll_example.htmlRollovers!Monday, June 24, 13
  • Monday, June 24, 13
  • Y luego vino AJAX...Monday, June 24, 13
  • AJAX salvó a Internet!Monday, June 24, 13
  • 2004 - 2006Monday, June 24, 13
  • Monday, June 24, 13
  • Nueva generación deFrameworks JavaScriptMonday, June 24, 13
  • Monday, June 24, 13
  • Introducción a•100% JavaScript•MVC•Con fuerte opinión•Modular & Extensible•Servicios & Injección de Dependencias•Simple pero poderosa maquetación•Data-binding en el cielo•Validación de Ingreso de Datos•Animaciones! (nuevo)•Testeable•Muchas cosas más...Monday, June 24, 13
  • •Aplicaciones de una página•Dinámicas & Receptivas•Interactivas & en tiempo real•Interfaz de usuario rica & amigable•I18n & L10n•Multi-plataforma•Escritorio/Móvil•Animaciones•Control con comandos de voz¿ Qué podemos hacer?Introducción aMonday, June 24, 13
  • <!doctype html><html ng-app><head><script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.6/angular.min.js"></script></head><body><div><label>Nombre:</label><input type="text" ng-model="nombre" placeholder="Ingresesu nombre"><hr><h1>Hola {{nombre}}!</h1></div></body></html>PlantillasMonday, June 24, 13
  • Plantillas &Directivas<!doctype html><html ng-app><head><script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.6/angular.min.js"></script></head><body><div><label>Nombre:</label><input type="text" ng-model="nombre" placeholder="Ingresesu nombre"><hr><h1>Hola {{nombre}}!</h1></div></body></html>Monday, June 24, 13
  • •ng-app•ng-controller•ng-model•ng-bind•ng-repeat•ng-show & ng-hide•tus propias directivas•y muchas más!http://docs.angularjs.org/api/ngDirectivasMonday, June 24, 13
  • ng-app<html>...<body>...<div ng-app>...</div>Inicia la aplicación y define la raíz. Puede haber uno solo pordocumento HTML.<html>...<body ng-app>...<html ng-app>...DirectivasMonday, June 24, 13
  • ng-controller<html ng-app><body><div ng-controller=”PruebaController”>Hola {{nombre}}</div><script>function PruebaController($scope) {$scope.nombre = ‘Pablo’;}</script></body></html>Define el controlador (función) relacionada con la vista.DirectivasMonday, June 24, 13
  • ng-model<html ng-app><body><div><input type=”text” ng-model=”nombre” /><input type=”textarea” ng-model=”notas” /><input type=”checkbox” ng-model=”notificacion” /></div></body></html>Define ‘data binding’ de ida/vuelta con input, select, textarea.DirectivasMonday, June 24, 13
  • ng-bind<html ng-app><body><div><div ng-bind=”nombre”></div>{{nombre}} <!- más acotado --></div></body></html>Reemplaza el contenido del elemento HTML con el valorindicado en la expresión, y actualiza el contenido cuando elvalor de la expresión cambia.DirectivasMonday, June 24, 13
  • ng-repeat<html ng-app><body><div><ul><li ng-repeat="item in items">{{$index}}: {{item.nombre}}</li></ul></div></body></html>Instancia una plantilla por item de una colección. Cadaplantilla tendrá su propio ‘scope’.DirectivasMonday, June 24, 13
  • ng-show & ng-hide<html ng-app><body><div>Aprétame: <input type="checkbox" ng-model="checked"><br/><span ng-show="checked">Sí!</span><span ng-hide="checked">Oculto.</span></div></body></html>Muestra/Oculta una porción del arbol del DOM (HTML)condicionalmente.DirectivasMonday, June 24, 13
  • Directivas propias<html ng-app><body><div>Formato de Fecha: <input ng-model="format"> <hr/>Hora actual es: <span my-current-time="format"></span></div></body></html>Puedes crear nuevas directivas para extender el HTML.Encanpsula resultados complejos en simples llamadas.DirectivasMonday, June 24, 13
  • $scopefunction SaludaCtrl($scope) {$scope.nombre = Mundo;} function ListaCtrl($scope) {$scope.nombres = [Igor, Misko, Vojta];$scope.pop = function() {$scope.nombres.pop();}}...<button ng-click=”pop()”>Sacar</button>El ‘scope’ mantiene el modelo de datos porcontrolador. Detecta cambios en el modelo paraactualizar la vista automáticamente.http://docs.angularjs.org/guide/scopeModeloMonday, June 24, 13
  • •Una conjunto de bloques de configuración y ejecuciónque son aplicados a la aplicación durante el procesode inicialización.•Código de terceros puede ser enpaquetado enmódulos y re-usados en varias aplicaciones•Módulos pueden listar otros módulos comodepencencias•Módulos son una forma de manejar la configuracióndel $injector•Una aplicación de AngularJS es un Módulohttp://docs.angularjs.org/guide/moduleMódulosMonday, June 24, 13
  • http://docs.angularjs.org/guide/module<html ng-app=”myApp”><body><div ng-controller=”AppCtrl”>Hola {{nombre}}</div></body></html>var app = angular.module(myApp, []);app.controller( AppCtrl, function($scope) {$scope.nombre = Juan;});MódulosMonday, June 24, 13
  • Los filtros transforman datos a una nueva forma.Pueden ser encadenados, y pueden recibirargumentos opcionales{{ expresion | filter }}{{ expresion | filter1 | filter2 }}123 | number:2miArray | orderBy:campo:trueFiltrosMonday, June 24, 13
  • angular.module(ReversibleModule, []).filter(reverso, function() {return function(entrada, capitalizar) {var salida = "";// ...return salida;}});Reverso: {{greeting|reverso}}<br>Reverso + capitalizado: {{greeting|reverso:true}}Creando FiltrosMonday, June 24, 13
  • $routeProvider.when("/sin_autenticacion",{controller:SinAutenticacionCtrl,templateUrl:"app/sin-autenticacion.html"}).when("/databases", {controller:DatabasesCtrl,templateUrl:"app/databases.html"}).when("/databases/agregar", {controller:AgregarDatabaseCtrl,templateUrl:"app/agregar-database.html"}).otherwise({redirectTo: /databases});Enrutamiento•http://example.org/#/sin_autenticacion•http://example.org/#/databases•http://example.org/#/databases/agregarMonday, June 24, 13
  • ServiciosServicios son ‘singletons’ que cumplen tareas específicas ycomunes en aplicaciones web. Angular provee una serie deservicios para operaciones comunes.•$location - parsea la URL de la dirección del navegador.Cambios en el $location son reflejados en la barra dedirección del navegador•$http - facilita la comunicación con servidores HTTP usandoel XMLHttpRequest del navegador o JSONP•$resource - permite interactuar con servidores RESTfulhttp://docs.angularjs.org/guide/dev_guide.servicesMonday, June 24, 13
  • +Monday, June 24, 13
  • • API REST• Silex + responsible-service-provider• Symfony2 + RestBundle• ZF2 + ZfrRest• WebSockets• React/Ratchet• node.js• AngularJS + Twig = Mola!• AngularJS + Assetic = Menor tamaño+Monday, June 24, 13
  • <div> {{nombre}} </div> <!-- usado por twig -->{% raw %}<div> {{nombre}} </div> <!-- usado por AngularJS -->{% endraw %}AngularJS + Twig - Evitando conflictos+// modulo de configuración de la aplicación$interpolateProvider.startSymbol([[).endSymbol(]])....<div> [[nombre]] </div> <!-- usado por AngularJS -->Monday, June 24, 13
  • // _users.html.twig<script type="text/ng-template" id="users.html">...</script>// _groups.html.twig<script type="text/ng-template" id="groups.html">...</script>// index.html.twig{% include _users.html.twig %}{% include _groups.html.twig %}AngularJS + Twig - Precargar plantillas+Monday, June 24, 13
  • {% javascripts"js/angular-modules/mod1.js""js/angular-modules/mod2.js""@AppBundle/Resources/public/js/controller/*.js"output="compiled/js/app.js"%}<script type="text/javascript" src="{{ asset_url }}"></script>{% endjavascripts %}AngularJS + Assetic - Combinar & minimizar+Monday, June 24, 13
  • Muéstrame el CODIGO!+Monday, June 24, 13
  • +Podisum http://github.com/pgodel/podisumgitDVR http://github.com/pgodel/gitdvrGenera resumenes de eventos de LogstashAplicación SilexPlantillas de TwigAPI RESTUI avanzada con AngularJSReproduce commits de gitMonday, June 24, 13
  • +PodisumApache access_log LogstashRedisPodisum redis-clientMongoDBPodisum Silex AppWeb ClientMonday, June 24, 13
  • •http://ngmodules.org/•http://angular-ui.github.io/•https://github.com/angular/angularjs-batarang•https://github.com/angular/angular-seed•https://github.com/angular-adaptive/adaptive-speech•Animaciones: http://bit.ly/Z4WD7X•Prueba las APIs REST con la extensión de Chrome ‘Postman’ExtrasMonday, June 24, 13
  • ¿Preguntas?+Monday, June 24, 13
  • ¡Muchas Gracias!Sugerencias! https://joind.in/8833Transparencias: http://slideshare.net/pgodelTwitter: @pgodelE-mail: pablo@servergrove.comMonday, June 24, 13