SlideShare una empresa de Scribd logo
1 de 17
AngularJS
Introducción
Álvaro Alonso
Contenidos del curso
 Introducción
 Patrón MVC
 Tecnologías de cliente
 AngularJS
 Conceptos básicos
 Templates
 Two- way data binding
 Directivas
 Expresiones
 Módulos y controladores
 Dependency Injection
 Filtros y servicios
 Rutas
 Conexión con servidores de
backend
 Formularios
 Validación de campos
 Temas avanzados
2
Contenidos
 Patrón Model View Controller
 Variantes
 Cliente vs Servidor
 Tecnologías cliente
 AngularJS
3
Patrón MVC
4
 Model – View – Controller
 Separa la lógica de negocio de los datos y la presentación
 Model
 Mantiene el estado de la aplicación (datos)
 View
 Muestra los datos al usuario
 Controller
 Gestiona la interacción con el usuario actualizando el modelo
Patrón MVC
5
View
Model
Controller
Patrón MVC
 MVP: Model – View - Presenter
Variantes
6
View ModelPresenter
Patrón MVC
 PAC: Presentation – Abstraction - Control
Variantes
7
Patrón MVC
 MVVM: Model – View -ViewModel
Variantes
8
View Model
View
Modeldata
binding
Patrón MVC En servidor
9
ServerBrowser
View
Model
Controller
DB
Patrón MVC En cliente
10
Server
Browser
View
Model
Controller
DB
Server
Browser
View
Model
Controller
DB
Server
Browser
View
Model
Controller
DB
Patrón MVC
11
Patrón MVC
 Factores a tener en cuenta
 Tipo de procesamiento
 Reutilización de tareas
 Características de los servidores
 Tipo de usuarios / dispositivos
 Seguridad
 Desarrollador del servicio
12
Patrón MVC Tecnologías cliente
13
Patrón MVC Tecnologías cliente
14
AngularJS
 Nace en 2009
 Mantenido por Google desde 2012
 Versión actual: 1.5.8
 Nuevo Angular 2
 Funcionalidades destacadas
 Two-way data binding
 Directives
 Inyección de dependencias
 Desarrollo modular
 MEAN
 Mongo – Express – Angular – Node
15
Documentación
 AngularJS
 https://angularjs.org/
 Developers Guide
 https://docs.angularjs.org/guide
 API Reference
 https://docs.angularjs.org/api
 Tutorials
 https://docs.angularjs.org/tutorial
 https://www.youtube.com/user/angularjs
16
AngularJS
Introducción
Álvaro Alonso

Más contenido relacionado

La actualidad más candente

Modelo, vista, controlador
Modelo, vista, controladorModelo, vista, controlador
Modelo, vista, controlador
Cecy Villalta
 
Modelo vistacontrolador
Modelo vistacontroladorModelo vistacontrolador
Modelo vistacontrolador
René Pilataxi
 
Modelo vista controlador
Modelo vista controladorModelo vista controlador
Modelo vista controlador
Luis Gutierrez
 

La actualidad más candente (20)

El patrón MVC
El patrón MVCEl patrón MVC
El patrón MVC
 
Calculadora Gráfica Java implementando el Patrón MVC
Calculadora Gráfica Java implementando el Patrón MVCCalculadora Gráfica Java implementando el Patrón MVC
Calculadora Gráfica Java implementando el Patrón MVC
 
Curso AngularJS - 7. temas avanzados
Curso AngularJS - 7. temas avanzadosCurso AngularJS - 7. temas avanzados
Curso AngularJS - 7. temas avanzados
 
Modelo vista controlador
Modelo vista controladorModelo vista controlador
Modelo vista controlador
 
Arquitectura Mvc
Arquitectura MvcArquitectura Mvc
Arquitectura Mvc
 
MODELO VISTA CONTROLADOR EN PHP
MODELO VISTA CONTROLADOR EN PHPMODELO VISTA CONTROLADOR EN PHP
MODELO VISTA CONTROLADOR EN PHP
 
Patrón MVC
Patrón MVCPatrón MVC
Patrón MVC
 
Introduccion a AngularJS
Introduccion a AngularJSIntroduccion a AngularJS
Introduccion a AngularJS
 
JQuery Deferred
JQuery DeferredJQuery Deferred
JQuery Deferred
 
Modelo, vista, controlador
Modelo, vista, controladorModelo, vista, controlador
Modelo, vista, controlador
 
