SlideShare a Scribd company logo
1 of 57
Download to read offline
Conceptos Prácticos


Filosofia de AngularJS



Directivas Básicas



Controladoras y Servicios



Routing



Directivas (Introducción)
Y un poco de Introducción





Aplicaciones que no vuelven a refrescar toda
la página
Pensadas para interacciones complejas
Maximizar la experiencia de usuario

4





Aplicaciones que no vuelven a refrescar toda
la página
Pensadas para interacciones complejas
Maximizar la experiencia de usuario

5
6
7
8


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

9
View

View

View

View

10
DOM Manipulation
Routing
Data Binding

History
Caching
Ajax/Promises

Module Loading
Object Modeling
View Loading

11
12
13


Framework para aplicaciones dinámicas.



Solución completa para el lado cliente.



Facilidad para el mantenimiento



Nunca mas ir y venir entre el DOM y el
modelo

14
Inicio clásico

Inicio con
módulo

15
16
Angular Conceptos Practicos 1


ng-app
◦ Inicial. Se puede indicar el modulo de la App



ng-show
◦ Muestra un elemento en base a una condición



ng-hide
◦ Oculta un elemento en base a una condición



ng-click
◦ Maneja el evento click sobre un elemento



http://docs.angularjs.org/api/


Convertir la barra de menu estatica
◦ Seleccionar y cambiar el color del link seleccionado
◦ Mostrar en la parte inferior el vinculo seleccionado
◦ No usar nada de javascript
◦ Base:
 http://jsfiddle.net/scyrizales/TzNhB/embedded/result/

◦ Final
 http://jsfiddle.net/scyrizales/5ZxMm/embedded/result/

19
Angular Conceptos Practicos 1






Un concepto de angular que maneja
interacciones del usuario
Controla la data que viene de los “modelos”

Uno de los “elementos” mas usados es
$scope




Mediante el $scope se define el viewmodel
inicial
Las funciones del scope pueden ser usadas
como manejadores de eventos

22








Este servicio sirve para unir la data a la vista
Contexto para las expresiones usadas en la
vista

Provee un metodo para “observar” los
cambios
Provee un método para recibir cambios desde
“afuera”.
23




Angular gestiona automáticamente que
servicio llamar
Sin embargo es mejor hacer lo siguiente:

24


Controladoras para separar funciones



Para dar ámbito a las expresiones





Para organizar el paso de información desde
los servicios
Para responder a los eventos del usuario

25


Realiza cambios en el DOM



Formatea el input (form controls)



Filtra el output (filters)



Comparte código con otras

26
27






Las vistas sirven para mostrar el viewmodel.
Existen muchas directivas para lograr el
comportamiento requerido

Directivas en Angular:
◦ http://docs.angularjs.org/api/

28


Hagamos un carrito de compra
◦ http://jsfiddle.net/scyrizales/k5Zfb/



Sirven para formatear los datos
También se puede usar para filtrar arreglos

30


Refactorizemos el ejemplo anterior



Crearemos el filtro Moneda








Los servicios son la mejor forma de compartir
información
Permiten encapsular funcionalidad

Gracias a la DI se pueden testear sin
problemas
Los servicios se manejan como Singletons

32
33


Refactorizemos el ejemplo anterior



Crearemos el servicio Carrito
35






El browser no sabe nada acerca de las vistas
El browser siempre va a regresar a la pagina
anterior

Si hubieron varias vistas, lástima.

36




El browser tiene que saber que hay
interacciones
Tenemos que controlar el evento
Hashchanged

37



Sirve para añadir nuevas rutas
Dos métodos
◦ when
◦ otherwhise

38
Parametro

Descripción

path

La ruta que se compara contra $location.path

route

Objeto con diversas propiedades que indican varios
tipos de configuraciones:
•controller: La controladora a usar.
•template: String que define el template a usar
•templateUrl: ruta fisica de donde cargar un
template
•redirectTo: manejar redirecciones dentro de
angular

39



Define ruta por defecto.
Recibe como parametro un objeto route
(explicado en la anterior diapositiva)

40


Directiva que se usa como contenedor de las
vistas a renderizar

41




Se puede definir un template dentro del
documento con el que trabajamos.
Usamos la etiqueta script junto con el tipo
text/ng-template

42


http://jsfiddle.net/scyrizales/hm72F/

43


http://jsfiddle.net/scyrizales/sHP48/

44
Angular Conceptos Practicos 1




Las directivas es lo que hace diferente a
AngularJS
Permiten encapsular funcionalidad en puro
html.

46


Necesidades especiales

◦ Imaginen poder usar este código para compartir un
mismo formulario en cualquier parte de su
aplicación

47


Encapsular un plugin de otra libreria



La directiva no existe



Las directivas que existen no cumplen con las
necesidades.

48
49
Propiedad

Valor

restrict

Puede ser A,E,C y M que significan
attribute, element, class, o comment

