SlideShare una empresa de Scribd logo
1 de 18
AngularJS
Superheroic Javascript MVW Framework
Luis Felipe
Natividad Alejos
◇ Ingeniero de Software de la Universidad
Nacional Mayor de San Marcos.
◇ Jefe de Proyectos en Grupo El Comercio
(Orbis Ventures).
◇ Colaborador en Frontend Labs
(frontendlabs.io)
◇ @feluis23
AngularJS es un framework javascript del lado del
frontend mantenido por Google, nace en el 2009, pero
se hace popular a finales del 2012.
Framework MVW(Model-View-Whatever), donde
whatever nos indica “lo que nos sirva a cada uno”.
Hablemos de AngularJS
“
AngularJS extiende el HTML de tal
manera que podemos decir que le da
súper poderes, permitiéndonos crear
aplicaciones dinámicas, con mucha
interacción del usuario y altamente
escalables.
Two-Way data
binding
Inyección de dependencias
Este principio es muy usado por
AngularJS, y permite que se inyecten los
objetos o dependencias en vez que el
mismo módulo donde estamos trabajando
sea quien lo cree. Esto permite tener un
código desacoplado.
$scope
Scope es el ámbito donde interactúa
algun modulo o componente
definido por AngularJS
1
Módulos(module)
Los módulos son contenedores de
diferentes partes de nuestra
aplicación.
2
Controladores(controller)
Los controladores en AngularJS son
objetos que permiten desarrollar la
lógica de la aplicación, enlaza el
$scope con la vista y permite tener
un control total de los datos.
3
Directivas(directive)
Las directivas vienen a ser la forma
en que extendemos nuestro html,
permitiéndonos agregar una
porción de código hasta una
funcionalidad completa.
4
● ng-app
● ng-controller
● ng-model
● ng-view
● ng-click
● ng-init
● ng-repeat
● ng-change
● ng-hide
● ng-show … entre otros
Servicios(service) y
Fábricas(factory)
Los servicios y fábricas, son
módulos que permiten agrupar una
funcionalidad específica e
inyectarlos donde queramos.
5
Filtros(filter)
Los filtros son los encargados de
transformar los datos para luego
mostrarlos.
6
Para tener en
cuenta
◇ AngularJS es una solución completa, por lo cual
no se puede comparar con Jquery.
◇ Es un framework que está diseñado para ser
testeable fácilmente.
◇ Esta diseñado para desarrollar aplicaciones no
páginas web.
Vs. Otros
BackboneJS
Framework javascript
MVC, que permite
trabajar aplicaciones
pequeñas y medianas,
ligero y de muy baja
curva de aprendizaje.
Jquery y Underscore
EmberJS
Framework javascript
MVC, permite
desarrollar aplicaciones
single page de manera
ordenada y óptima.
Jquery y Handelbars.
ReactJS
No es un framework
javascript, es una
librería que ha tomado
mucha relevancia
últimamente en la
comunidad y permite
interfaces de usuarios
y no puede ser
comparado con
AngularJS.
AngularJS es genial!!!
Nos brinda un sin número de
herramientas, como routing, inyección de
dependencias, templates entre otros, que
hacen de este framework muy completo.
Ionic Framework
The beautiful, open source front-
end SDK for developing hybrid
mobile apps with HTML5.
Place your screenshot here
Aplicaciones que
usan AngularJS
Plunker
Thanks!
Preguntas?
Pueden ubicarme en:
◇ @feluis23
◇ luisnatividadalejos@gmail.com
◇ http://frontendlabs.io

Más contenido relacionado

La actualidad más candente

Taller de Angular JS: La solución tecnológica perfecta
Taller de Angular JS: La solución tecnológica perfectaTaller de Angular JS: La solución tecnológica perfecta
Taller de Angular JS: La solución tecnológica perfectaOpenExpoES
 
Introducciòn a AngularJS
Introducciòn a AngularJSIntroducciòn a AngularJS
Introducciòn a AngularJSRené Olivo
 
Curso Básico de AngularJS
Curso Básico de AngularJSCurso Básico de AngularJS
Curso Básico de AngularJSCarlos Azaustre
 