Curso AngularJS - 3. módulos y controladores
Curso AngularJS - 3. módulos y controladoresCurso AngularJS - 3. módulos y controladores
Curso AngularJS - 3. módulos y controladores
 
patron-mvc
 patron-mvc patron-mvc
patron-mvc
 
Introducción a Backbone
Introducción a BackboneIntroducción a Backbone
Introducción a Backbone
 
Javascript + Angular Sesion 3
Javascript + Angular Sesion 3Javascript + Angular Sesion 3
Javascript + Angular Sesion 3
 
JavaFX 2
JavaFX 2JavaFX 2
JavaFX 2
 
6.angular js
6.angular js6.angular js
6.angular js
 
Angular js
Angular jsAngular js
Angular js
 
Taller MVC
Taller MVCTaller MVC
Taller MVC
 
Modelo vistacontrolador
Modelo vistacontroladorModelo vistacontrolador
Modelo vistacontrolador
 
Modelo vista controlador
Modelo vista controladorModelo vista controlador
Modelo vista controlador
 

Destacado

Angular js tutorial slides
Angular js tutorial slidesAngular js tutorial slides
Angular js tutorial slides
samhelman
 

Destacado (20)

Aplicaciones web
Aplicaciones webAplicaciones web
Aplicaciones web
 
Iniciando com jQuery
Iniciando com jQueryIniciando com jQuery
Iniciando com jQuery
 
Introdução ao AngularJS!
Introdução ao AngularJS!Introdução ao AngularJS!
Introdução ao AngularJS!
 
Tutorial AngularJS - episódio 5 - diretivas
Tutorial AngularJS - episódio 5 -  diretivasTutorial AngularJS - episódio 5 -  diretivas
Tutorial AngularJS - episódio 5 - diretivas
 
JavaScript - Date
JavaScript - DateJavaScript - Date
JavaScript - Date
 
O Poderoso AngularJS
O Poderoso AngularJSO Poderoso AngularJS
O Poderoso AngularJS
 
AngularJS - 10 passos para aprender a criar suas directivas
AngularJS - 10 passos para aprender a criar suas directivasAngularJS - 10 passos para aprender a criar suas directivas
AngularJS - 10 passos para aprender a criar suas directivas
 
Angular js
Angular jsAngular js
Angular js
 
Aplicando filtros com AngularJS
Aplicando filtros com AngularJSAplicando filtros com AngularJS
Aplicando filtros com AngularJS
 
Scope AngularJS
Scope AngularJSScope AngularJS
Scope AngularJS
 
Criando Filtros com AngularJS
Criando Filtros com AngularJSCriando Filtros com AngularJS
Criando Filtros com AngularJS
 
Automação de Testes com AngularJS
Automação de Testes com AngularJSAutomação de Testes com AngularJS
Automação de Testes com AngularJS
 
HTTP Interceptors com AngularJS
HTTP Interceptors com AngularJSHTTP Interceptors com AngularJS
HTTP Interceptors com AngularJS
 
AngularJS Abraçando o MVC Client-Side
AngularJS Abraçando o MVC Client-SideAngularJS Abraçando o MVC Client-Side
AngularJS Abraçando o MVC Client-Side
 
JavaScript - Expressões Regulares
JavaScript - Expressões RegularesJavaScript - Expressões Regulares
JavaScript - Expressões Regulares
 
Angular js tutorial slides
Angular js tutorial slidesAngular js tutorial slides
Angular js tutorial slides
 
Utilizando diretivas com AngularJS
Utilizando diretivas com AngularJSUtilizando diretivas com AngularJS
Utilizando diretivas com AngularJS
 
Criando aplicações Single-Page com AngularJS
Criando aplicações Single-Page com AngularJSCriando aplicações Single-Page com AngularJS
Criando aplicações Single-Page com AngularJS
 
deSymfony 2013 - Creando aplicaciones web desde otro ángulo con Symfony y A...
deSymfony 2013 -  Creando aplicaciones web desde otro ángulo con Symfony y A...deSymfony 2013 -  Creando aplicaciones web desde otro ángulo con Symfony y A...
deSymfony 2013 - Creando aplicaciones web desde otro ángulo con Symfony y A...
 
Introdução ao desenvolvimento front end usando bootstrap e angular js
Introdução ao desenvolvimento front end usando bootstrap e angular jsIntrodução ao desenvolvimento front end usando bootstrap e angular js
Introdução ao desenvolvimento front end usando bootstrap e angular js
 

Similar a Curso AngularJS - 1. introducción