scope

Cada subpropiedad puede tener cualquiera de estos 3
valores:
•@: el valor es de un solo sentido
•=: el valor es de dos sentidos
•&: guarda una referencia a una función o expresión

template

La base para escribir el código que usará la directiva

replace

Boolean que indica si se debe reemplazar el html
original por el html generado por el template

transclude

Indica si se debe preservar el contenido de la
declaración de la directiva en el html original, se usa
en conjunto con ng-transclude

controller

La controladora que se usara para darle ambito al
template, no siempre es necesario
50
Propiedad

Valor

requires

Indica si una directiva depende de otra

link

Función que realiza la configuración inicial de la
directiva. Recibe cuatro parametros:
function link(scope, iElement, iAttrs, controller)
•scope: indica el objeto creado por la propiedad
scope.
•iElement: se refiere al objeto base de la controladora.
Este vienen encapsulado en jqLite o Jquery (si es que
se incluyo en el proyecto)
•iAttrs: los atributos que se asignaron al html original
de la directiva declarada
•Controller: el controller de la directiva padre. Solo
cuando se ha establecido la propiedad requires

51






Al usar directivas, se crean nuevos scopes, o
se heredan los scopes padres.
Si al definir la directiva, no se usa la
propiedad scope, la directiva crea un nuevo
scope que hereda todas las propiedades del
scope de la controladora que contiene a la
directiva.
Al momento de usar la propiedad scope, se
pierde toda conexión con el scope padre, y se
genera un scope independiente para la
directiva.

52




El método $watch (forma parte del scope)
sirve para verificar cambios en alguna
propiedad del scope.
La sintaxis es:

◦ $scope.$watch(„propiedad‟, function(value){ });
◦ La funcion suscrita es la forma de realizar los
cambios necesarios ante un cambio en la propiedad
suscrita



Se puede usar para verificar cambios en
propiedades de la controladora padre
inclusive.

53


Hagamos una calculadora
◦ http://jsfiddle.net/scyrizales/mUJhL/

54


Hagamos un time formatter
◦ http://jsfiddle.net/scyrizales/rUbsE/

55


Hagamos un tab panel
◦ http://jsfiddle.net/scyrizales/6C6Mv/

56
¿Alguna pregunta?

Sergio Castillo
Front End Developer
@scyrizales

More Related Content

What's hot

What's hot (20)

Conhecendo o Django
Conhecendo o DjangoConhecendo o Django
Conhecendo o Django
 
MVC Architecture
MVC ArchitectureMVC Architecture
MVC Architecture
 
BPMN 2.0 en el Proceso de Desarrollo de Software
BPMN 2.0 en el Proceso de Desarrollo de SoftwareBPMN 2.0 en el Proceso de Desarrollo de Software
BPMN 2.0 en el Proceso de Desarrollo de Software
 
Struts
StrutsStruts
Struts
 
Eventos en Java
Eventos en JavaEventos en Java
Eventos en Java
 
Jsp lifecycle
Jsp   lifecycleJsp   lifecycle
Jsp lifecycle
 
Curso de Java Persistence API (JPA) (Java EE 7)
Curso de Java Persistence API (JPA) (Java EE 7)Curso de Java Persistence API (JPA) (Java EE 7)
Curso de Java Persistence API (JPA) (Java EE 7)
 
Cuadro comparativo entre moprosoft y cmmi
Cuadro comparativo entre moprosoft y cmmi Cuadro comparativo entre moprosoft y cmmi
Cuadro comparativo entre moprosoft y cmmi
 
Actividad 1: Mysql.Data.MySqlClient
Actividad 1: Mysql.Data.MySqlClientActividad 1: Mysql.Data.MySqlClient
Actividad 1: Mysql.Data.MySqlClient
 
Arquitetura Node com NestJS
Arquitetura Node com NestJSArquitetura Node com NestJS
Arquitetura Node com NestJS
 
PROTOCOLO HTTPS
PROTOCOLO HTTPSPROTOCOLO HTTPS
PROTOCOLO HTTPS
 
Express js
Express jsExpress js
Express js
 
Modelo 4+1
Modelo 4+1Modelo 4+1
Modelo 4+1
 
Uml (presentación 6)
Uml (presentación 6)Uml (presentación 6)
Uml (presentación 6)
 
Ieee 830 srs
Ieee 830 srsIeee 830 srs
Ieee 830 srs
 
Arquitectura web
Arquitectura webArquitectura web
Arquitectura web
 
Php
PhpPhp
Php
 
Asp .net
Asp .netAsp .net
Asp .net
 
php
phpphp
php
 
Casos uso uml
Casos uso umlCasos uso uml
Casos uso uml
 

Viewers also liked

