Your SlideShare is downloading. ×
0
Errores Comunes, Introducción Angular
Javascript + Angular
Sesion 2
Sergio Castillo Yrizales
@scyrizales
Agenda
2
 Errores Comunes
 Introducción a Angular
Errores Comunes
En Javascript
3
Estas usando variables globales
4
 Evitar colisiones
 Cambiar de: A esto:
 Siempre usar la palabra clave “var”
No estas usando punto y coma
5
 Principalmente por razones de compresión.
 Un caso especial es el siguiente:
 Lo correc...
Estas usando ==
6
 Prueben esto:
 Y esto tambien es “true”
 El compilador de javascript
hace las conversiones
necesaria...
Estas usando Type Wrapper
Objects
7
 No uses esto
 Usa Esto
 El compilador usa esos
métodos especiales
internamente, no...
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...
No estas usando la base con
parseInt
9
 parseInt nos permite convertir una cadena en
número:
 ¿Qué paso? El compilador c...
No estas usando { }
10
 Cuando trabajas con bucles o condicionales
puedes hacer esto:
 Pero te puedes confundir luego, c...
Usa Array.join para construir html
11
 Agregar código html a la página siempre es
necesario
 Usemos un arreglo para arma...
No pensaste que el CDN fallaria
12
 Content Delivery Network (Google, Microsoft,
etc.)
 No siempre va a estar disponible...
No todo esta escrito en piedra
13
 Algunas recomendaciones
se pueden romper
 Otras no
 Recuerda que Javascript es
un le...
Introducción a Angular
14
Single Page Apps
15
 Aplicaciones que no vuelven a refrescar toda la
página
 Pensadas para interacciones complejas
 Max...
Single Page Apps (SPA)
16
 Aplicaciones que no vuelven a refrescar toda la
página
 Pensadas para interacciones complejas...
Construyendolas tu mismo
17
Usando un framework
18
SPA Powers
19
¿Por qué Angular?
20
 HTML es genial para webs estáticas.
 Las aplicaciones reales son dinámicas
 Angular le enseña nue...
Single Page Application (SPA)
21
View View
ViewView
The challenge with SPAs
22
DOM Manipulation
Routing
Data Binding
History
Caching
Ajax/Promises
Module Loading
Object Model...
23
24
Ejemplos
25
 Hola Mundo
 http://jsfiddle.net/scyrizales/4ULsf/
 Todo App
 http://jsfiddle.net/scyrizales/2kYNr/
 Serv...
Ejercicio
26
 Hagamos un menú simple
 http://jsfiddle.net/scyrizales/4VLLc/embedded/result/
Muchas gracias
Y que esta luz os ilumine donde las otras no puedan…
27
Upcoming SlideShare
Loading in...5
×

Javascript + Angular Sesion 2

501

Published on

Parte 2 de 6 del curso de Javascript + Angular.

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
501
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
41
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Transcript of "Javascript + Angular Sesion 2"

  1. 1. Errores Comunes, Introducción Angular Javascript + Angular Sesion 2 Sergio Castillo Yrizales @scyrizales
  2. 2. Agenda 2  Errores Comunes  Introducción a Angular
  3. 3. Errores Comunes En Javascript 3
  4. 4. Estas usando variables globales 4  Evitar colisiones  Cambiar de: A esto:  Siempre usar la palabra clave “var”
  5. 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. 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. 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. 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. 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. 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. 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. 12. No pensaste que el CDN fallaria 12  Content Delivery Network (Google, Microsoft, etc.)  No siempre va a estar disponible (99%)
  13. 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. 14. Introducción a Angular 14
  15. 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. 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. 17. Construyendolas tu mismo 17
  18. 18. Usando un framework 18
  19. 19. SPA Powers 19
  20. 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. 21. Single Page Application (SPA) 21 View View ViewView
  22. 22. The challenge with SPAs 22 DOM Manipulation Routing Data Binding History Caching Ajax/Promises Module Loading Object Modeling View Loading
  23. 23. 23
  24. 24. 24
  25. 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. 26. Ejercicio 26  Hagamos un menú simple  http://jsfiddle.net/scyrizales/4VLLc/embedded/result/
  27. 27. Muchas gracias Y que esta luz os ilumine donde las otras no puedan… 27
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×