Modelo vistacontrolador
Modelo vistacontroladorModelo vistacontrolador
Modelo vistacontrolador
René Pilataxi
 
MODELO VISTA CONTROLADOR
MODELO VISTA CONTROLADORMODELO VISTA CONTROLADOR
MODELO VISTA CONTROLADOR
René Pilataxi
 
MVC - (Spanish)
MVC - (Spanish)MVC - (Spanish)
MVC - (Spanish)
Senior Dev
 

Similar a Curso AngularJS - 1. introducción (20)

Modelo vista controlador
Modelo vista controladorModelo vista controlador
Modelo vista controlador
 
Arquitectura Cliente-Servidor
Arquitectura Cliente-ServidorArquitectura Cliente-Servidor
Arquitectura Cliente-Servidor
 
Asp.net mvc
Asp.net mvcAsp.net mvc
Asp.net mvc
 
Desarrollo de Aplicaciones Web con ASP.NET MVC5
Desarrollo de Aplicaciones Web con ASP.NET MVC5Desarrollo de Aplicaciones Web con ASP.NET MVC5
Desarrollo de Aplicaciones Web con ASP.NET MVC5
 
Modelo vistacontrolador
Modelo vistacontroladorModelo vistacontrolador
Modelo vistacontrolador
 
MODELO VISTA CONTROLADOR
MODELO VISTA CONTROLADORMODELO VISTA CONTROLADOR
MODELO VISTA CONTROLADOR
 
MVC - (Spanish)
MVC - (Spanish)MVC - (Spanish)
MVC - (Spanish)
 
Spring Mvc Final
Spring Mvc FinalSpring Mvc Final
Spring Mvc Final
 
Arquitectura3 capas
Arquitectura3 capasArquitectura3 capas
Arquitectura3 capas
 
Asp
AspAsp
Asp
 
Presentación MVC
Presentación MVCPresentación MVC
Presentación MVC
 
Introducción a ASP.NET MVC
Introducción a ASP.NET MVCIntroducción a ASP.NET MVC
Introducción a ASP.NET MVC
 
Arquitectura cliente
Arquitectura cliente Arquitectura cliente
Arquitectura cliente
 
Struts en Java
Struts en JavaStruts en Java
Struts en Java
 
Organizador modelos asp.net
Organizador modelos asp.netOrganizador modelos asp.net
Organizador modelos asp.net
 
ASP.NET MVC - Introducción a ASP.NET MVC
ASP.NET MVC - Introducción a ASP.NET MVCASP.NET MVC - Introducción a ASP.NET MVC
ASP.NET MVC - Introducción a ASP.NET MVC
 
Clase_MVC_I.pptx
Clase_MVC_I.pptxClase_MVC_I.pptx
Clase_MVC_I.pptx
 
Modelo mvc
Modelo mvcModelo mvc
Modelo mvc
 
Patron mvc struts
Patron mvc strutsPatron mvc struts
Patron mvc struts
 
[Code Camp 2009] ASP.NET MVC a full (Matías Juan Rubí + Jonathan Solarz)
[Code Camp 2009] ASP.NET MVC a full (Matías Juan Rubí + Jonathan Solarz)[Code Camp 2009] ASP.NET MVC a full (Matías Juan Rubí + Jonathan Solarz)
[Code Camp 2009] ASP.NET MVC a full (Matías Juan Rubí + Jonathan Solarz)
 

Más de Álvaro Alonso González

Más de Álvaro Alonso González (17)

Adding identity management and access control to your app
Adding identity management and access control to your appAdding identity management and access control to your app
Adding identity management and access control to your app
 
KeyRock and Wilma - Openstack-based Identity Management in FIWARE
KeyRock and Wilma - Openstack-based Identity Management in FIWAREKeyRock and Wilma - Openstack-based Identity Management in FIWARE
KeyRock and Wilma - Openstack-based Identity Management in FIWARE
 
Curso AngularJS - 5. rutas
Curso AngularJS - 5. rutasCurso AngularJS - 5. rutas
Curso AngularJS - 5. rutas
 
Lesson 6 - How to register your sensors in account portal
Lesson 6 - How to register your sensors in account portalLesson 6 - How to register your sensors in account portal
Lesson 6 - How to register your sensors in account portal
 
Lesson 5 - Installing Keyrock in your own infrastructure
Lesson 5 - Installing Keyrock in your own infrastructure Lesson 5 - Installing Keyrock in your own infrastructure
Lesson 5 - Installing Keyrock in your own infrastructure
 
