deSymfony 2013 - Creando aplicaciones web desde otro ángulo con Symfony y AngularJS
11 recomendaciones15,453 vistas
El documento es una presentación sobre el desarrollo web y el uso de AngularJS por un argentino que vive en Estados Unidos. Se describe su trayectoria como desarrollador y fundador de ServerGrove, así como sus contribuciones a la comunidad de código abierto. El contenido incluye características clave de AngularJS, ejemplos de código, y la integración de tecnología como APIs REST y herramientas como Twig.
![$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](https://image.slidesharecdn.com/desymfony2013-creaciondeaplicacioneswebdesdeotroanguloconsymfonyyangularjs-130621060935-phpapp02/85/deSymfony-2013-Creando-aplicaciones-web-desde-otro-angulo-con-Symfony-y-AngularJS-37-320.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](https://image.slidesharecdn.com/desymfony2013-creaciondeaplicacioneswebdesdeotroanguloconsymfonyyangularjs-130621060935-phpapp02/85/deSymfony-2013-Creando-aplicaciones-web-desde-otro-angulo-con-Symfony-y-AngularJS-39-320.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](https://image.slidesharecdn.com/desymfony2013-creaciondeaplicacioneswebdesdeotroanguloconsymfonyyangularjs-130621060935-phpapp02/85/deSymfony-2013-Creando-aplicaciones-web-desde-otro-angulo-con-Symfony-y-AngularJS-41-320.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](https://image.slidesharecdn.com/desymfony2013-creaciondeaplicacioneswebdesdeotroanguloconsymfonyyangularjs-130621060935-phpapp02/85/deSymfony-2013-Creando-aplicaciones-web-desde-otro-angulo-con-Symfony-y-AngularJS-46-320.jpg)
deSymfony 2013 - Creando aplicaciones web desde otro ángulo con Symfony y AngularJS
- 1. Monday, June 24, 13
- 2. Monday, June 24, 13
- 3. ¿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
- 4. Monday, June 24, 13
- 5. Monday, June 24, 13
- 6. ⁃ 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
- 7. ⁃ 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
- 8. En el comienzo teniamos HTML... Monday, June 24, 13
- 9. Monday, June 24, 13
- 10. Luego vino JavaScript Monday, June 24, 13
- 11. Luego vino JavaScript y no era ‘cool’... Monday, June 24, 13
- 12. Pero era algo serio! Monday, June 24, 13
- 13. Pero era algo serio! Monday, June 24, 13
- 14. Pero era algo serio! Monday, June 24, 13
- 15. Usos muy importantes Monday, June 24, 13
- 16. Rollovers! Monday, June 24, 13
- 18. Monday, June 24, 13
- 19. Y luego vino AJAX... Monday, June 24, 13
- 20. AJAX salvó a Internet! Monday, June 24, 13
- 21. 2004 - 2006 Monday, June 24, 13
- 22. Monday, June 24, 13
- 23. Nueva generación de Frameworks JavaScript Monday, June 24, 13
- 24. Monday, June 24, 13
- 25. 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
- 26. •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
- 27. <!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
- 28. 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
- 29. •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
- 30. 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
- 31. 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
- 32. 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
- 33. 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
- 34. 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
- 35. 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
- 36. 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
- 37. $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
- 38. •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
- 39. 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
- 40. 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
- 41. 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
- 42. $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
- 43. 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
- 44. + Monday, June 24, 13
- 45. • 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
- 46. <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
- 47. // _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
- 48. {% 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
- 49. Muéstrame el CODIGO! + Monday, June 24, 13
- 50. + 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
- 51. + Podisum Apache access_log Logstash Redis Podisum redis-client MongoDB Podisum Silex App Web Client Monday, June 24, 13
- 52. •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
- 54. ¡Muchas Gracias! Sugerencias! https://joind.in/8833 Transparencias: http://slideshare.net/pgodel Twitter: @pgodel E-mail: [email protected] Monday, June 24, 13