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

deSymfony 2013 - Creando aplicaciones web desde otro ángulo con Symfony y AngularJS
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 PHP de habla hispana ⁃ Socio fundador de ServerGrove ⁃ Amante de la parrilla Monday, 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 Unidos ServerGrove! Monday, June 24, 13
⁃ Muy activos en la comunidad de Open Source contribuyendo con código o patrocinando eventos y grupos de usuarios La comunidad es nuestra guia Monday, June 24, 13
En el comienzo teniamos HTML... Monday, June 24, 13
Monday, June 24, 13
Luego vino JavaScript Monday, June 24, 13
Luego vino JavaScript y no era ‘cool’... Monday, June 24, 13
Pero era algo serio! Monday, June 24, 13
Usos muy importantes Monday, June 24, 13
Rollovers! Monday, June 24, 13
http://joemaller.com/javascript/simpleroll/simpleroll_example.html Rollovers! 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 - 2006 Monday, June 24, 13
Monday, June 24, 13
Nueva generación de Frameworks JavaScript Monday, 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 a Monday, 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="Ingrese su nombre"> <hr> <h1>Hola {{nombre}}!</h1> </div> </body> </html> Plantillas Monday, 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="Ingrese su 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/ng Directivas Monday, June 24, 13
ng-app <html> ... <body> ... <div ng-app> ... </div> Inicia la aplicación y define la raíz. Puede haber uno solo por documento HTML. <html> ... <body ng-app> ... <html ng-app> ... Directivas Monday, 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. Directivas Monday, 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. Directivas Monday, 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 valor indicado en la expresión, y actualiza el contenido cuando el valor de la expresión cambia. Directivas Monday, 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. Cada plantilla tendrá su propio ‘scope’. Directivas Monday, 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. Directivas Monday, 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. Directivas Monday, June 24, 13
$scope function 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 por controlador. Detecta cambios en el modelo para actualizar la vista automáticamente. http://docs.angularjs.org/guide/scope Modelo Monday, June 24, 13
•Una conjunto de bloques de configuración y ejecución que son aplicados a la aplicación durante el proceso de inicialización. •Código de terceros puede ser enpaquetado en módulos y re-usados en varias aplicaciones •Módulos pueden listar otros módulos como depencencias •Módulos son una forma de manejar la configuración del $injector •Una aplicación de AngularJS es un Módulo http://docs.angularjs.org/guide/module Módulos Monday, 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ódulos Monday, June 24, 13
Los filtros transforman datos a una nueva forma. Pueden ser encadenados, y pueden recibir argumentos opcionales {{ expresion | filter }} {{ expresion | filter1 | filter2 }} 123 | number:2 miArray | orderBy:'campo':true Filtros Monday, 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 Filtros Monday, 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/agregar Monday, June 24, 13
Servicios Servicios son ‘singletons’ que cumplen tareas específicas y comunes en aplicaciones web. Angular provee una serie de servicios para operaciones comunes. •$location - parsea la URL de la dirección del navegador. Cambios en el $location son reflejados en la barra de dirección del navegador •$http - facilita la comunicación con servidores HTTP usando el XMLHttpRequest del navegador o JSONP •$resource - permite interactuar con servidores RESTful http://docs.angularjs.org/guide/dev_guide.services Monday, 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>  {% raw %} <div> {{nombre}} </div>  {% endraw %} AngularJS + Twig - Evitando conflictos + // modulo de configuración de la aplicación $interpolateProvider.startSymbol('[[').endSymbol(']]') .... <div> [[nombre]] </div>  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/podisum gitDVR http://github.com/pgodel/gitdvr Genera resumenes de eventos de Logstash Aplicación Silex Plantillas de Twig API REST UI avanzada con AngularJS Reproduce commits de git Monday, June 24, 13
+ Podisum Apache access_log Logstash Redis Podisum redis-client MongoDB Podisum Silex App Web Client Monday, 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’ Extras Monday, June 24, 13
¿Preguntas? + Monday, June 24, 13
¡Muchas Gracias! Sugerencias! https://joind.in/8833 Transparencias: http://slideshare.net/pgodel Twitter: @pgodel E-mail: pablo@servergrove.com Monday, June 24, 13

Check these out next

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

Recommended

More Related Content

Slideshows for you(20)

Similar to deSymfony 2013 - Creando aplicaciones web desde otro ángulo con Symfony y AngularJS(20)

More from Pablo Godel(20)

Recently uploaded(20)

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