Introducción a AngularJS
Introducción a AngularJSIntroducción a AngularJS
Introducción a AngularJSAdrián Paredes
 
Hack2Progress - Desarrollando una aplicación web con AngularJS
Hack2Progress - Desarrollando una aplicación web con AngularJSHack2Progress - Desarrollando una aplicación web con AngularJS
Hack2Progress - Desarrollando una aplicación web con AngularJSCarlos Azaustre
 
Login social con node.js
Login social con node.jsLogin social con node.js
Login social con node.jsCarlos Azaustre
 
Angular 2 is Coming - GDG DevFest Cordoba 2015
Angular 2 is Coming - GDG DevFest Cordoba 2015Angular 2 is Coming - GDG DevFest Cordoba 2015
Angular 2 is Coming - GDG DevFest Cordoba 2015Carlos Azaustre
 
Webinar - Iniciación a React para desarrollo de interfaces de usuario
Webinar - Iniciación a React para desarrollo de interfaces de usuarioWebinar - Iniciación a React para desarrollo de interfaces de usuario
Webinar - Iniciación a React para desarrollo de interfaces de usuarioArsys
 
Webinar: Introducción a Angular
Webinar: Introducción a AngularWebinar: Introducción a Angular
Webinar: Introducción a AngularArsys
 
Curso de Desarrollo Web de Platzi
Curso de Desarrollo Web de PlatziCurso de Desarrollo Web de Platzi
Curso de Desarrollo Web de PlatziCarlos Azaustre
 
Curso de Responsive Design
Curso de Responsive DesignCurso de Responsive Design
Curso de Responsive DesignCarlos Azaustre
 
Introducción a Backbone
Introducción a BackboneIntroducción a Backbone
Introducción a BackboneOscar Gensollen
 

La actualidad más candente (20)

Taller de Angular JS: La solución tecnológica perfecta
Taller de Angular JS: La solución tecnológica perfectaTaller de Angular JS: La solución tecnológica perfecta
Taller de Angular JS: La solución tecnológica perfecta
 
Por qué AngularJS
Por qué AngularJSPor qué AngularJS
Por qué AngularJS
 
Angular js
Angular jsAngular js
Angular js
 
6.angular js
6.angular js6.angular js
6.angular js
 
Angularjs
AngularjsAngularjs
Angularjs
 
Angular js in mobile
Angular js in mobileAngular js in mobile
Angular js in mobile
 
Introducciòn a AngularJS
Introducciòn a AngularJSIntroducciòn a AngularJS
Introducciòn a AngularJS
 
Curso Básico de AngularJS
Curso Básico de AngularJSCurso Básico de AngularJS
Curso Básico de AngularJS
 
Introducción a AngularJS
Introducción a AngularJSIntroducción a AngularJS
Introducción a AngularJS
 
Hack2Progress - Desarrollando una aplicación web con AngularJS
Hack2Progress - Desarrollando una aplicación web con AngularJSHack2Progress - Desarrollando una aplicación web con AngularJS
Hack2Progress - Desarrollando una aplicación web con AngularJS
 
Advanced angular 1
Advanced angular 1Advanced angular 1
Advanced angular 1
 
Login social con node.js
Login social con node.jsLogin social con node.js
Login social con node.js
 
Angular 2 is Coming - GDG DevFest Cordoba 2015
Angular 2 is Coming - GDG DevFest Cordoba 2015Angular 2 is Coming - GDG DevFest Cordoba 2015
Angular 2 is Coming - GDG DevFest Cordoba 2015
 
Integrando AngularJS y drupal
Integrando AngularJS y drupalIntegrando AngularJS y drupal
Integrando AngularJS y drupal
 
Webinar - Iniciación a React para desarrollo de interfaces de usuario
Webinar - Iniciación a React para desarrollo de interfaces de usuarioWebinar - Iniciación a React para desarrollo de interfaces de usuario
Webinar - Iniciación a React para desarrollo de interfaces de usuario
 
Webinar: Introducción a Angular
Webinar: Introducción a AngularWebinar: Introducción a Angular
Webinar: Introducción a Angular
 