Keyrock - Lesson 3. Applications. How to create OAuth2 tokens.
Keyrock - Lesson 3. Applications. How to create OAuth2 tokens.Keyrock - Lesson 3. Applications. How to create OAuth2 tokens.
Keyrock - Lesson 3. Applications. How to create OAuth2 tokens.
 
Keyrock - Lesson 1. Introduction
Keyrock - Lesson 1. IntroductionKeyrock - Lesson 1. Introduction
Keyrock - Lesson 1. Introduction
 
Cloud Portal - Lesson 5. Advanced tasks
Cloud Portal - Lesson 5. Advanced tasksCloud Portal - Lesson 5. Advanced tasks
Cloud Portal - Lesson 5. Advanced tasks
 
Cloud Portal - Lesson 4. Managing Storage
Cloud Portal - Lesson 4. Managing StorageCloud Portal - Lesson 4. Managing Storage
Cloud Portal - Lesson 4. Managing Storage
 
Cloud Portal - Lesson 2. Cloud Portal Overview
Cloud Portal - Lesson 2. Cloud Portal OverviewCloud Portal - Lesson 2. Cloud Portal Overview
Cloud Portal - Lesson 2. Cloud Portal Overview
 
Cloud Portal - Lesson 1. Introduction
Cloud Portal - Lesson 1. IntroductionCloud Portal - Lesson 1. Introduction
Cloud Portal - Lesson 1. Introduction
 
Cloud Portal - Lesson 3. Launching an Instance
Cloud Portal - Lesson 3. Launching an InstanceCloud Portal - Lesson 3. Launching an Instance
Cloud Portal - Lesson 3. Launching an Instance
 
Primeros pasos con Docker
Primeros pasos con DockerPrimeros pasos con Docker
Primeros pasos con Docker
 
Introducción al Protocolo OAuth 2.0
Introducción al Protocolo OAuth 2.0Introducción al Protocolo OAuth 2.0
Introducción al Protocolo OAuth 2.0
 
Adding Identity Management and Access Control to your Application
Adding Identity Management and Access Control to your ApplicationAdding Identity Management and Access Control to your Application
Adding Identity Management and Access Control to your Application
 
Adding Identity Management and Access Control to your Application - Exersices
Adding Identity Management and Access Control to your Application - ExersicesAdding Identity Management and Access Control to your Application - Exersices
Adding Identity Management and Access Control to your Application - Exersices
 
Setting Up your Cloud Environment using the FIWARE Lab Cloud Portal
Setting Up your Cloud Environment using the FIWARE Lab Cloud PortalSetting Up your Cloud Environment using the FIWARE Lab Cloud Portal
Setting Up your Cloud Environment using the FIWARE Lab Cloud Portal
 

Último

redes informaticas en una oficina administrativa
redes informaticas en una oficina administrativaredes informaticas en una oficina administrativa
redes informaticas en una oficina administrativa
nicho110
 

Último (12)

EL CICLO PRÁCTICO DE UN MOTOR DE CUATRO TIEMPOS.pptx
EL CICLO PRÁCTICO DE UN MOTOR DE CUATRO TIEMPOS.pptxEL CICLO PRÁCTICO DE UN MOTOR DE CUATRO TIEMPOS.pptx
EL CICLO PRÁCTICO DE UN MOTOR DE CUATRO TIEMPOS.pptx
 
Buenos_Aires_Meetup_Redis_20240430_.pptx
Buenos_Aires_Meetup_Redis_20240430_.pptxBuenos_Aires_Meetup_Redis_20240430_.pptx
Buenos_Aires_Meetup_Redis_20240430_.pptx
 
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
 
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
 
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
 
pruebas unitarias unitarias en java con JUNIT
pruebas unitarias unitarias en java con JUNITpruebas unitarias unitarias en java con JUNIT
pruebas unitarias unitarias en java con JUNIT
 
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.
 
PROYECTO FINAL. Tutorial para publicar en SlideShare.pptx
PROYECTO FINAL. Tutorial para publicar en SlideShare.pptxPROYECTO FINAL. Tutorial para publicar en SlideShare.pptx
PROYECTO FINAL. Tutorial para publicar en SlideShare.pptx
 
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
 
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
 
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...
 

Curso AngularJS - 1. introducción

Notas del editor

  1. Sabe Javascript el tio que lo programa??
  2. Angular más antiguo que backbone pero empezó a subir cuando lo empezó a mantener google