AngularJS 1 - A Superheroic Javascript MVC framework (Spanish)
AngularJS 1 - A Superheroic Javascript MVC framework (Spanish)AngularJS 1 - A Superheroic Javascript MVC framework (Spanish)
AngularJS 1 - A Superheroic Javascript MVC framework (Spanish)Nacho García Fernández
 
Curso Básico de AngularJS
Curso Básico de AngularJSCurso Básico de AngularJS
Curso Básico de AngularJSCarlos Azaustre
 
Introduccion a AngularJS
Introduccion a AngularJSIntroduccion a AngularJS
Introduccion a AngularJSOscar Gensollen
 
Angular js Frontenders Valencia
Angular js Frontenders ValenciaAngular js Frontenders Valencia
Angular js Frontenders ValenciaJavier Ruiz
 
Introducción a AngularJS
Introducción a AngularJSIntroducción a AngularJS
Introducción a AngularJSLuis Natividad
 
Yupp PHP Framework
Yupp PHP FrameworkYupp PHP Framework
Yupp PHP FrameworkPablo Pazos
 
Carrera de fondo - La continuada lucha de AngularJS - CodeMotion 2015
Carrera de fondo - La continuada lucha de AngularJS - CodeMotion 2015Carrera de fondo - La continuada lucha de AngularJS - CodeMotion 2015
Carrera de fondo - La continuada lucha de AngularJS - CodeMotion 2015José Manuel García García
 
Patron de Desarrollo Modelo Vista Controlador
Patron de Desarrollo Modelo Vista ControladorPatron de Desarrollo Modelo Vista Controlador
Patron de Desarrollo Modelo Vista ControladorHenry Vargas
 
144 Rest Web Services
144 Rest Web Services144 Rest Web Services
144 Rest Web ServicesGeneXus
 
Introducción a Laravel 5 - Un Framework para Artesanos Web
Introducción a Laravel 5 - Un Framework para Artesanos WebIntroducción a Laravel 5 - Un Framework para Artesanos Web
Introducción a Laravel 5 - Un Framework para Artesanos WebFacundo E. Goñi Perez
 
Developing Java Web Applications
Developing Java Web ApplicationsDeveloping Java Web Applications
Developing Java Web Applicationshchen1
 
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 MVCIgnacio Aular Reyes
 
Arquitectura y diseño de aplicaciones Java EE
Arquitectura y diseño de aplicaciones Java EEArquitectura y diseño de aplicaciones Java EE
Arquitectura y diseño de aplicaciones Java EECarlos Gavidia-Calderon
 

Viewers also liked (20)

Introducción a Angular JS
Introducción a Angular JSIntroducción a Angular JS
Introducción a Angular JS
 
AngularJS 1 - A Superheroic Javascript MVC framework (Spanish)
AngularJS 1 - A Superheroic Javascript MVC framework (Spanish)AngularJS 1 - A Superheroic Javascript MVC framework (Spanish)
AngularJS 1 - A Superheroic Javascript MVC framework (Spanish)
 
Curso Básico de AngularJS
Curso Básico de AngularJSCurso Básico de AngularJS
Curso Básico de AngularJS
 
Introduccion a AngularJS
Introduccion a AngularJSIntroduccion a AngularJS
Introduccion a AngularJS
 
Angular js Frontenders Valencia
Angular js Frontenders ValenciaAngular js Frontenders Valencia
Angular js Frontenders Valencia
 
Angular js
Angular jsAngular js
Angular js
 
Introducción a AngularJS
Introducción a AngularJSIntroducción a AngularJS
Introducción a AngularJS
 
Yupp PHP Framework
Yupp PHP FrameworkYupp PHP Framework
Yupp PHP Framework
 
08 desarrollo de aplicaciones web con angular js dom
08 desarrollo de aplicaciones web con angular js   dom08 desarrollo de aplicaciones web con angular js   dom
08 desarrollo de aplicaciones web con angular js dom
 
Introducción a Kohana Framework
Introducción a Kohana FrameworkIntroducción a Kohana Framework
Introducción a Kohana Framework
 
Carrera de fondo - La continuada lucha de AngularJS - CodeMotion 2015
Carrera de fondo - La continuada lucha de AngularJS - CodeMotion 2015Carrera de fondo - La continuada lucha de AngularJS - CodeMotion 2015
Carrera de fondo - La continuada lucha de AngularJS - CodeMotion 2015
 
Patron de Desarrollo Modelo Vista Controlador
Patron de Desarrollo Modelo Vista ControladorPatron de Desarrollo Modelo Vista Controlador
Patron de Desarrollo Modelo Vista Controlador
 
144 Rest Web Services
144 Rest Web Services144 Rest Web Services
144 Rest Web Services
 
Angular js
Angular jsAngular js
Angular js
 
Introducción a Laravel 5 - Un Framework para Artesanos Web
Introducción a Laravel 5 - Un Framework para Artesanos WebIntroducción a Laravel 5 - Un Framework para Artesanos Web
Introducción a Laravel 5 - Un Framework para Artesanos Web
 