Curso de Desarrollo Web de Platzi
Curso de Desarrollo Web de PlatziCurso de Desarrollo Web de Platzi
Curso de Desarrollo Web de Platzi
 
Curso de Responsive Design
Curso de Responsive DesignCurso de Responsive Design
Curso de Responsive Design
 
Directivas en AngularJS
Directivas en AngularJSDirectivas en AngularJS
Directivas en AngularJS
 
Introducción a Backbone
Introducción a BackboneIntroducción a Backbone
Introducción a Backbone
 

Similar a Introducción a AngularJS

Frameworks y herramientas para la web del futuro
Frameworks y herramientas para la web del futuroFrameworks y herramientas para la web del futuro
Frameworks y herramientas para la web del futuroBBVA API Market
 
Trade-Off sobre Tecnologías Web
Trade-Off sobre Tecnologías WebTrade-Off sobre Tecnologías Web
Trade-Off sobre Tecnologías WebMiguel Angel Macias
 
003-Introduccion-Angular.pdf
003-Introduccion-Angular.pdf003-Introduccion-Angular.pdf
003-Introduccion-Angular.pdfDubiWeb.TK
 
Frameworks de Javascript Lema-Rosero
Frameworks de Javascript Lema-RoseroFrameworks de Javascript Lema-Rosero
Frameworks de Javascript Lema-RoseroDanielRosero23
 
APPSWEBI4.0.pptx
APPSWEBI4.0.pptxAPPSWEBI4.0.pptx
APPSWEBI4.0.pptx22040086
 
manual de jquery
manual de jquerymanual de jquery
manual de jqueryAngel Luna
 
Herramientas de desarrollo.pptx
Herramientas de desarrollo.pptxHerramientas de desarrollo.pptx
Herramientas de desarrollo.pptxNicolasCBarrantes
 
01.springframework.pptx
01.springframework.pptx01.springframework.pptx
01.springframework.pptxjohann
 
Como crear una app móvil con WordPress + Ionic
Como crear una app móvil con WordPress + IonicComo crear una app móvil con WordPress + Ionic
Como crear una app móvil con WordPress + IonicAntonio Torres
 
Programación Reactiva, Javascript Isomorfo y Meteorjs !
Programación Reactiva, Javascript Isomorfo y Meteorjs !Programación Reactiva, Javascript Isomorfo y Meteorjs !
Programación Reactiva, Javascript Isomorfo y Meteorjs !ouuyeah
 
Html5, Rest, JSON, Angular JS y Java EE 7 - Aplicaciones Web Modernas y Esca...
Html5, Rest, JSON, Angular JS y Java EE 7  - Aplicaciones Web Modernas y Esca...Html5, Rest, JSON, Angular JS y Java EE 7  - Aplicaciones Web Modernas y Esca...
Html5, Rest, JSON, Angular JS y Java EE 7 - Aplicaciones Web Modernas y Esca...Eudris Cabrera
 
Manual de jquery en pdf desarrollowebcom
Manual de jquery en pdf desarrollowebcomManual de jquery en pdf desarrollowebcom
Manual de jquery en pdf desarrollowebcomjo_ram
 
Presentacion taller de programacion
Presentacion taller de programacionPresentacion taller de programacion
Presentacion taller de programacionSaulSoto19
 
Implementacion de un portal web para la automatización del proceso de consult...
Implementacion de un portal web para la automatización del proceso de consult...Implementacion de un portal web para la automatización del proceso de consult...
Implementacion de un portal web para la automatización del proceso de consult...Renan Cayao
 
Microservicios, un nuevo enfoque para arquitecturas orientas a servicios.
Microservicios, un nuevo enfoque para arquitecturas orientas a servicios.Microservicios, un nuevo enfoque para arquitecturas orientas a servicios.
Microservicios, un nuevo enfoque para arquitecturas orientas a servicios.Jose Manuel Ortega Candel
 
Aplicaciones Web SPA con WebAPI y TypeScript
Aplicaciones Web SPA con WebAPI y TypeScriptAplicaciones Web SPA con WebAPI y TypeScript
Aplicaciones Web SPA con WebAPI y TypeScriptLuis Guerrero
 

