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.
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
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
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
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
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
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
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