4.2 Angular2

AngularJS
AngularJS
JJD174 Desarrollo WEB con AngularJS- 2014, Netmind SL, Barcelona - 1,0 Junio 2015
AngularJS
Vamos a revisar los objetos bsicos que presenta AngularJS

Ejemplos muy sencillos
Que expliquen la idea central que pretende cada componente
Para ello, y ya que JavaScript no es un lenguaje compilado,

tenemos que ver el proceso de carga inicial (Bootstrapping)
El proceso de arranque proporciona una idea de la forma en

que se enlazan muchos de los componentes del marco de
trabajo.
Y de cmo se enlazan con el DOM
AngularJS
Vamos a revisar los objetos bsicos que presenta AngularJS
AngularJS
Se carga una pgina HTML que incluye una referencia a

AngularJS
Angular comienza su trabajo recorriendo el rbol DOM buscando el

elemento que contiene la directiva ng-app
Una vez que se encuentra ng-app, Angular utilizar el objeto

$injector, que es la forma en que implementa el Patrn de Diseo
conocido como Inyeccin de Dependencias (DI).
En pocas palabras, un objeto ser el encargado de suministrar las

instancias de otros en lugar de tenerlo que hacer nosotros mismos.
El $injector de Angular acta como un "centro de registro" para el

objeto $provide, que suministra el acceso a un montn de servicios.
AngularJS
El objeto $provide es responsable de mantener las

referencias a todos los objetos registrados, de crear
instancias de tipos, invocar mtodos y cargar mdulos.
Un aspecto crucial es que el inyector inicializa el objeto raz

$scope, que servir como contexto para el modelo de las
aplicaciones.
Estos scopes son fundamentales para la separacin de los

distintos contextos de datos
AngularJS
En AngularJS, podemos definir 5 piezas fundamentales
Mdulos: Mediante ellos, podemos crear las distintas "reas de la

aplicacin" (o contextos de trabajo, si se quiere), adems de servir
como mecanismos de ayuda en la creacin de otros objetos (que se
asocian con esas reas de forma automtica).
Servicios: Son los que contienen la lgica de negocio y que
podemos construir a partir de unas patrones de diseo.
Controladores: Responden a las acciones sobre el modelo e
implican la respuesta de la Interfaz de Usuario
Directivas: Extienden el HTML en forma de atributos personalizados
como hemos visto en los primeros ejemplos.
Filtros: Nos permiten modificar las salidas de la informacin, las
cuales podemos personalizar a nuestro gusto.
AngularJS
Ten presente que en AngularJS existe un entramado y un

conjunto de relaciones muy grande entre los objetos
Esto es necesario para conseguir el modelo de
programacin declarativo
Se tiende a decir qu se quiere obtener, ms que cmo se
deben hacer las cosas para obtenerlo.
AngularJS
Los controladores responden a las acciones sobre la Interfaz de Usuario,

modificando el modelo
Y debido al enlace a datos (Databinding), la salida final en pantalla
Podemos crearlos en un fichero separado
Podemos insertarlo directamente junto a la vista
Si es una prueba de concepto, podemos agruparlo todo en una sola pgina.
Recordemos el cdigo inicial:
<body ng-app="">
<input type="text" ng-model="modelo" />
<span>{{ modelo }}</span>
</body>
Aqu no parece haber ningn controlador (y no lo hay) y sin embargo la

aplicacin hace lo que se espera
Nuestro modelo de consta de un nico elemento con un atributo ng-model que
lo define como el modelo y la nica interaccin que puede cambiarlo es la
intervencin del usuario introduciendo informacin en la caja de texto.
AngularJS
Operativa
Cualquier referencia en sintaxis moustache que se haga
posteriormente es analizada por el contexto
En este fragmento de cdigo lo hemos situado a nivel de <body>,
con la directiva ng-app).
AngularJS "sabe" que debe "revisar" todas las etiquetas
comprendidas en su rea de contexto, en busca de acciones previas
a la "renderizacin" del cdigo HTML.
Cuando encuentra ng-app, asocia el contexto con todo el cuerpo
del documento
Cuando analiza la definicin ng-model "sabe" que, cuando el
contenido posterior haga referencia a ese identificador, debe
sustituir la referencia por su valor correspondiente en ese momento.
AngularJS
Creacin de un controlador por cdigo

