Taller de AngularJS básico

Introducción a JavaScript y AngularJS

Transcript

1. Jacob Parra Marzo 2015 AngularJS Desarrollo frontend para webapps
2. about:me Jacob Parra - Desarrollador web independiente - Fullstack (backend y frontend) - Líder técnico en 3 emprendimientos @JacobParraG jacobparra.com
3. Estado actual del desarrollo web Diagrama cortesia de LearnCode.academy @JacobParraG
4. Re-introducción a JavaScript Basado en un artículo de MDN @JacobParraG
5. @JacobParraG - Number - String - Boolean - Function - Object - null - undefined Tipos en JavaScript
6. @JacobParraG - Number - String - Boolean - Function - Object - Symbol - null - undefined Tipos en JavaScript - Object - Function - Array - Date - RegExp
7. @JacobParraG - Number - String - Boolean - Function - Object - null - undefined Tipos en JavaScript
8. @JacobParraG - Son representados como valores de “double-precision” 0.1 + 0.2 == 0.30000000000000004 - Operaciones avanzadas y constantes con objeto Math Math.sin(3.5); var d = Math.PI * r * r; - Conversión de String a entero con parseInt() parseInt("123", 10); // 123 parseInt("010", 10); // 10 Numbers (JavaScript)
9. @JacobParraG - Existe un valor especial NaN “Not a Number” parseInt("hello", 10); // NaN - Se puede chequear el valor con isNaN() isNaN(NaN); // true - Por último está el valor Infinity 1 / 0; // Infinity -1 / 0; // -Infinity isFinite(1/0); // false isFinite(-Infinity); // false isFinite(NaN); // false Numbers (JavaScript)
10. @JacobParraG - Los Strings son cadenas de caracteres Unicode "hello".length; // 5 - Se pueden usar como objetos, tienen métodos "hello".charAt(0); // "h" "hello, world".replace("hello", "goodbye"); // "goodbye, world" "hello".toUpperCase(); // "HELLO" Strings (JavaScript)
11. @JacobParraG - Cualquier valor puede ser convertido/evaluado a Boolean - 0, string vacio (“”), NaN, null y undefined se convierten en false. - Todo otro valor se convierte en true. Boolean(""); // false Boolean(234); // true if (user.name) {...} Booleans (JavaScript)
12. @JacobParraG - El valor null es usado cuando deliberadamente se quiere indicar que no tiene valor. - undefined es usado para indicar valores sin inicializar. Otros tipos (JavaScript)
13. @JacobParraG var a; var name = "simon"; - El alcance de las variables son definidas por funciones y no por bloques. function () { if (...) { var i = 0; } console.log(i); } Variables (JavaScript)
14. @JacobParraG - Operadores numéricos: +, -, *, / y % - Asignación compuesta con += y -= x += 5 x = x + 5 "hello" + " world"; // "hello world" "3" + 4 + 5; // "345" 3 + 4 + "5"; // "75" Operadores (JavaScript)
15. @JacobParraG - Comparadores: <, >, <= y >= - La igualdad es un poco más complicada. - Doble igual (==) realiza “type coercion” "dog" == "dog"; // true 1 == true; // true - Para evitarlo se usa triple igual (===) 1 === true; // false true === true; // true - Adicionalmente existen != y !== Operadores (JavaScript)
16. @JacobParraG - Parecido a lenguajes de la familia C var name = "kittens"; if (name == "puppies") { name += "!"; } else if (name == "kittens") { name += "!!"; } else { name = "!" + name; } name == "kittens!!" Estructuras de control (JavaScript)
17. @JacobParraG while (true) { // an infinite loop! } var input; do { input = get_input(); } while (inputIsNotValid(input)) Estructuras de control (JavaScript)
18. @JacobParraG for (var i = 0; i < 5; i++) { // Will execute 5 times } - Ciclo for mejorado for (var i = lista.length - 1; i >= 0; i--) { ... } Estructuras de control (JavaScript)
19. @JacobParraG - Se pueden considerar como simples colecciones de pares clave-valor. - Son similares en otros lenguajes a: - Diccionarios en Python - Hashes en Ruby - HashMaps en Java - Arreglos asociativos en PHP - La clave siempres es un string, y el valor puede ser cualquier valor de JavaScript, incluyendo otro objeto. Objetos (JavaScript)
20. @JacobParraG - Objeto vacio: var obj = new Object(); var obj = {}; function Person(name, age) { this.name = name; this.age = age; } // Define an object var You = new Person("You", 24); // We are creating a new person named "you" // (that was the first parameter, and the age..) Objetos (JavaScript)
21. @JacobParraG function Person(name, age) { this.name = name; this.age = age; } // Define an object var You = new Person("You", 24); // We are creating a new person named "you" // (that was the first parameter, and the age..) Objetos (JavaScript)
22. @JacobParraG - Para acceder a las propiedades: obj.name = "Simon"; var name = obj.name; obj["name"] = "Simon"; var name = obj["name"]; Objetos (JavaScript)
23. @JacobParraG - Se puede inicializar con un objeto literal var obj = { name: "Carrot", "for": "Max", details: { color: "orange", size: 12 } } obj.details.color; // orange obj["details"]["size"]; // 12 Objetos (JavaScript)
24. - Para inicializar var a = new Array(); a[0] = "dog"; a[1] = "cat"; a[2] = "hen"; a.length; // 3 - Más conveniente: var a = ["dog", "cat", "hen"]; a.length; // 3 @JacobParraG Arreglos (JavaScript)
25. - La propiedad array.length no necesariamente es la longitud del arreglo. var a = ["dog", "cat", "hen"]; a[100] = "fox"; a.length; // 101 @JacobParraG Arreglos (JavaScript)
26. - Algunos métodos para manipular arreglos a.join(sep) a.pop() a.push(item1, ..., itemN) a.toString() @JacobParraG Arreglos (JavaScript)
27. - Son los componentes principales del lenguaje function add(x, y) { var total = x + y; return total; } var add = function (x, y) { vvar total = x + y; return total; } @JacobParraG Funciones (JavaScript)
28. - Esconder variables privadas con “closures” var a = 1; var b = 2; (function() { var b = 3; a += b; })(); a; // 4 b; // 2 @JacobParraG Funciones (JavaScript)
29. - Esconder variables privadas var a = 1; var b = 2; (function() { var b = 3; a += b; })(); a; // 4 b; // 2 @JacobParraG Funciones (JavaScript)
30. - Closures function makeAdder(a) { return function(b) { return a + b; }; } x = makeAdder(5); y = makeAdder(20); x(6); // ? y(7); // ? @JacobParraG Funciones (JavaScript)
31. JSON El formato más usado para servicios web
32. - Es una sintaxis para serializar objetos, arreglos, números, strings, booleanos y null. - Basada en la sintaxis por JavaScript, pero no todo JSON es JavaScript, y no todo JavaScript es JSON. @JacobParraG JSON
33. { "jason" : { "name" : "Jason Lengstorf", "age" : "24", "gender" : "male" }, "kyle" : { "name" : "Kyle Lengstorf", "age" : "21", "gender" : "male" } } @JacobParraG JSON
34. [{ "name" : "Jason", "age" : "24", "gender" : "male" }, { "name" : "Kyle", "age" : "21", "gender" : "male" }]; @JacobParraG JSON
35. Servicios RESTful Una manera sencilla de interactuar entre sistemas
36. - REST significa “Representational state transfer”. - Es un tipo de arquitectura para exponer servicios y recursos de sistemas informáticos. - No existe un estándar formal, pero sí convenciones y buenas prácticas. - Es la arquitectura por excelencia de muchos de los API actuales de grandes empresas. Twitter, Facebook, Instagram, etc. @JacobParraG Servicios RESTful
37. - Se apoya en los métodos ya establecidos de HTTP (GET, POST, PUT, DELETE). @JacobParraG Servicios RESTful Listar/Detallar Crear Actualizar Eliminar GET POST PUT DELETE
38. - Define URL’s para acceder a los recursos/datos - http://api.example.com/users/ - GET: listar todos los usuarios - POST: crear un nuevo usuario - http://api.example.com/users/298 - GET: detalles del usuario 298 - PUT: actualizar el usuario 298 - DELETE: eliminar el usuario 298 @JacobParraG Servicios RESTful
39. Single Page App
40. Single Page App Aplicación web que se ejecuta en una única página.
41. SPA vs Tradicional
42. ¿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.
43. AngularJS es lo que HTML sería si hubiera sido creado para aplicaciones
44. ¿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
45. ¿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.
46. ¡Chevere! Pero... ¿Cómo echamos código con AngularJS?
47. Directivas Para entender las directivas podemos usar analogías… • <ul><li>...</li></ul> • <video> • <audio>
48. 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
49. Directivas Una directiva es simplemente una función que ejecutamos sobre un elemento DOM para agregarle una funcionalidad
50. 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
51. <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
52. ¡Ahora sí! Vamos a construir una SPA
53. 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
54. 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
55. 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');
56. Módulos Junto a ng-app podemos definir el módulo “principal” de nuestra aplicación. var app = angular.module('cellsApp', []);
57. 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' }; });
58. 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)
59. 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)
60. AngularJS y MVC
61. 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.
62. 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
63. Controladores El controlador junto al scope y la vista en HTML forman el patrón MVC en AngularJS. Scope HTML Controlador
64. 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
65. AJAX y comunicación con backend
66. $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' } });
67. $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.
68. $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 })
69. $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; });