Similar a Introducción a AngularJS (20)

Frameworks y herramientas para la web del futuro
Frameworks y herramientas para la web del futuroFrameworks y herramientas para la web del futuro
Frameworks y herramientas para la web del futuro
 
Trade-Off sobre Tecnologías Web
Trade-Off sobre Tecnologías WebTrade-Off sobre Tecnologías Web
Trade-Off sobre Tecnologías Web
 
003-Introduccion-Angular.pdf
003-Introduccion-Angular.pdf003-Introduccion-Angular.pdf
003-Introduccion-Angular.pdf
 
Frameworks de Javascript Lema-Rosero
Frameworks de Javascript Lema-RoseroFrameworks de Javascript Lema-Rosero
Frameworks de Javascript Lema-Rosero
 
APPSWEBI4.0.pptx
APPSWEBI4.0.pptxAPPSWEBI4.0.pptx
APPSWEBI4.0.pptx
 
Manual de jquery
Manual de jqueryManual de jquery
Manual de jquery
 
Jquery
JqueryJquery
Jquery
 
manual de jquery
manual de jquerymanual de jquery
manual de jquery
 
Herramientas de desarrollo.pptx
Herramientas de desarrollo.pptxHerramientas de desarrollo.pptx
Herramientas de desarrollo.pptx
 
01.springframework.pptx
01.springframework.pptx01.springframework.pptx
01.springframework.pptx
 
Spring framework
Spring frameworkSpring framework
Spring framework
 
Como crear una app móvil con WordPress + Ionic
Como crear una app móvil con WordPress + IonicComo crear una app móvil con WordPress + Ionic
Como crear una app móvil con WordPress + Ionic
 
Programación Reactiva, Javascript Isomorfo y Meteorjs !
Programación Reactiva, Javascript Isomorfo y Meteorjs !Programación Reactiva, Javascript Isomorfo y Meteorjs !
Programación Reactiva, Javascript Isomorfo y Meteorjs !
 
Html5, Rest, JSON, Angular JS y Java EE 7 - Aplicaciones Web Modernas y Esca...
Html5, Rest, JSON, Angular JS y Java EE 7  - Aplicaciones Web Modernas y Esca...Html5, Rest, JSON, Angular JS y Java EE 7  - Aplicaciones Web Modernas y Esca...
Html5, Rest, JSON, Angular JS y Java EE 7 - Aplicaciones Web Modernas y Esca...
 
Manual de jquery en pdf desarrollowebcom
Manual de jquery en pdf desarrollowebcomManual de jquery en pdf desarrollowebcom
Manual de jquery en pdf desarrollowebcom
 
Presentacion taller de programacion
Presentacion taller de programacionPresentacion taller de programacion
Presentacion taller de programacion
 
Implementacion de un portal web para la automatización del proceso de consult...
Implementacion de un portal web para la automatización del proceso de consult...Implementacion de un portal web para la automatización del proceso de consult...
Implementacion de un portal web para la automatización del proceso de consult...
 
Microservicios, un nuevo enfoque para arquitecturas orientas a servicios.
Microservicios, un nuevo enfoque para arquitecturas orientas a servicios.Microservicios, un nuevo enfoque para arquitecturas orientas a servicios.
Microservicios, un nuevo enfoque para arquitecturas orientas a servicios.
 
Aplicaciones Web SPA con WebAPI y TypeScript
Aplicaciones Web SPA con WebAPI y TypeScriptAplicaciones Web SPA con WebAPI y TypeScript
Aplicaciones Web SPA con WebAPI y TypeScript
 
Hypo slides
Hypo slidesHypo slides
Hypo slides
 

Último

How to use Redis with MuleSoft. A quick start presentation.
How to use Redis with MuleSoft. A quick start presentation.How to use Redis with MuleSoft. A quick start presentation.
How to use Redis with MuleSoft. A quick start presentation.FlorenciaCattelani
 
Innovaciones tecnologicas en el siglo 21
Innovaciones tecnologicas en el siglo 21Innovaciones tecnologicas en el siglo 21
Innovaciones tecnologicas en el siglo 21mariacbr99
 