Cmo sera la implementacin equivalente al cdigo anterior, de forma que
aportsemos ya un poco de divisin de responsabilidades?
<body ng-app="" ng-controller="TituloController">


<h2>{{titulo}}</h2>
<input type="text" ng-model="modelo" />
<span>{{ modelo }}</span>
<script>
var texto = "Demo inicial de controladores en AngularJS"
function TituloController($scope) {
$scope.titulo = texto;
}
</script>
</body>
AngularJS
Cuando hacemos referencia a un servicio de AngularJS, se pone en

marcha un mecanismo denominado Factory que es el encargado de
suministrarnos una instancia de ese servicio
Interviene la arquitectura de IoC o Inversin de Control).
Esa instancia, ser de tipo Singleton, o sea que solo puede haber una de
ellas operativa en un instante dado de la ejecucin.
Una vez que disponemos de una instancia de $scope, cualquier referencia a
un miembro de este objeto (aunque no haya sido declarado explcitamente
en ninguna parte) es inicializada
Y se le asigna el valor que se le indique (en el ejemplo, el identificador titulo
es asignado al valor de la variable texto).
Cualquier referencia posterior mediante sintaxis "moustache" (o va
JavaScript) a ese identificador interpretar su valor y lo insertar en el
elemento que contenga los dos pares de llaves {{ titulo }}.
AngularJS
AngularJS
Un problema fundamental: divisin modular de

componentes de la aplicacin.
JavaScript "vuelca en el mismo saco" (el objeto Global) todos los
elementos definidos en los distintos ficheros que carga una pgina
La prxima versin de JavaScript (ECMAScript 6), va a contar con

algunas de estas caractersticas pero est an en fase de terminacin
El sistema de mdulos de AngularJS aporta ese concepto y, al mismo

tiempo, permite asociar a cada uno de los mdulos un conjunto de
recursos propios (como si se tratase de un namespace)
De esta forma, se puede mantener una correcta divisin lgica de

responsabilidades y competencias.
AngularJS
Qu es un mdulo?
Un objeto JavaScript creado por AngularJS que permite definir y
asociar recursos fundamentales de la aplicacin con ciertas reas de
la misma.
AngularJS
Explicacin
Mediante un mdulo (Module) podemos crear diferentes objetos, y
entre ellos, todo lo referente a la configuracin (mtodo config de
este objeto).
Esa configuracin nos permite estructurar el acceso a nuestra
aplicacin mediante rutas URL (routes), que es el modelo que siguen
las aplicaciones MVC en general y las SPA en particular.
Cuando una ruta es invocada en el navegador, acta lo definido en el
mdulo, determinando qu controlador atiende esa peticin y qu
vista est asociada con l.
A su vez, esa vista puede contener un conjunto de directivas que
deber resolver en tiempo de ejecucin antes de presentar los datos.
Por su parte, el controlador puede haber solicitado de los objetos
Factory disponibles aquellos servicios que necesite para realizar su
tarea.
AngularJS
Qu acciones se asocian con los Mdulos?
Un mdulo puede definir configuraciones, pero tambin filtros,

directivas y controladores, as como crear o interactuar con
factoras, servicios, providers y valores (values).
AngularJS
Para crear un mdulo usamos el mtodo module:
var app = angular.module('appCiclistas', []);
Ms adelante, podemos asignar un controlador a ese

mdulo mediante el cdigo siguiente:
app.controller("ListadoController", function ($scope, $http) {
$http.get('Datos/Ciclistas.json').success(function(ListaCiclistas) {
$scope.ciclistas = ListaCiclistas;
});
});
Con esto, ya tenemos los datos en nuestro contexto

($scope), y podemos enlazarlos a la interfaz de usuario.
AngularJS
AngularJS
Entendemos por "routing" la caracterstica mediante la cual

establecemos patrones de direcciones URL vinculadas a
nuestra pgina principal.
Cuando sean solicitadas por los clientes nos mostrarn

