deSymfony 2013 - Creando aplicaciones web desde otro ángulo con Symfony y AngularJS
-
Upload
pablo-godel -
Category
Technology
-
view
6.841 -
download
8
description
Transcript of deSymfony 2013 - Creando aplicaciones web desde otro ángulo con Symfony y AngularJS
![Page 1: deSymfony 2013 - Creando aplicaciones web desde otro ángulo con Symfony y AngularJS](https://reader034.fdocuments.ec/reader034/viewer/2022052310/548209645806b5e8048b45f9/html5/thumbnails/1.jpg)
Monday, June 24, 13
![Page 2: deSymfony 2013 - Creando aplicaciones web desde otro ángulo con Symfony y AngularJS](https://reader034.fdocuments.ec/reader034/viewer/2022052310/548209645806b5e8048b45f9/html5/thumbnails/2.jpg)
Monday, June 24, 13
![Page 3: deSymfony 2013 - Creando aplicaciones web desde otro ángulo con Symfony y AngularJS](https://reader034.fdocuments.ec/reader034/viewer/2022052310/548209645806b5e8048b45f9/html5/thumbnails/3.jpg)
¿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
![Page 4: deSymfony 2013 - Creando aplicaciones web desde otro ángulo con Symfony y AngularJS](https://reader034.fdocuments.ec/reader034/viewer/2022052310/548209645806b5e8048b45f9/html5/thumbnails/4.jpg)
Monday, June 24, 13
![Page 5: deSymfony 2013 - Creando aplicaciones web desde otro ángulo con Symfony y AngularJS](https://reader034.fdocuments.ec/reader034/viewer/2022052310/548209645806b5e8048b45f9/html5/thumbnails/5.jpg)
Monday, June 24, 13
![Page 6: deSymfony 2013 - Creando aplicaciones web desde otro ángulo con Symfony y AngularJS](https://reader034.fdocuments.ec/reader034/viewer/2022052310/548209645806b5e8048b45f9/html5/thumbnails/6.jpg)
⁃ 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
![Page 7: deSymfony 2013 - Creando aplicaciones web desde otro ángulo con Symfony y AngularJS](https://reader034.fdocuments.ec/reader034/viewer/2022052310/548209645806b5e8048b45f9/html5/thumbnails/7.jpg)
⁃ 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
![Page 8: deSymfony 2013 - Creando aplicaciones web desde otro ángulo con Symfony y AngularJS](https://reader034.fdocuments.ec/reader034/viewer/2022052310/548209645806b5e8048b45f9/html5/thumbnails/8.jpg)
En el comienzo teniamos HTML...
Monday, June 24, 13
![Page 9: deSymfony 2013 - Creando aplicaciones web desde otro ángulo con Symfony y AngularJS](https://reader034.fdocuments.ec/reader034/viewer/2022052310/548209645806b5e8048b45f9/html5/thumbnails/9.jpg)
Monday, June 24, 13
![Page 10: deSymfony 2013 - Creando aplicaciones web desde otro ángulo con Symfony y AngularJS](https://reader034.fdocuments.ec/reader034/viewer/2022052310/548209645806b5e8048b45f9/html5/thumbnails/10.jpg)
Luego vino JavaScript
Monday, June 24, 13
![Page 11: deSymfony 2013 - Creando aplicaciones web desde otro ángulo con Symfony y AngularJS](https://reader034.fdocuments.ec/reader034/viewer/2022052310/548209645806b5e8048b45f9/html5/thumbnails/11.jpg)
Luego vino JavaScripty no era ‘cool’...
Monday, June 24, 13
![Page 12: deSymfony 2013 - Creando aplicaciones web desde otro ángulo con Symfony y AngularJS](https://reader034.fdocuments.ec/reader034/viewer/2022052310/548209645806b5e8048b45f9/html5/thumbnails/12.jpg)
Pero era algo serio!
Monday, June 24, 13
![Page 13: deSymfony 2013 - Creando aplicaciones web desde otro ángulo con Symfony y AngularJS](https://reader034.fdocuments.ec/reader034/viewer/2022052310/548209645806b5e8048b45f9/html5/thumbnails/13.jpg)
Pero era algo serio!
Monday, June 24, 13
![Page 14: deSymfony 2013 - Creando aplicaciones web desde otro ángulo con Symfony y AngularJS](https://reader034.fdocuments.ec/reader034/viewer/2022052310/548209645806b5e8048b45f9/html5/thumbnails/14.jpg)
Pero era algo serio!
Monday, June 24, 13
![Page 15: deSymfony 2013 - Creando aplicaciones web desde otro ángulo con Symfony y AngularJS](https://reader034.fdocuments.ec/reader034/viewer/2022052310/548209645806b5e8048b45f9/html5/thumbnails/15.jpg)
Usos muy importantes
Monday, June 24, 13
![Page 16: deSymfony 2013 - Creando aplicaciones web desde otro ángulo con Symfony y AngularJS](https://reader034.fdocuments.ec/reader034/viewer/2022052310/548209645806b5e8048b45f9/html5/thumbnails/16.jpg)
Rollovers!
Monday, June 24, 13
![Page 17: deSymfony 2013 - Creando aplicaciones web desde otro ángulo con Symfony y AngularJS](https://reader034.fdocuments.ec/reader034/viewer/2022052310/548209645806b5e8048b45f9/html5/thumbnails/17.jpg)
http://joemaller.com/javascript/simpleroll/simpleroll_example.html
Rollovers!
Monday, June 24, 13
![Page 18: deSymfony 2013 - Creando aplicaciones web desde otro ángulo con Symfony y AngularJS](https://reader034.fdocuments.ec/reader034/viewer/2022052310/548209645806b5e8048b45f9/html5/thumbnails/18.jpg)
Monday, June 24, 13
![Page 19: deSymfony 2013 - Creando aplicaciones web desde otro ángulo con Symfony y AngularJS](https://reader034.fdocuments.ec/reader034/viewer/2022052310/548209645806b5e8048b45f9/html5/thumbnails/19.jpg)
Y luego vino AJAX...
Monday, June 24, 13
![Page 20: deSymfony 2013 - Creando aplicaciones web desde otro ángulo con Symfony y AngularJS](https://reader034.fdocuments.ec/reader034/viewer/2022052310/548209645806b5e8048b45f9/html5/thumbnails/20.jpg)
AJAX salvó a Internet!
Monday, June 24, 13
![Page 21: deSymfony 2013 - Creando aplicaciones web desde otro ángulo con Symfony y AngularJS](https://reader034.fdocuments.ec/reader034/viewer/2022052310/548209645806b5e8048b45f9/html5/thumbnails/21.jpg)
2004 - 2006
Monday, June 24, 13
![Page 22: deSymfony 2013 - Creando aplicaciones web desde otro ángulo con Symfony y AngularJS](https://reader034.fdocuments.ec/reader034/viewer/2022052310/548209645806b5e8048b45f9/html5/thumbnails/22.jpg)
Monday, June 24, 13
![Page 23: deSymfony 2013 - Creando aplicaciones web desde otro ángulo con Symfony y AngularJS](https://reader034.fdocuments.ec/reader034/viewer/2022052310/548209645806b5e8048b45f9/html5/thumbnails/23.jpg)
Nueva generación de Frameworks JavaScript
Monday, June 24, 13
![Page 24: deSymfony 2013 - Creando aplicaciones web desde otro ángulo con Symfony y AngularJS](https://reader034.fdocuments.ec/reader034/viewer/2022052310/548209645806b5e8048b45f9/html5/thumbnails/24.jpg)
Monday, June 24, 13
![Page 25: deSymfony 2013 - Creando aplicaciones web desde otro ángulo con Symfony y AngularJS](https://reader034.fdocuments.ec/reader034/viewer/2022052310/548209645806b5e8048b45f9/html5/thumbnails/25.jpg)
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
![Page 26: deSymfony 2013 - Creando aplicaciones web desde otro ángulo con Symfony y AngularJS](https://reader034.fdocuments.ec/reader034/viewer/2022052310/548209645806b5e8048b45f9/html5/thumbnails/26.jpg)
•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
![Page 27: deSymfony 2013 - Creando aplicaciones web desde otro ángulo con Symfony y AngularJS](https://reader034.fdocuments.ec/reader034/viewer/2022052310/548209645806b5e8048b45f9/html5/thumbnails/27.jpg)
<!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
![Page 28: deSymfony 2013 - Creando aplicaciones web desde otro ángulo con Symfony y AngularJS](https://reader034.fdocuments.ec/reader034/viewer/2022052310/548209645806b5e8048b45f9/html5/thumbnails/28.jpg)
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
![Page 29: deSymfony 2013 - Creando aplicaciones web desde otro ángulo con Symfony y AngularJS](https://reader034.fdocuments.ec/reader034/viewer/2022052310/548209645806b5e8048b45f9/html5/thumbnails/29.jpg)
•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
![Page 30: deSymfony 2013 - Creando aplicaciones web desde otro ángulo con Symfony y AngularJS](https://reader034.fdocuments.ec/reader034/viewer/2022052310/548209645806b5e8048b45f9/html5/thumbnails/30.jpg)
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
![Page 31: deSymfony 2013 - Creando aplicaciones web desde otro ángulo con Symfony y AngularJS](https://reader034.fdocuments.ec/reader034/viewer/2022052310/548209645806b5e8048b45f9/html5/thumbnails/31.jpg)
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
![Page 32: deSymfony 2013 - Creando aplicaciones web desde otro ángulo con Symfony y AngularJS](https://reader034.fdocuments.ec/reader034/viewer/2022052310/548209645806b5e8048b45f9/html5/thumbnails/32.jpg)
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
![Page 33: deSymfony 2013 - Creando aplicaciones web desde otro ángulo con Symfony y AngularJS](https://reader034.fdocuments.ec/reader034/viewer/2022052310/548209645806b5e8048b45f9/html5/thumbnails/33.jpg)
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
![Page 34: deSymfony 2013 - Creando aplicaciones web desde otro ángulo con Symfony y AngularJS](https://reader034.fdocuments.ec/reader034/viewer/2022052310/548209645806b5e8048b45f9/html5/thumbnails/34.jpg)
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
![Page 35: deSymfony 2013 - Creando aplicaciones web desde otro ángulo con Symfony y AngularJS](https://reader034.fdocuments.ec/reader034/viewer/2022052310/548209645806b5e8048b45f9/html5/thumbnails/35.jpg)
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
![Page 36: deSymfony 2013 - Creando aplicaciones web desde otro ángulo con Symfony y AngularJS](https://reader034.fdocuments.ec/reader034/viewer/2022052310/548209645806b5e8048b45f9/html5/thumbnails/36.jpg)
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
![Page 37: deSymfony 2013 - Creando aplicaciones web desde otro ángulo con Symfony y AngularJS](https://reader034.fdocuments.ec/reader034/viewer/2022052310/548209645806b5e8048b45f9/html5/thumbnails/37.jpg)
$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
![Page 38: deSymfony 2013 - Creando aplicaciones web desde otro ángulo con Symfony y AngularJS](https://reader034.fdocuments.ec/reader034/viewer/2022052310/548209645806b5e8048b45f9/html5/thumbnails/38.jpg)
•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
![Page 39: deSymfony 2013 - Creando aplicaciones web desde otro ángulo con Symfony y AngularJS](https://reader034.fdocuments.ec/reader034/viewer/2022052310/548209645806b5e8048b45f9/html5/thumbnails/39.jpg)
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
![Page 40: deSymfony 2013 - Creando aplicaciones web desde otro ángulo con Symfony y AngularJS](https://reader034.fdocuments.ec/reader034/viewer/2022052310/548209645806b5e8048b45f9/html5/thumbnails/40.jpg)
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
![Page 41: deSymfony 2013 - Creando aplicaciones web desde otro ángulo con Symfony y AngularJS](https://reader034.fdocuments.ec/reader034/viewer/2022052310/548209645806b5e8048b45f9/html5/thumbnails/41.jpg)
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
![Page 42: deSymfony 2013 - Creando aplicaciones web desde otro ángulo con Symfony y AngularJS](https://reader034.fdocuments.ec/reader034/viewer/2022052310/548209645806b5e8048b45f9/html5/thumbnails/42.jpg)
$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
![Page 43: deSymfony 2013 - Creando aplicaciones web desde otro ángulo con Symfony y AngularJS](https://reader034.fdocuments.ec/reader034/viewer/2022052310/548209645806b5e8048b45f9/html5/thumbnails/43.jpg)
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
![Page 44: deSymfony 2013 - Creando aplicaciones web desde otro ángulo con Symfony y AngularJS](https://reader034.fdocuments.ec/reader034/viewer/2022052310/548209645806b5e8048b45f9/html5/thumbnails/44.jpg)
+
Monday, June 24, 13
![Page 45: deSymfony 2013 - Creando aplicaciones web desde otro ángulo con Symfony y AngularJS](https://reader034.fdocuments.ec/reader034/viewer/2022052310/548209645806b5e8048b45f9/html5/thumbnails/45.jpg)
• 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
![Page 46: deSymfony 2013 - Creando aplicaciones web desde otro ángulo con Symfony y AngularJS](https://reader034.fdocuments.ec/reader034/viewer/2022052310/548209645806b5e8048b45f9/html5/thumbnails/46.jpg)
<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
![Page 47: deSymfony 2013 - Creando aplicaciones web desde otro ángulo con Symfony y AngularJS](https://reader034.fdocuments.ec/reader034/viewer/2022052310/548209645806b5e8048b45f9/html5/thumbnails/47.jpg)
// _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
![Page 48: deSymfony 2013 - Creando aplicaciones web desde otro ángulo con Symfony y AngularJS](https://reader034.fdocuments.ec/reader034/viewer/2022052310/548209645806b5e8048b45f9/html5/thumbnails/48.jpg)
{% 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
![Page 49: deSymfony 2013 - Creando aplicaciones web desde otro ángulo con Symfony y AngularJS](https://reader034.fdocuments.ec/reader034/viewer/2022052310/548209645806b5e8048b45f9/html5/thumbnails/49.jpg)
Muéstrame el CODIGO!
+
Monday, June 24, 13
![Page 50: deSymfony 2013 - Creando aplicaciones web desde otro ángulo con Symfony y AngularJS](https://reader034.fdocuments.ec/reader034/viewer/2022052310/548209645806b5e8048b45f9/html5/thumbnails/50.jpg)
+
Podisum http://github.com/pgodel/podisum
gitDVR http://github.com/pgodel/gitdvr
Genera resumenes de eventos de Logstash Aplicación SilexPlantillas de TwigAPI RESTUI avanzada con AngularJS
Reproduce commits de git
Monday, June 24, 13
![Page 51: deSymfony 2013 - Creando aplicaciones web desde otro ángulo con Symfony y AngularJS](https://reader034.fdocuments.ec/reader034/viewer/2022052310/548209645806b5e8048b45f9/html5/thumbnails/51.jpg)
+
Podisum
Apache access_log Logstash
Redis
Podisum redis-client
MongoDB
Podisum Silex App
Web Client
Monday, June 24, 13
![Page 52: deSymfony 2013 - Creando aplicaciones web desde otro ángulo con Symfony y AngularJS](https://reader034.fdocuments.ec/reader034/viewer/2022052310/548209645806b5e8048b45f9/html5/thumbnails/52.jpg)
•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
![Page 53: deSymfony 2013 - Creando aplicaciones web desde otro ángulo con Symfony y AngularJS](https://reader034.fdocuments.ec/reader034/viewer/2022052310/548209645806b5e8048b45f9/html5/thumbnails/53.jpg)
¿Preguntas?
+
Monday, June 24, 13
![Page 54: deSymfony 2013 - Creando aplicaciones web desde otro ángulo con Symfony y AngularJS](https://reader034.fdocuments.ec/reader034/viewer/2022052310/548209645806b5e8048b45f9/html5/thumbnails/54.jpg)
¡Muchas Gracias!
Sugerencias! https://joind.in/8833Transparencias: http://slideshare.net/pgodel
Twitter: @pgodelE-mail: [email protected]
Monday, June 24, 13