redes informaticas en una oficina administrativa
redes informaticas en una oficina administrativaredes informaticas en una oficina administrativa
redes informaticas en una oficina administrativanicho110
 
Avances tecnológicos del siglo XXI 10-07 eyvana
Avances tecnológicos del siglo XXI 10-07 eyvanaAvances tecnológicos del siglo XXI 10-07 eyvana
Avances tecnológicos del siglo XXI 10-07 eyvanamcerpam
 
Guia Basica para bachillerato de Circuitos Basicos
Guia Basica para bachillerato de Circuitos BasicosGuia Basica para bachillerato de Circuitos Basicos
Guia Basica para bachillerato de Circuitos BasicosJhonJairoRodriguezCe
 
investigación de los Avances tecnológicos del siglo XXI
investigación de los Avances tecnológicos del siglo XXIinvestigación de los Avances tecnológicos del siglo XXI
investigación de los Avances tecnológicos del siglo XXIhmpuellon
 
Buenos_Aires_Meetup_Redis_20240430_.pptx
Buenos_Aires_Meetup_Redis_20240430_.pptxBuenos_Aires_Meetup_Redis_20240430_.pptx
Buenos_Aires_Meetup_Redis_20240430_.pptxFederico Castellari
 
EVOLUCION DE LA TECNOLOGIA Y SUS ASPECTOSpptx
EVOLUCION DE LA TECNOLOGIA Y SUS ASPECTOSpptxEVOLUCION DE LA TECNOLOGIA Y SUS ASPECTOSpptx
EVOLUCION DE LA TECNOLOGIA Y SUS ASPECTOSpptxJorgeParada26
 
Avances tecnológicos del siglo XXI y ejemplos de estos
Avances tecnológicos del siglo XXI y ejemplos de estosAvances tecnológicos del siglo XXI y ejemplos de estos
Avances tecnológicos del siglo XXI y ejemplos de estossgonzalezp1
 
Resistencia extrema al cobre por un consorcio bacteriano conformado por Sulfo...
Resistencia extrema al cobre por un consorcio bacteriano conformado por Sulfo...Resistencia extrema al cobre por un consorcio bacteriano conformado por Sulfo...
Resistencia extrema al cobre por un consorcio bacteriano conformado por Sulfo...JohnRamos830530
 

Último (10)

How to use Redis with MuleSoft. A quick start presentation.
How to use Redis with MuleSoft. A quick start presentation.How to use Redis with MuleSoft. A quick start presentation.
How to use Redis with MuleSoft. A quick start presentation.
 
Innovaciones tecnologicas en el siglo 21
Innovaciones tecnologicas en el siglo 21Innovaciones tecnologicas en el siglo 21
Innovaciones tecnologicas en el siglo 21
 
redes informaticas en una oficina administrativa
redes informaticas en una oficina administrativaredes informaticas en una oficina administrativa
redes informaticas en una oficina administrativa
 
Avances tecnológicos del siglo XXI 10-07 eyvana
Avances tecnológicos del siglo XXI 10-07 eyvanaAvances tecnológicos del siglo XXI 10-07 eyvana
Avances tecnológicos del siglo XXI 10-07 eyvana
 
Guia Basica para bachillerato de Circuitos Basicos
Guia Basica para bachillerato de Circuitos BasicosGuia Basica para bachillerato de Circuitos Basicos
Guia Basica para bachillerato de Circuitos Basicos
 
investigación de los Avances tecnológicos del siglo XXI
investigación de los Avances tecnológicos del siglo XXIinvestigación de los Avances tecnológicos del siglo XXI
investigación de los Avances tecnológicos del siglo XXI
 
Buenos_Aires_Meetup_Redis_20240430_.pptx
Buenos_Aires_Meetup_Redis_20240430_.pptxBuenos_Aires_Meetup_Redis_20240430_.pptx
Buenos_Aires_Meetup_Redis_20240430_.pptx
 
EVOLUCION DE LA TECNOLOGIA Y SUS ASPECTOSpptx
EVOLUCION DE LA TECNOLOGIA Y SUS ASPECTOSpptxEVOLUCION DE LA TECNOLOGIA Y SUS ASPECTOSpptx
EVOLUCION DE LA TECNOLOGIA Y SUS ASPECTOSpptx
 