diversas vistas o versiones de la misma pgina dependiendo
de la sintaxis utilizada en la llamada.
Esto es muy importante en aplicaciones SPA, ya que estos

patrones van a permitir al usuario incluso acceder a
opciones CRUD sobre el conjunto de datos
A partir de una direccin URL asociada con la accin
correspondiente: listar, aadir, borrar, etc.
AngularJS
La forma en que AngularJS implementa este servicio es a

travs de un mtodo del objeto module llamado config()
Este mtodo recibe un array de objetos de configuracin
En el caso del "routing", el objeto encargado de esa configuracin es
el servicio $routeProvider.
Para que todo el modelo funcione como se espera, la

directiva ng-view aporta otra pieza clave.
Cuando a un elemento del DOM le aadimos este atributo,
AngularJS entiende que se es el lugar donde debe insertar la
informacin correspondiente a la vista que se solicite en ese
momento
Vemos una demo inicial muy sencilla con solo 2 vistas.
AngularJS
El cdigo de una vista puede ser una pgina cualquiera o un

fragmento de ella del siguiente aspecto:

<h3>Esta es la <strong>Vista 1</strong></h3>
Adems necesitaremos:
Una directiva ng-app apuntando al nombre del mdulo que
crearemos en la parte de "script"
Un elemento <div> que incluir una directiva ng-view, para indicar
a AngularJS que se es el elemento donde debe insertar el
contenido de las vistas.
Una referencia a las libreras de AngularJS (como manejamos
Routing se requiere tambin "angular-routing.js").
Un "script" personalizado, donde crearemos el mdulo y llamaremos
al mtodo de configuracin.
AngularJS
En suma:
<body ng-app="demoConfig">
<h2>Pgina Principal</h2>
<hr />
<div id="Contenedor" ng-view></div>
<hr />
<h4>Pie de pgina</h4>
<script>
angular.module("demoConfig", ['ngRoute']).
config(['$routeProvider', function ($routeProvider) {
$routeProvider.
when('/', {templateUrl:'Vistas/Vista1.html'}).
when('/Vista2', { templateUrl: 'Vistas/Vista2.html' }).
otherwise({ redirectTo:'/'})
}]);
</script>
</body>
AngularJS
Y en la salida tendramos:
Observa la sintaxis de las URL: en el primer caso no se

incluye ms que la que la barra (/), mientras que en el
segundo se indica el nombre de la vista
AngularJS
AngularJS
Son mecanismos que permiten extender fcilmente los

recursos del programador
Se presentan como recursos disponibles a travs de una
sintaxis comn: todos los servicios son referidos usando el
prefijo $: $http, $location, $scope, etc.
Todos ellos tienen algunas otras caractersticas en comn
Modo Singleton, esto es, que solo va a haber una instancia de cada
servicio en nuestra aplicacin
Esa instancia se compartir en los diversos recursos que la utilicen
posteriormente.
Nos permitien simplificar notablemente la construccin de
controladores
AngularJS
Algunos de los ms utilizados son:
$http: Peticiones AJAX

$q: Creacin de "Promises" (procesos asncronos en JavaScript)
$location: Gestin de la URL activa
$timeout, $interval: Equivalentes a sus homlogas de JavaScript
(creacin de temporizadores), pero incluyendo servicios de
notificacin.
$window: Equivalente a su homlogo de JavaScript (acceso a
recursos del navegador)
$anchorScroll: Para manejar cambios de estado en la pantalla
$log: Equivalente a Console.Log de JavaScript
AngularJS
Para utilizarlos, basta con referenciarlos en la funcin que

los vaya a manejar, como hacamos al leer los datos del
fichero JSON:
function CiclistaController($scope, $http) {

$http.get('Datos/Ciclista1.json')
.success(function (DatosCiclista) {
$scope.ciclista = DatosCiclista;
})
.error(function () {
alert('Fallo en la lectura');
});
}
AngularJS
Hay un aspecto importante a la hora de utilizar este servicio