Developing Java Web Applications
Developing Java Web ApplicationsDeveloping Java Web Applications
Developing Java Web Applications
 
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
 
MVC: La Vista
MVC: La VistaMVC: La Vista
MVC: La Vista
 
CRUD html php mysql
CRUD html php mysqlCRUD html php mysql
CRUD html php mysql
 
Arquitectura y diseño de aplicaciones Java EE
Arquitectura y diseño de aplicaciones Java EEArquitectura y diseño de aplicaciones Java EE
Arquitectura y diseño de aplicaciones Java EE
 

Similar to Angular Conceptos Practicos 1

5.- PPT 2022 05 U01 T01 Desarrollo de Servicios Web I (1915).pptx
5.- PPT 2022 05 U01 T01 Desarrollo de Servicios Web I (1915).pptx5.- PPT 2022 05 U01 T01 Desarrollo de Servicios Web I (1915).pptx
5.- PPT 2022 05 U01 T01 Desarrollo de Servicios Web I (1915).pptxSibilinoAndante
 
Corp. In. Tec. S.A. - Capacitaciones en Informática - Programación con CodeIg...
Corp. In. Tec. S.A. - Capacitaciones en Informática - Programación con CodeIg...Corp. In. Tec. S.A. - Capacitaciones en Informática - Programación con CodeIg...
Corp. In. Tec. S.A. - Capacitaciones en Informática - Programación con CodeIg...Corporacion de Industrias Tecnologicas S.A.
 
Django - Curso Básico - Principales Conceptos
Django - Curso Básico - Principales ConceptosDjango - Curso Básico - Principales Conceptos
Django - Curso Básico - Principales ConceptosGeorge Navarro Gomez
 
Django - Curso Básico - Principales Conceptos
Django - Curso Básico - Principales ConceptosDjango - Curso Básico - Principales Conceptos
Django - Curso Básico - Principales ConceptosGeorge Navarro Gomez
 
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 MVC5Oscar Gensollen
 
Drupal 7 a través Drupal Commerce
Drupal 7 a través Drupal CommerceDrupal 7 a través Drupal Commerce
Drupal 7 a través Drupal CommercePedro Cambra
 
Desarrolla tu primera api con spring boot
Desarrolla tu primera api con spring bootDesarrolla tu primera api con spring boot
Desarrolla tu primera api con spring bootCloudAppi
 
MVC & ASP.NET (Spanish)
MVC & ASP.NET (Spanish)MVC & ASP.NET (Spanish)
MVC & ASP.NET (Spanish)Senior Dev
 
ASP.NET MVC Core by Eduard Tomàs
ASP.NET MVC Core by Eduard TomàsASP.NET MVC Core by Eduard Tomàs
ASP.NET MVC Core by Eduard TomàsPlain Concepts
 

Similar to Angular Conceptos Practicos 1 (20)

Advanced angular 1
Advanced angular 1Advanced angular 1
Advanced angular 1
 
Javascript + Angular Sesion 5
Javascript + Angular Sesion 5Javascript + Angular Sesion 5
Javascript + Angular Sesion 5
 
Arquitectura java web
Arquitectura java webArquitectura java web
Arquitectura java web
 
Javascript + Angular Sesion 3
Javascript + Angular Sesion 3Javascript + Angular Sesion 3
Javascript + Angular Sesion 3
 
Integrando AngularJS y drupal
Integrando AngularJS y drupalIntegrando AngularJS y drupal
Integrando AngularJS y drupal
 
5.- PPT 2022 05 U01 T01 Desarrollo de Servicios Web I (1915).pptx
5.- PPT 2022 05 U01 T01 Desarrollo de Servicios Web I (1915).pptx5.- PPT 2022 05 U01 T01 Desarrollo de Servicios Web I (1915).pptx
5.- PPT 2022 05 U01 T01 Desarrollo de Servicios Web I (1915).pptx
 
Angular Conceptos Practicos 2
Angular Conceptos Practicos 2Angular Conceptos Practicos 2
Angular Conceptos Practicos 2
 
Corp. In. Tec. S.A. - Capacitaciones en Informática - Programación con CodeIg...
Corp. In. Tec. S.A. - Capacitaciones en Informática - Programación con CodeIg...Corp. In. Tec. S.A. - Capacitaciones en Informática - Programación con CodeIg...
Corp. In. Tec. S.A. - Capacitaciones en Informática - Programación con CodeIg...
 
Spring Mvc Final
Spring Mvc FinalSpring Mvc Final
Spring Mvc Final
 
Django - Curso Básico - Principales Conceptos
Django - Curso Básico - Principales ConceptosDjango - Curso Básico - Principales Conceptos
Django - Curso Básico - Principales Conceptos
 