Avances tecnológicos del siglo XXI y ejemplos de estos
Avances tecnológicos del siglo XXI y ejemplos de estosAvances tecnológicos del siglo XXI y ejemplos de estos
Avances tecnológicos del siglo XXI y ejemplos de estos
 
Resistencia extrema al cobre por un consorcio bacteriano conformado por Sulfo...
Resistencia extrema al cobre por un consorcio bacteriano conformado por Sulfo...Resistencia extrema al cobre por un consorcio bacteriano conformado por Sulfo...
Resistencia extrema al cobre por un consorcio bacteriano conformado por Sulfo...
 

Introducción a AngularJS

  • 2. Luis Felipe Natividad Alejos ◇ Ingeniero de Software de la Universidad Nacional Mayor de San Marcos. ◇ Jefe de Proyectos en Grupo El Comercio (Orbis Ventures). ◇ Colaborador en Frontend Labs (frontendlabs.io) ◇ @feluis23
  • 3. AngularJS es un framework javascript del lado del frontend mantenido por Google, nace en el 2009, pero se hace popular a finales del 2012. Framework MVW(Model-View-Whatever), donde whatever nos indica “lo que nos sirva a cada uno”. Hablemos de AngularJS
  • 4. “ AngularJS extiende el HTML de tal manera que podemos decir que le da súper poderes, permitiéndonos crear aplicaciones dinámicas, con mucha interacción del usuario y altamente escalables.
  • 6. Inyección de dependencias Este principio es muy usado por AngularJS, y permite que se inyecten los objetos o dependencias en vez que el mismo módulo donde estamos trabajando sea quien lo cree. Esto permite tener un código desacoplado.
  • 7. $scope Scope es el ámbito donde interactúa algun modulo o componente definido por AngularJS 1
  • 8. Módulos(module) Los módulos son contenedores de diferentes partes de nuestra aplicación. 2
  • 9. Controladores(controller) Los controladores en AngularJS son objetos que permiten desarrollar la lógica de la aplicación, enlaza el $scope con la vista y permite tener un control total de los datos. 3
  • 10. Directivas(directive) Las directivas vienen a ser la forma en que extendemos nuestro html, permitiéndonos agregar una porción de código hasta una funcionalidad completa. 4 ● ng-app ● ng-controller ● ng-model ● ng-view ● ng-click ● ng-init ● ng-repeat ● ng-change ● ng-hide ● ng-show … entre otros
  • 11. Servicios(service) y Fábricas(factory) Los servicios y fábricas, son módulos que permiten agrupar una funcionalidad específica e inyectarlos donde queramos. 5
  • 12. Filtros(filter) Los filtros son los encargados de transformar los datos para luego mostrarlos. 6
  • 13. Para tener en cuenta ◇ AngularJS es una solución completa, por lo cual no se puede comparar con Jquery. ◇ Es un framework que está diseñado para ser testeable fácilmente. ◇ Esta diseñado para desarrollar aplicaciones no páginas web.
  • 14. Vs. Otros BackboneJS Framework javascript MVC, que permite trabajar aplicaciones pequeñas y medianas, ligero y de muy baja curva de aprendizaje. Jquery y Underscore EmberJS Framework javascript MVC, permite desarrollar aplicaciones single page de manera ordenada y óptima. Jquery y Handelbars. ReactJS No es un framework javascript, es una librería que ha tomado mucha relevancia últimamente en la comunidad y permite interfaces de usuarios y no puede ser comparado con AngularJS.
  • 15. AngularJS es genial!!! Nos brinda un sin número de herramientas, como routing, inyección de dependencias, templates entre otros, que hacen de este framework muy completo.
  • 16. Ionic Framework The beautiful, open source front- end SDK for developing hybrid mobile apps with HTML5. Place your screenshot here
  • 18. Thanks! Preguntas? Pueden ubicarme en: ◇ @feluis23 ◇ luisnatividadalejos@gmail.com ◇ http://frontendlabs.io