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

¿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

⁃ 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

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

Y luego vino AJAX...
Monday, June 24, 13

AJAX salvó a Internet!
Monday, June 24, 13

2004 - 2006
Monday, June 24, 13

Nueva generación de
Frameworks JavaScript
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 conﬁguració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 conﬁguració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 reﬂejados 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

• 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 conﬂictos
+
// 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

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

Recomendados

Recomendados

Más contenido relacionado

La actualidad más candente

La actualidad más candente (20)

Destacado

Destacado (20)

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

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

Más de Pablo Godel

Más de Pablo Godel (20)

Último

Último (20)

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