Django - Curso Básico - Principales Conceptos
Django - Curso Básico - Principales ConceptosDjango - Curso Básico - Principales Conceptos
Django - Curso Básico - Principales Conceptos
 
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
 
Drupal 7 a través Drupal Commerce
Drupal 7 a través Drupal CommerceDrupal 7 a través Drupal Commerce
Drupal 7 a través Drupal Commerce
 
5-Unidad 2: Diseño de Vista-2.2 Para Web
5-Unidad 2: Diseño de Vista-2.2 Para Web5-Unidad 2: Diseño de Vista-2.2 Para Web
5-Unidad 2: Diseño de Vista-2.2 Para Web
 
Advanced angular 2
Advanced angular 2Advanced angular 2
Advanced angular 2
 
Desarrolla tu primera api con spring boot
Desarrolla tu primera api con spring bootDesarrolla tu primera api con spring boot
Desarrolla tu primera api con spring boot
 
MVC & ASP.NET (Spanish)
MVC & ASP.NET (Spanish)MVC & ASP.NET (Spanish)
MVC & ASP.NET (Spanish)
 
ASP.NET MVC Workshop Día 1
ASP.NET MVC Workshop Día 1ASP.NET MVC Workshop Día 1
ASP.NET MVC Workshop Día 1
 
ASP.NET MVC Core by Eduard Tomàs
ASP.NET MVC Core by Eduard TomàsASP.NET MVC Core by Eduard Tomàs
ASP.NET MVC Core by Eduard Tomàs
 
ASP.NET MVC Core
ASP.NET MVC CoreASP.NET MVC Core
ASP.NET MVC Core
 

More from Sergio Castillo Yrizales

Angular of things: angular2 + web bluetooth
Angular of things: angular2 + web bluetoothAngular of things: angular2 + web bluetooth
Angular of things: angular2 + web bluetoothSergio Castillo Yrizales
 
Arquitectura de software para aplicaciones móviles
Arquitectura de software para aplicaciones móvilesArquitectura de software para aplicaciones móviles
Arquitectura de software para aplicaciones móvilesSergio Castillo Yrizales
 

More from Sergio Castillo Yrizales (19)

Un dia en la vida de un Software Engineer
Un dia en la vida de un Software EngineerUn dia en la vida de un Software Engineer
Un dia en la vida de un Software Engineer
 
Javascript en tiempos de colera
Javascript en tiempos de coleraJavascript en tiempos de colera
Javascript en tiempos de colera
 
Lambda at the edge
Lambda at the edgeLambda at the edge
Lambda at the edge
 
Angular of things: angular2 + web bluetooth
Angular of things: angular2 + web bluetoothAngular of things: angular2 + web bluetooth
Angular of things: angular2 + web bluetooth
 
Pushing html5 beyond boundaries
Pushing html5 beyond boundariesPushing html5 beyond boundaries
Pushing html5 beyond boundaries
 
Javascript en tiempos de colera
Javascript en tiempos de coleraJavascript en tiempos de colera
Javascript en tiempos de colera
 
Web apps con angular y material design
Web apps con angular y material designWeb apps con angular y material design
Web apps con angular y material design
 
Tdd con Angular y jasmine
Tdd con Angular y jasmineTdd con Angular y jasmine
Tdd con Angular y jasmine
 
Ruby 101 session 5
Ruby 101 session 5Ruby 101 session 5
Ruby 101 session 5
 
Ruby 101 session 4
Ruby 101 session 4Ruby 101 session 4
Ruby 101 session 4
 
Javascript + Angular Sesion 6
Javascript + Angular Sesion 6Javascript + Angular Sesion 6
Javascript + Angular Sesion 6
 
Ruby 101 session 3
Ruby 101 session 3Ruby 101 session 3
Ruby 101 session 3
 
Ruby 101 session 2
Ruby 101 session 2Ruby 101 session 2
Ruby 101 session 2
 
Javascript + Angular Sesion 4
Javascript + Angular Sesion 4Javascript + Angular Sesion 4
Javascript + Angular Sesion 4
 
Ruby 101 session 1
Ruby 101 session 1Ruby 101 session 1
Ruby 101 session 1
 
Javascript + Angular Sesion 2
Javascript + Angular Sesion 2Javascript + Angular Sesion 2
Javascript + Angular Sesion 2
 
Javascript + Angular Sesion 1
Javascript + Angular Sesion 1Javascript + Angular Sesion 1
Javascript + Angular Sesion 1
 
Jquery mobile
Jquery mobileJquery mobile
Jquery mobile
 
Arquitectura de software para aplicaciones móviles
Arquitectura de software para aplicaciones móvilesArquitectura de software para aplicaciones móviles
Arquitectura de software para aplicaciones móviles
 

Recently uploaded

VIDEOS DE APOYO.docx E
VIDEOS DE APOYO.docx                                  EVIDEOS DE APOYO.docx                                  E
VIDEOS DE APOYO.docx Emialexsolar
 
