introduccion a angularjs
TRANSCRIPT
![Page 1: Introduccion a AngularJS](https://reader031.vdocuments.net/reader031/viewer/2022020307/55aefc481a28abb7668b46ba/html5/thumbnails/1.jpg)
Creación de
Aplicaciones Web con
AngularJS
Módulo 1: Introducción a AngularJS
Oscar Gensollen Arroyo
Microsoft Certified Trainer
MCSD Web + SharePoint
Arquitecto, Consultor en TI
@oscargensollen
![Page 2: Introduccion a AngularJS](https://reader031.vdocuments.net/reader031/viewer/2022020307/55aefc481a28abb7668b46ba/html5/thumbnails/2.jpg)
Agenda ¿Qué es AngularJS?
AngularJS en contexto
Modelo MVC
Usando AngularJS
Componentes de AngularJS
Demos: Fundamentos de JavaScript
![Page 3: Introduccion a AngularJS](https://reader031.vdocuments.net/reader031/viewer/2022020307/55aefc481a28abb7668b46ba/html5/thumbnails/3.jpg)
¿Qué es AngularJS?
AngularJS es el framework líder para la
construcción de aplicaciones dinámicas
basadas en JavaScript
Aprovecha las capacidades de HTML y
del navegador para la creación de
aplicaciones del lado-cliente
Aplica el patron MVC (Model-View-
Controller)
Es mantenido por Google
![Page 4: Introduccion a AngularJS](https://reader031.vdocuments.net/reader031/viewer/2022020307/55aefc481a28abb7668b46ba/html5/thumbnails/4.jpg)
AngularJS en contexto
Lleva la funcionalidad del lado servidor al
navegador
Dos modelos de aplicación web
Round-trip
Interacciones atendidas por el servidor
Single Page Applications
Interacciones atendidas por el cliente,
mediante componentes del lado-cliente y/o
interacciones al servidor mediante Ajax
![Page 5: Introduccion a AngularJS](https://reader031.vdocuments.net/reader031/viewer/2022020307/55aefc481a28abb7668b46ba/html5/thumbnails/5.jpg)
Modelo MVC (1)
Modelo: contiene los datos con los que el
usuario trabaja.
Debe contener los datos del dominio.
Contiene la lógica para crear, administrar
y modificar los datos del dominio
![Page 6: Introduccion a AngularJS](https://reader031.vdocuments.net/reader031/viewer/2022020307/55aefc481a28abb7668b46ba/html5/thumbnails/6.jpg)
Modelo MVC (2)
Controladoras: son los components que
conectan los datos del modelo con las
vistas.
Contienen la lógica para inicializar el
scope.
Contienen la lógica y comportamientos
requeridos por la vista para presentar
datos del scope, así como actualizar el
scope basandose en la interacción del
usuario.
![Page 7: Introduccion a AngularJS](https://reader031.vdocuments.net/reader031/viewer/2022020307/55aefc481a28abb7668b46ba/html5/thumbnails/7.jpg)
Modelo MVC (3)
Vistas: son definidas usando elementos
HTML, los cuales son mejorados y que
generan HTML mediante el uso de data
bindings y directivas.
Contienen la lógica y tags requeridos
para presentar datos al usuario.
![Page 8: Introduccion a AngularJS](https://reader031.vdocuments.net/reader031/viewer/2022020307/55aefc481a28abb7668b46ba/html5/thumbnails/8.jpg)
Usando AngularJS
AngularJS es el framework líder para la
construcción de aplicaciones dinámicas
basadas en JavaScript
Aprovecha las capacidades de HTML y del
navegador para la creación de aplicaciones
del lado-cliente
Aplica el patron MVC (Model-View-
Controller)
Es mantenido por Google
Usa una version compacta de jQuery
llamada jqLite
(https://docs.angularjs.org/api/ng/function/a
ngular.element)
![Page 9: Introduccion a AngularJS](https://reader031.vdocuments.net/reader031/viewer/2022020307/55aefc481a28abb7668b46ba/html5/thumbnails/9.jpg)
Componentes de AngularJS (1)
Módulos.
Controllers.
Vistas.
Directivas.
Filtros.
Servicios.
![Page 10: Introduccion a AngularJS](https://reader031.vdocuments.net/reader031/viewer/2022020307/55aefc481a28abb7668b46ba/html5/thumbnails/10.jpg)
Módulos Son los componentes de más alto nivel.
Sus 3 principales propósitos son:
Asociar una aplicación AngularJS con una region
de un documento HTML.
Actuar como un gateway para características
claves.
Ayuda a orzanizar el código y los componentes de
la aplicación.
var miApp = angular.module(“AppEjemplo”, []);
![Page 11: Introduccion a AngularJS](https://reader031.vdocuments.net/reader031/viewer/2022020307/55aefc481a28abb7668b46ba/html5/thumbnails/11.jpg)
Aplicando Módulos Se usa el atributo ng-app
<html ng-app=“AppEjemplo”>
![Page 12: Introduccion a AngularJS](https://reader031.vdocuments.net/reader031/viewer/2022020307/55aefc481a28abb7668b46ba/html5/thumbnails/12.jpg)
Controladoras Actúan como un conducto entre el modelo y las
vistas.
Entregan los datos y lógica requerida para un
aspecto de la aplicación.
Se definen usando el método Module.controller
miApp.controller(“registroCtrl”, function ($scope){
// sentencias
});
![Page 13: Introduccion a AngularJS](https://reader031.vdocuments.net/reader031/viewer/2022020307/55aefc481a28abb7668b46ba/html5/thumbnails/13.jpg)
Inyección de dependencias Angular inyecta las dependencias, según las va
encontrando, mayormente como parámetros de
las funciones
Mediante los parámetros, se hacen
“demandas”, solicitando a Angular que es lo que
se necesita
miApp.controller(“registroCtrl”, function ($scope,
$filter){
// sentencias
});
![Page 14: Introduccion a AngularJS](https://reader031.vdocuments.net/reader031/viewer/2022020307/55aefc481a28abb7668b46ba/html5/thumbnails/14.jpg)
Aplicando las controladoras a vistas
Las controladoras deben ser aplicadas a las
vistas, tal que Angular sepa que parte del
documento HTML forma la vista para
determinada controladora
Se usa el atributo ng-controller
<div ng-controller=“registroCtrl”>
<!– otras etiquetas -->
</div>
![Page 15: Introduccion a AngularJS](https://reader031.vdocuments.net/reader031/viewer/2022020307/55aefc481a28abb7668b46ba/html5/thumbnails/15.jpg)
Data-binding
Son expresiones que permiten enlazar a datos.
Se consumen los datos expuestos mediante el
component $scope.
Se pueden usar expresiones JavaScript.
<span>{{ nombres }}</span>
<span>{{ direccion || “(no indicada)” }}</span>
![Page 16: Introduccion a AngularJS](https://reader031.vdocuments.net/reader031/viewer/2022020307/55aefc481a28abb7668b46ba/html5/thumbnails/16.jpg)
Directivas
Permiten extender y mejorar el HTML para crear
aplicaciones web enriquecidas.
Se pueden usar directivas propias de Angular o
crear personalizadas.
Se usa el método Module.directive
miApp.directive(“resaltar”, function(){
return function (scope, element, attrs){
if (scope.distrito == attrs[“resaltar”]){
element.css(“color”,”yellow”);
}
}
});
![Page 17: Introduccion a AngularJS](https://reader031.vdocuments.net/reader031/viewer/2022020307/55aefc481a28abb7668b46ba/html5/thumbnails/17.jpg)
Aplicando Directivas a elementos HTML
Las directivas se pueden aplicar como
elementos o atributos en el HTML.
La función Factory se aplica cuando Angular
encuentra el elemento o atributo
correspondiente.
<h2 ng-controller=“registroCtrl” resaltar=“Surco”>
![Page 18: Introduccion a AngularJS](https://reader031.vdocuments.net/reader031/viewer/2022020307/55aefc481a28abb7668b46ba/html5/thumbnails/18.jpg)
Filtros
Son usados para formatear los datos mostrados
al usuario, dando consistencia a la presentación
dentro un modulo.
Se pueden usar filtros pre-definidos o crear
personalizados.
Se usa el método Module.filter
miApp.filter(“nombreDia”,function(){
var nombresDias =
[“Domingo”,”Lunes”,”Martes”,”Miercoles”,”Jueves”,”Vier
nes”,”Sabado”];
return function (input){
return angular.isNumber(input) ?
nombresDias[input] : input;
};
});
![Page 19: Introduccion a AngularJS](https://reader031.vdocuments.net/reader031/viewer/2022020307/55aefc481a28abb7668b46ba/html5/thumbnails/19.jpg)
Aplicando Filtros
Los filtros se aplican en expresiones de plantillas
dentro de las vistas.
Luego de la expresión se usa el caracter “|” y el
nombre del filtro:
<div>
Hoy es {{ dia || “(desconocido)” | nombreDia }}
</div>
![Page 20: Introduccion a AngularJS](https://reader031.vdocuments.net/reader031/viewer/2022020307/55aefc481a28abb7668b46ba/html5/thumbnails/20.jpg)
Servicios
Son objetos singleton que proporcionan
funcionalidad que se quiere utilizer a través de
toda la aplicación.
Algunas funcionalidades clave de Angular ya
son servicios, como $scope y $filter.
Se pueden crear servicios personalizados con el
método Module.service:
miApp.service(“meses”,function(){
this.mesActual = new Date().getMonth() + 1;
this.mesProximo = this.mesActual + 1;
});
![Page 21: Introduccion a AngularJS](https://reader031.vdocuments.net/reader031/viewer/2022020307/55aefc481a28abb7668b46ba/html5/thumbnails/21.jpg)
Ejemplo: Usando Servicios
Para acceder a un servicio, se define una
dependencia:
Angular usa inyección de dependencias para
ubicar el servicio y pasarlo como parámetro.
miApp.controller(“registroCtrl”,function($scope,
meses){
$scope.fecha = meses.mesActual;
});
![Page 22: Introduccion a AngularJS](https://reader031.vdocuments.net/reader031/viewer/2022020307/55aefc481a28abb7668b46ba/html5/thumbnails/22.jpg)
¿Quieres más información?Tenemos cursos en línea, en diversas modalidades
¡Contáctanos!
www.formativaperu.com