Introduccion a AngularJS

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
oscar.gensollen@formativaperu.com
@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
ventas@formativaperu.com

Introduccion a AngularJS

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Similar to Introduccion a AngularJS

Similar to Introduccion a AngularJS (20)

Recently uploaded

Recently uploaded (20)

Introduccion a AngularJS