Es posible que la funcin devuelva un error de que no se ha podido leer
el fichero si el tipo MIME json no ha sido declarado como tipo vlido en
el servidor Web.
Si usamos IIS o IIS Express, la solucin es tan fcil como indicrselo en el
fichero de configuracin (Web.config).
Podemos aadir lo siguiente para "registrar" el tipo MIME requerido:
<system.webServer>
<staticContent>
<mimeMap fileExtension=".json" mimeType="application/json" />
</staticContent>
</system.webServer>
Respecto a los tipos MIME, la config. para Windows e IIS es extensible

para otros servidores, tanto en sistemas iOS como en Linux (aunque las
versiones modernas de Apache, por ejemplo, suelen reconocer el tipo
JSON de manera predeterminada).
AngularJS
AngularJS
Mediante los filtros podemos indicar una serie de

modificaciones a un valor de salida, mediante
interpolaciones en la sintaxis moustache que interpreta una
expresin.
La sintaxis cannica (oficial) de un filtro es como sigue:
{{ expresin | nombreFiltro : parmetro1 : ...parmetroN}}
Los filtros se aaden mediante el smbolo |, seguido del nombre del

filtro
Si queremos aadir ms de un filtro, solo tenemos que concatenar
los que queramos a continuacin utilizando el mismo smbolo
Opcionalmente, algunos filtros admiten argumentos de
configuracin
AngularJS
AngularJS
AngularJS

4.2 Angular2

Cargado por

Información del documento

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

4.2 Angular2

Cargado por

Copyright:

Formatos disponibles

AngularJS

Vamos a revisar los objetos bsicos que presenta AngularJS

Para ello, y ya que JavaScript no es un lenguaje compilado,

El proceso de arranque proporciona una idea de la forma en

Vamos a revisar los objetos bsicos que presenta AngularJS

Se carga una pgina HTML que incluye una referencia a

Angular comienza su trabajo recorriendo el rbol DOM buscando el

Una vez que se encuentra ng-app, Angular utilizar el objeto

En pocas palabras, un objeto ser el encargado de suministrar las

El $injector de Angular acta como un "centro de registro" para el

El objeto $provide es responsable de mantener las

Un aspecto crucial es que el inyector inicializa el objeto raz

Estos scopes son fundamentales para la separacin de los

En AngularJS, podemos definir 5 piezas fundamentales

Mdulos: Mediante ellos, podemos crear las distintas "reas de la

Ten presente que en AngularJS existe un entramado y un

Los controladores responden a las acciones sobre la Interfaz de Usuario,

Aqu no parece haber ningn controlador (y no lo hay) y sin embargo la

Creacin de un controlador por cdigo

<body ng-app="" ng-controller="TituloController">

Cuando hacemos referencia a un servicio de AngularJS, se pone en

Un problema fundamental: divisin modular de

La prxima versin de JavaScript (ECMAScript 6), va a contar con

El sistema de mdulos de AngularJS aporta ese concepto y, al mismo

De esta forma, se puede mantener una correcta divisin lgica de

Qu acciones se asocian con los Mdulos?

Un mdulo puede definir configuraciones, pero tambin filtros,

Para crear un mdulo usamos el mtodo module:

var app = angular.module('appCiclistas', []);

Ms adelante, podemos asignar un controlador a ese

Con esto, ya tenemos los datos en nuestro contexto

Entendemos por "routing" la caracterstica mediante la cual

Cuando sean solicitadas por los clientes nos mostrarn

Esto es muy importante en aplicaciones SPA, ya que estos

La forma en que AngularJS implementa este servicio es a

Para que todo el modelo funcione como se espera, la

El cdigo de una vista puede ser una pgina cualquiera o un

Observa la sintaxis de las URL: en el primer caso no se

Son mecanismos que permiten extender fcilmente los

Algunos de los ms utilizados son:

$http: Peticiones AJAX

Para utilizarlos, basta con referenciarlos en la funcin que

function CiclistaController($scope, $http) {

Hay un aspecto importante a la hora de utilizar este servicio

Respecto a los tipos MIME, la config. para Windows e IIS es extensible

Mediante los filtros podemos indicar una serie de

Los filtros se aaden mediante el smbolo |, seguido del nombre del

También podría gustarte