El diseño de Algoritmos Paralelos.pdf - analisis de algortimos
El diseño de Algoritmos Paralelos.pdf - analisis de algortimosEl diseño de Algoritmos Paralelos.pdf - analisis de algortimos
El diseño de Algoritmos Paralelos.pdf - analisis de algortimosLCristinaForchue
 
Actividad 14: Diseño de Algoritmos Paralelos Actividad 14: Diseño de Algoritm...
Actividad 14: Diseño de Algoritmos Paralelos Actividad 14: Diseño de Algoritm...Actividad 14: Diseño de Algoritmos Paralelos Actividad 14: Diseño de Algoritm...
Actividad 14: Diseño de Algoritmos Paralelos Actividad 14: Diseño de Algoritm...RaymondCode
 
Matriz de integración de tecnologías- Paola Carvajal.docx
Matriz de integración de tecnologías- Paola Carvajal.docxMatriz de integración de tecnologías- Paola Carvajal.docx
Matriz de integración de tecnologías- Paola Carvajal.docxPaolaCarolinaCarvaja
 
Los mejores simuladores de circuitos electrónicos.pdf
Los mejores simuladores de circuitos electrónicos.pdfLos mejores simuladores de circuitos electrónicos.pdf
Los mejores simuladores de circuitos electrónicos.pdfodalistar77
 
Actividad 14_ Diseño de Algoritmos Paralelos.pdf
Actividad 14_ Diseño de Algoritmos Paralelos.pdfActividad 14_ Diseño de Algoritmos Paralelos.pdf
Actividad 14_ Diseño de Algoritmos Paralelos.pdfalejandrogomezescoto
 
Hazte partner: Club Festibity 2024 - 2025
Hazte partner: Club Festibity 2024 - 2025Hazte partner: Club Festibity 2024 - 2025
Hazte partner: Club Festibity 2024 - 2025Festibity
 
TENDENCIAS DE IA Explorando el futuro de la tecnologia.pdf
TENDENCIAS DE IA Explorando el futuro de la tecnologia.pdfTENDENCIAS DE IA Explorando el futuro de la tecnologia.pdf
TENDENCIAS DE IA Explorando el futuro de la tecnologia.pdfJoseAlejandroPerezBa
 
Presentación - Diseño de Algoritmos Paralelos - Grupo 2.pdf
Presentación - Diseño de Algoritmos Paralelos - Grupo 2.pdfPresentación - Diseño de Algoritmos Paralelos - Grupo 2.pdf
Presentación - Diseño de Algoritmos Paralelos - Grupo 2.pdfymiranda2
 
De Código a Ejecución: El Papel Fundamental del MSIL en .NET
De Código a Ejecución: El Papel Fundamental del MSIL en .NETDe Código a Ejecución: El Papel Fundamental del MSIL en .NET
De Código a Ejecución: El Papel Fundamental del MSIL en .NETGermán Küber
 
Inteligencia artificial dentro de la contabilidad
Inteligencia artificial dentro de la contabilidadInteligencia artificial dentro de la contabilidad
Inteligencia artificial dentro de la contabilidaddanik1023m
 
Inmersión global en ciberseguridad e IA en la conferencia RSA.pdf
Inmersión global en ciberseguridad e IA en la conferencia RSA.pdfInmersión global en ciberseguridad e IA en la conferencia RSA.pdf
Inmersión global en ciberseguridad e IA en la conferencia RSA.pdfOBr.global
 

Recently uploaded (14)

BEDEC Sostenibilidad, novedades 2024 - Laura Silva
BEDEC Sostenibilidad, novedades 2024 - Laura SilvaBEDEC Sostenibilidad, novedades 2024 - Laura Silva
BEDEC Sostenibilidad, novedades 2024 - Laura Silva
 
VIDEOS DE APOYO.docx E
VIDEOS DE APOYO.docx                                  EVIDEOS DE APOYO.docx                                  E
VIDEOS DE APOYO.docx E
 
El diseño de Algoritmos Paralelos.pdf - analisis de algortimos
El diseño de Algoritmos Paralelos.pdf - analisis de algortimosEl diseño de Algoritmos Paralelos.pdf - analisis de algortimos
El diseño de Algoritmos Paralelos.pdf - analisis de algortimos
 
BEDEC Proyecto y obra , novedades 2024 - Xavier Folch
BEDEC Proyecto y obra , novedades 2024 - Xavier FolchBEDEC Proyecto y obra , novedades 2024 - Xavier Folch
BEDEC Proyecto y obra , novedades 2024 - Xavier Folch
 
Actividad 14: Diseño de Algoritmos Paralelos Actividad 14: Diseño de Algoritm...
Actividad 14: Diseño de Algoritmos Paralelos Actividad 14: Diseño de Algoritm...Actividad 14: Diseño de Algoritmos Paralelos Actividad 14: Diseño de Algoritm...
Actividad 14: Diseño de Algoritmos Paralelos Actividad 14: Diseño de Algoritm...
 
