Taller de AngularJS

Taller dictado en la universidad Católica Andrés Bello de Guayana, para introducir el framework AngularJS.

Transcript

2. Single Page App
3. Single Page App Aplicación web que se ejecuta en una única página.
4. SPA vs Tradicional
5. ¿Qué es AngularJS? • Framework MVC para aplicaciones web dinámicas. • Extiende el lenguaje HTML. • Ofrece data binding. • Utiliza inyección de dependencias. • Es una solución completa para SPAs. • De código abierto.
6. AngularJS es lo que HTML sería si hubiera sido creado para aplicaciones
7. ¿Por qué usar AngularJS? Un ejemplo sencillo para mostrar las diferencias: • Vanilla javascript: http://jsbin.com/guzaz/1/edit • JQuery: http://jsbin.com/sibul/1/edit • AngularJS: http://jsbin.com/fesef/1/edit
8. ¿Cuándo es ideal usar AngularJS? • SPAs como Gmail, Google Docs, Twitter, Facebook. • Aplicaciones con muchos CRUDs. • Separación entre frontend y backend. • No es adecuada para desarrollo de juegos ni uso intensivo del DOM.
9. ¡Chevere! Pero... ¿Cómo echamos código con AngularJS?
10. Directivas Para entender las directivas podemos usar analogías… • <ul><li>...</li></ul> • <video> • <audio>
11. Directivas Para entender las directivas podemos usar analogías… • <ul><li>...</li></ul> • <video> • <audio> • <weather>??? • <tab>??? • <login>??? Las directivas nos dan el poder de crear nuestros propios elementos HTML
12. Directivas Una directiva es simplemente una función que ejecutamos sobre un elemento DOM para agregarle una funcionalidad
13. Directivas <form ng-submit="login()"> <input type="email" ng-model="login.email" ng-required="true"/> <input type="password" ng-model="login.password" ng-required="true"/> <button type="submit" ng-click="validateData()">Entrar</button> </form> Existen muchas directivas propias de Angular https://docs.angularjs.org/api
14. <div ng-init="count = 0"> <a ng-click="count = count + 1">Agrega uno</a> <h3>El doble de la cuenta es: {{ 2 * count }}</h3> </div> Expresiones en directivas Cuando usamos directivas también podemos pasarle argumentos, al igual que una función. http://jsbin.com/zetud/1/edit
15. ¡Ahora sí! Vamos a construir una SPA
16. Catálogo de celulares Vamos a desarrollar un catálogo de celulares con carrito de compra. • Lista de celulares • Detalle de un celular • Búsqueda • Compra
17. Empezamos con ng-app Toda aplicación que use angular debe tener la directiva ng-app. La directiva define el alcance en el DOM de nuestra aplicación. http://jsbin.com/jowezu/14/edit
18. Módulos Los módulos permiten agrupar o mantener una colección de objectos angular que definen varias funcionalidades relacionadas en la app. Tiene dos operaciones principales: • Setter: angular.module('myApp', []); • Getter: angular.module('myApp');
19. Módulos Junto a ng-app podemos definir el módulo “principal” de nuestra aplicación. var app = angular.module('cellsApp', []);
20. Scopes y Data Binding AngularJS usa los scopes para la comunicación entre componentes, particularmente entre nuestro javascript y el HTML. var app = angular.module('cellsApp', []) .run(function($rootScope) { $rootScope.user = { name: 'ucabistas' }; });
21. Scopes y Data Binding En una aplicación angular existen muchos scopes. Sin embargo, $rootScope se mantiene en el nivel superior de todos. $rootScope $scope(Controlador A) $scope(Controlador B) $scope(ng-repeat de vinos)
22. Scopes y Data Binding Los scopes son objetos javascript igual como cualquier otro en tu código. También conocidos como plain old javascript object (POJO) En resumen: scopes son una manera de organizar pares de clave-valor sin contaminar el espacio de variables globales (global namespace)
23. AngularJS y MVC
24. Controladores Angular usa el concepto de controladores para organizar funcionalidades a través de un grupo de elementos del DOM. Cada vez que definimos un controlador, angular crea un nuevo $scope debajo del scope padre donde se usa el controlador.
25. Controladores angular.module('cellsApp') .controller('CellListCtrl', function($scope) { // Tenemos acceso a un nuevo // $scope donde podemos colocar // la data para interactuar }); <div ng-controller="CellListCtrl"> <!-- Aquí tenemos acceso al objeto $scope definido en el controlador CellListCtrl --> </div> http://jsbin.com/jowezu/13/edit
26. Controladores El controlador junto al scope y la vista en HTML forman el patrón MVC en AngularJS. Scope HTML Controlador
27. Controladores { "age": 6, "carrier": "Best Buy", "id": "nexus-s", "imageUrl": "img/phones/nexus-s.0.jpg", "name": "Nexus S", "snippet": "Fast just got faster with Nexus S. A pure Google experience, Nexus S is the first phone to run Gingerbread (Android 2.3), the fastest version of Android yet." } http://jsbin.com/jowezu/15/edit
28. AJAX y comunicación con backend
29. $http, XHR y promesas El servicio $http permite hacer llamadas AJAX al servidor $http({ method: 'GET', url: 'http://foo.com/v1/api', params: { api_key: 'abc' } });
30. $http, XHR y promesas Como AJAX lo define, cada llamada es asíncrona. Para retomar la ejecución del código tenemos dos opciones: • Pasar una función callback • Usar una promesa Las promesas son objetos que ayudan a trabajar con código asíncrono.
31. $http, XHR y promesas Principalmente usamos tres métodos en las promesas: promise .then(function(data) { // Called when no errors have occurred with data }) .catch(function(err) { // Called when an error has occurred }) .finally(function(data) { // Called always, regardless of the output result })
32. $http, XHR y promesas El servicio $http retorna un objeto de tipo promesa var promise = $http({ method: 'GET', url: '/v1/api' }); promise.then(function(obj) { $scope.data = obj.data; });