Parte 2 de 6 del curso de Javascript + Angular.

1. Errores Comunes, Introducción Angular
Javascript + Angular
Sesion 2
Sergio Castillo Yrizales
@scyrizales

2. Agenda
2
 Errores Comunes
 Introducción a Angular

3. Errores Comunes
En Javascript
3

4. Estas usando variables globales
4
 Evitar colisiones
 Cambiar de: A esto:
 Siempre usar la palabra clave “var”

5. No estas usando punto y coma
5
 Principalmente por razones de compresión.
 Un caso especial es el siguiente:
 Lo correcto deberia ser:

6. Estas usando ==
6
 Prueben esto:
 Y esto tambien es “true”
 El compilador de javascript
hace las conversiones
necesarias para que el “==”
funcione de manera
adecuada.

7. Estas usando Type Wrapper
Objects
7
 No uses esto
 Usa Esto
 El compilador usa esos
métodos especiales
internamente, no están
hechos para nosotros

8. No uses with, casi no uses eval
8
 With te puede ocasionar conflictos de ámbito
 Eval hace lento tu código y lo hace más
hackeable.

9. No estas usando la base con
parseInt
9
 parseInt nos permite convertir una cadena en
número:
 ¿Qué paso? El compilador creyo que estabas en
base 8…
 Olvidarse no deben.

10. No estas usando { }
10
 Cuando trabajas con bucles o condicionales
puedes hacer esto:
 Pero te puedes confundir luego, como aqui:
 Además recuerda la compresión.

11. Usa Array.join para construir html
11
 Agregar código html a la página siempre es
necesario
 Usemos un arreglo para armar el código.
 Ejemplo: http://jsfiddle.net/scyrizales/8J9zk/

12. No pensaste que el CDN fallaria
12
 Content Delivery Network (Google, Microsoft,
etc.)
 No siempre va a estar disponible (99%)

13. No todo esta escrito en piedra
13
 Algunas recomendaciones
se pueden romper
 Otras no
 Recuerda que Javascript es
un lenguaje muy flexible
 Aprende las pocas
funciones que tiene (W3C)
 Google it

14. Introducción a Angular
14

15. Single Page Apps
15
 Aplicaciones que no vuelven a refrescar toda la
página
 Pensadas para interacciones complejas
 Maximizar la experiencia de usuario

16. Single Page Apps (SPA)
16
 Aplicaciones que no vuelven a refrescar toda la
página
 Pensadas para interacciones complejas
 Maximizar la experiencia de usuario

17. Construyendolas tu mismo
17

18. Usando un framework
18

19. SPA Powers
19

20. ¿Por qué Angular?
20
 HTML es genial para webs estáticas.
 Las aplicaciones reales son dinámicas
 Angular le enseña nuevos trucos a tu viejo HTML
 Controla muchos aspectos necesarios para
construir SPA’s

21. Single Page Application (SPA)
21
View View
ViewView

22. The challenge with SPAs
22
DOM Manipulation
Routing
Data Binding
History
Caching
Ajax/Promises
Module Loading
Object Modeling
View Loading

23. 23

24. 24

25. Ejemplos
25
 Hola Mundo
 http://jsfiddle.net/scyrizales/4ULsf/
 Todo App
 http://jsfiddle.net/scyrizales/2kYNr/
 Servicio Externo (angularFire)
 http://jsfiddle.net/scyrizales/hm72F/

26. Ejercicio
26
 Hagamos un menú simple
 http://jsfiddle.net/scyrizales/4VLLc/embedded/result/

27. Muchas gracias
Y que esta luz os ilumine donde las otras no puedan…
27