introduccion a angularjs
TRANSCRIPT
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
Agenda ¿Qué es AngularJS?
AngularJS en contexto
Modelo MVC
Usando AngularJS
Componentes de AngularJS
Demos: Fundamentos de JavaScript
¿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
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
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
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.
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.
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)
Componentes de AngularJS (1)
Módulos.
Controllers.
Vistas.
Directivas.
Filtros.
Servicios.
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”, []);
Aplicando Módulos Se usa el atributo ng-app
<html ng-app=“AppEjemplo”>
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
});
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
});
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>
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>
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”);
}
}
});
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”>
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;
};
});
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>
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;
});
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;
});
¿Quieres más información?Tenemos cursos en línea, en diversas modalidades
¡Contáctanos!
www.formativaperu.com