Matriz de integración de tecnologías- Paola Carvajal.docx
Matriz de integración de tecnologías- Paola Carvajal.docxMatriz de integración de tecnologías- Paola Carvajal.docx
Matriz de integración de tecnologías- Paola Carvajal.docx
 
Los mejores simuladores de circuitos electrónicos.pdf
Los mejores simuladores de circuitos electrónicos.pdfLos mejores simuladores de circuitos electrónicos.pdf
Los mejores simuladores de circuitos electrónicos.pdf
 
Actividad 14_ Diseño de Algoritmos Paralelos.pdf
Actividad 14_ Diseño de Algoritmos Paralelos.pdfActividad 14_ Diseño de Algoritmos Paralelos.pdf
Actividad 14_ Diseño de Algoritmos Paralelos.pdf
 
Hazte partner: Club Festibity 2024 - 2025
Hazte partner: Club Festibity 2024 - 2025Hazte partner: Club Festibity 2024 - 2025
Hazte partner: Club Festibity 2024 - 2025
 
TENDENCIAS DE IA Explorando el futuro de la tecnologia.pdf
TENDENCIAS DE IA Explorando el futuro de la tecnologia.pdfTENDENCIAS DE IA Explorando el futuro de la tecnologia.pdf
TENDENCIAS DE IA Explorando el futuro de la tecnologia.pdf
 
Presentación - Diseño de Algoritmos Paralelos - Grupo 2.pdf
Presentación - Diseño de Algoritmos Paralelos - Grupo 2.pdfPresentación - Diseño de Algoritmos Paralelos - Grupo 2.pdf
Presentación - Diseño de Algoritmos Paralelos - Grupo 2.pdf
 
De Código a Ejecución: El Papel Fundamental del MSIL en .NET
De Código a Ejecución: El Papel Fundamental del MSIL en .NETDe Código a Ejecución: El Papel Fundamental del MSIL en .NET
De Código a Ejecución: El Papel Fundamental del MSIL en .NET
 
Inteligencia artificial dentro de la contabilidad
Inteligencia artificial dentro de la contabilidadInteligencia artificial dentro de la contabilidad
Inteligencia artificial dentro de la contabilidad
 
Inmersión global en ciberseguridad e IA en la conferencia RSA.pdf
Inmersión global en ciberseguridad e IA en la conferencia RSA.pdfInmersión global en ciberseguridad e IA en la conferencia RSA.pdf
Inmersión global en ciberseguridad e IA en la conferencia RSA.pdf
 

Angular Conceptos Practicos 1

  • 2.  Filosofia de AngularJS  Directivas Básicas  Controladoras y Servicios  Routing  Directivas (Introducción)
  • 3. Y un poco de Introducción
  • 4.    Aplicaciones que no vuelven a refrescar toda la página Pensadas para interacciones complejas Maximizar la experiencia de usuario 4
  • 5.    Aplicaciones que no vuelven a refrescar toda la página Pensadas para interacciones complejas Maximizar la experiencia de usuario 5
  • 6. 6
  • 7. 7
  • 8. 8
  • 9.  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 9
  • 12. 12
  • 13. 13
  • 14.  Framework para aplicaciones dinámicas.  Solución completa para el lado cliente.  Facilidad para el mantenimiento  Nunca mas ir y venir entre el DOM y el modelo 14
  • 16. 16
  • 18.  ng-app ◦ Inicial. Se puede indicar el modulo de la App  ng-show ◦ Muestra un elemento en base a una condición  ng-hide ◦ Oculta un elemento en base a una condición  ng-click ◦ Maneja el evento click sobre un elemento  http://docs.angularjs.org/api/
  • 19.  Convertir la barra de menu estatica ◦ Seleccionar y cambiar el color del link seleccionado ◦ Mostrar en la parte inferior el vinculo seleccionado ◦ No usar nada de javascript ◦ Base:  http://jsfiddle.net/scyrizales/TzNhB/embedded/result/ ◦ Final  http://jsfiddle.net/scyrizales/5ZxMm/embedded/result/ 19
  • 21.    Un concepto de angular que maneja interacciones del usuario Controla la data que viene de los “modelos” Uno de los “elementos” mas usados es $scope
  • 22.   Mediante el $scope se define el viewmodel inicial Las funciones del scope pueden ser usadas como manejadores de eventos 22
  • 23.     Este servicio sirve para unir la data a la vista Contexto para las expresiones usadas en la vista Provee un metodo para “observar” los cambios Provee un método para recibir cambios desde “afuera”. 23
  • 24.   Angular gestiona automáticamente que servicio llamar Sin embargo es mejor hacer lo siguiente: 24
  • 25.  Controladoras para separar funciones  Para dar ámbito a las expresiones   Para organizar el paso de información desde los servicios Para responder a los eventos del usuario 25
  • 26.  Realiza cambios en el DOM  Formatea el input (form controls)  Filtra el output (filters)  Comparte código con otras 26
  • 27. 27
  • 28.    Las vistas sirven para mostrar el viewmodel. Existen muchas directivas para lograr el comportamiento requerido Directivas en Angular: ◦ http://docs.angularjs.org/api/ 28
  • 29.  Hagamos un carrito de compra ◦ http://jsfiddle.net/scyrizales/k5Zfb/
  • 30.   Sirven para formatear los datos También se puede usar para filtrar arreglos 30
  • 31.  Refactorizemos el ejemplo anterior  Crearemos el filtro Moneda
  • 32.     Los servicios son la mejor forma de compartir información Permiten encapsular funcionalidad Gracias a la DI se pueden testear sin problemas Los servicios se manejan como Singletons 32
  • 33. 33
  • 34.  Refactorizemos el ejemplo anterior  Crearemos el servicio Carrito
  • 35. 35
  • 36.    El browser no sabe nada acerca de las vistas El browser siempre va a regresar a la pagina anterior Si hubieron varias vistas, lástima. 36
  • 37.   El browser tiene que saber que hay interacciones Tenemos que controlar el evento Hashchanged 37
  • 38.   Sirve para añadir nuevas rutas Dos métodos ◦ when ◦ otherwhise 38
  • 39. Parametro Descripción path La ruta que se compara contra $location.path route Objeto con diversas propiedades que indican varios tipos de configuraciones: •controller: La controladora a usar. •template: String que define el template a usar •templateUrl: ruta fisica de donde cargar un template •redirectTo: manejar redirecciones dentro de angular 39
  • 40.   Define ruta por defecto. Recibe como parametro un objeto route (explicado en la anterior diapositiva) 40
  • 41.  Directiva que se usa como contenedor de las vistas a renderizar 41
  • 42.   Se puede definir un template dentro del documento con el que trabajamos. Usamos la etiqueta script junto con el tipo text/ng-template 42
  • 46.   Las directivas es lo que hace diferente a AngularJS Permiten encapsular funcionalidad en puro html. 46
  • 47.  Necesidades especiales ◦ Imaginen poder usar este código para compartir un mismo formulario en cualquier parte de su aplicación 47
  • 48.  Encapsular un plugin de otra libreria  La directiva no existe  Las directivas que existen no cumplen con las necesidades. 48
  • 49. 49
  • 50. Propiedad Valor restrict Puede ser A,E,C y M que significan attribute, element, class, o comment scope Cada subpropiedad puede tener cualquiera de estos 3 valores: •@: el valor es de un solo sentido •=: el valor es de dos sentidos •&: guarda una referencia a una función o expresión template La base para escribir el código que usará la directiva replace Boolean que indica si se debe reemplazar el html original por el html generado por el template transclude Indica si se debe preservar el contenido de la declaración de la directiva en el html original, se usa en conjunto con ng-transclude controller La controladora que se usara para darle ambito al template, no siempre es necesario 50
  • 51. Propiedad Valor requires Indica si una directiva depende de otra link Función que realiza la configuración inicial de la directiva. Recibe cuatro parametros: function link(scope, iElement, iAttrs, controller) •scope: indica el objeto creado por la propiedad scope. •iElement: se refiere al objeto base de la controladora. Este vienen encapsulado en jqLite o Jquery (si es que se incluyo en el proyecto) •iAttrs: los atributos que se asignaron al html original de la directiva declarada •Controller: el controller de la directiva padre. Solo cuando se ha establecido la propiedad requires 51
  • 52.    Al usar directivas, se crean nuevos scopes, o se heredan los scopes padres. Si al definir la directiva, no se usa la propiedad scope, la directiva crea un nuevo scope que hereda todas las propiedades del scope de la controladora que contiene a la directiva. Al momento de usar la propiedad scope, se pierde toda conexión con el scope padre, y se genera un scope independiente para la directiva. 52
  • 53.   El método $watch (forma parte del scope) sirve para verificar cambios en alguna propiedad del scope. La sintaxis es: ◦ $scope.$watch(„propiedad‟, function(value){ }); ◦ La funcion suscrita es la forma de realizar los cambios necesarios ante un cambio en la propiedad suscrita  Se puede usar para verificar cambios en propiedades de la controladora padre inclusive. 53
  • 54.  Hagamos una calculadora ◦ http://jsfiddle.net/scyrizales/mUJhL/ 54
  • 55.  Hagamos un time formatter ◦ http://jsfiddle.net/scyrizales/rUbsE/ 55
  • 56.  Hagamos un tab panel ◦ http://jsfiddle.net/scyrizales/6C6Mv/ 56
  • 57. ¿Alguna pregunta? Sergio Castillo Front End Developer @scyrizales