Instituto Tecnológico de Villahermosa

Ingeniería en Sistemas Computacionales

Programación Web

Alumno: Hugo Alberto Rivera Diaz

9no Semestre

Características de Angular JS

Prof.: Javier Romero Castro

09:00-10:00
 ANGULAR.JS

AngularJS es un framework Javascript que corre en el lado del cliente (navegador) y que

se centra en intentar dinamizar documentos HTML, lo que comunmente se conoce como

DHTML (Dynamic HTML). Normalmente esto se consigue haciendo uso de CSS y

Javascript de forma que, en función de los eventos que se produzcan en nuestra página

(acciones del usuario, respuestas del servidor vía AJAX o Websockets), se actualizan, crean

o eliminan determinados componentes de nuestro DOM (una imagen, un párrafo, o lo que

sea).

El objeto “document” de Javascript nos proporciona una serie de métodos como

“getElementById” o “createElement” que nos permiten manipular, crear o eliminar

elementos de nuestro documento HTML. No obstante, esto suele ser una tarea

relativamente tediosa y muchas veces compleja, sobre todo para la gente que no está

acostumbrada a trabajar con Javascript (es cierto que JQuery facilita mucho el trabajo).

AngularJS cambia un poco el enfoque de “dinamización” de documentos HTML estáticos

mediante la vinculación de elementos de nuestro documento HTML con nuestro modelo de

datos (data binding). De este modo, definimos un modelo de datos (Javascript) que se

corresponderá con determinadas partes de nuestro HTML y, siempre que haya cambios en

una parte, automáticamente se verán reflejados en la otra.

  2-Way-data-binding – Una de las características más importantes, se refiere a

que AngularJSesta continuamente observando los cambios que suceden tanto en la

Vista, así como en el Modelo y sincroniza datos entre estos.

Expresiones (expressions) – Cualquier valor que tenga que ser reflejado en la vista, se

coloca dentro de llaves dobles {{ expresión ó valor }} . También se pueden evaluar

expresiones como:

o {{ 1+2 }} —> reflejará 3.

o {{ a+b }} —> reflejará el valor de a más el valor de b.

 o {{ user.name }} —> reflejará el valor que viene de un attributo en un objeto.

o {{ item[index] }} —> reflejará el valor que se encuentra dentro de un

arreglo.

También podemos usar filtros (más adelante tocaremos el tema) para darle formato

al valor reflejado en la vista. Por ejemplo:

o {{ sueldo.mensual | currency }} —> reflejará “2000” en “$2,000.00”

 Directivas (directives) – Las directivas nos permiten crear nuestros propios

elementos

HTML. Usando las directivas, es la manera correcta de “manipular” el

DOM, en caso de tener que hacerlo. Esto permite decirle al compilador

HTML de Angularjs, que añada comportamiento específico a ese elemento HTML.

Podemos crear elementos HTML de 4 maneras:

o Como elemento (E) – <mi-elemento></mi-elemento>.

o Como atributo (A) – <div mi-elemento><,/div>.

o Como clase ( C ) – <div class=”mi-elemento”></div>.

o Como comentario – <!– directive: mi-elemento –>

El uso de las Directivas es muy extenso, por lo que tendremos un tutorial dedicado.

 Vistas y Rutas(views and routes) – Cuando una aplicación web depende de muchas

páginas HTML (vistas), estamos trabajando en una SPA (single page application),

lo que significa que podemos agregar un solo elemento HTML (contenedor) dentro

de un solo archivo HTML, y dentro de éste poder renderizar cada página que tenga
 que mostrarse, sin tener que recargar la URL. El render entre páginas dentro del

contenedor es inmediato.

Esto se logra con otra directiva llamada ng-view o ui-view, y una librería llamada angular-

route o angular-ui-router, temas que mostraremos en otro tutorial.

Es probable que no haya mencionado otras características de AngularJS, y esto puede

deberse a ciertas razones:

 Según la documentación de AngularJS, cada característica está dentro de una

categoría en específico (plantillas, estructura de la aplicación, otras características

y testing). Por lo que cada una es importante, pero dentro de ciertos esquemas de

una aplicación web.

 Cada programador/desarrollador encuentra una característica más importante que

otra, debido a que como tal, les ha salvado la vida (salvo su mejor opinión).

 Cada programador/desarrollador las puede dividir en “características” y

“componentes”.
LAS PRINCIPALES CARACTERÍSTICAS DEL ANGULAR.JS:

 1 - SPA - Single Page Application (aplicación de una sola página)

AngularJS utiliza el concepto de aplicación de una página sólo, donde una vez que se carga

la página, todas las demás actualizaciones se realizan a través de solicitudes AJAX y

renderizaciones parciales en la página.

Utilizando AJAX para renderizaciones parciales disminuye considerablemente la cantidad

de datos que necesitan ser traficados entre el cliente y el servidor, aumentando el

rendimiento y la experiencia del usuario al utilizar el sistema.

 2 - Client-Side Plantillas (renderizado en el lado del cliente)

AngularJS trabaja con un concepto de renderizar la página directamente en el lado del

cliente, es decir, directamente en el navegador del usuario.

Mientras que la mayoría de las aplicaciones web procesan la información y generan el

HTML que se envía al cliente directamente en el servidor, AngularJS recibe los datos en

formato "puro", generalmente en JSON y procesa los datos en el navegador, renderizando

la página en tiempo real directamente en el cliente.

La gran ventaja de este formato de renderizado es no sobrecargar demasiado el

procesamiento de los servidores ya que sólo necesitará enviar los datos sin procesamiento

al cliente, que al recibirlos será responsable del procesamiento y renderización de la página.

Este formato de representación en el cliente junto con el concepto de SPA, explicado en el

ítem anterior, hace que el rendimiento de la aplicación sea superior y que una cantidad de

datos mucho menor necesite ser enviada entre el cliente y el servidor.

  3 - MVC - Model View Controller

El AngularJS no es un nuevo paradigma de desarrollo, por el contrario, utiliza las mejores

prácticas creadas hasta hoy para su mejor desempeño, así que utiliza como base el estándar

MVC como su estructura básica, donde la idea básica es separar el código entre el " gestión

de datos (model), lógica (controlador) y presentación de datos (view).

Para eso el AngularJS a view es el propio DOM (Document Object Model), los controllers

son clases Javascript y el model son los datos almacenados en formato de objetos.

 4 - Data Binding

Data binding es el recurso utilizado por AngularJS para facilitar el desarrollo del sistema

mientras manipula y se encarga de actualizar la información en la página.

A través de la adición de algunos controles (atributos) directamente en el HTML de la

página, el AngularJS puede identificar y asignar los atributos a ser actualizados.

Una vez el mapeo hecho, el AngularJS cuidará de todo el resto automáticamente, no será

necesaria la creación de código extra para nada, sólo la inclusión de atributos, lo que

mantiene el HTML simple y limpio, de fácil mantenimiento y visualización tanto por parte

del usuario el desarrollador y el diseñador, que no encontrará dificultades para la creación

de la interfaz.

 5 - Inyección de dependencia

La inyección de dependencia es otro concepto ampliamente utilizado por la mayoría de los

lenguajes y marcos de mercado, y con el AngularJS no sería diferente, también hace uso

exhaustivo de este recurso.

La Inyección de Dependencia consiste básicamente en proporcionar recursos adicionales

necesarios en la aplicación de forma transparente al usuario, de modo que el desarrollador

sólo deberá solicitar un recurso, que será inyectado por el framework y estará disponible

para uso.

Vamos a un ejemplo práctico, imagine que usted necesita efectuar una redirección en el

AngularJS, por defecto esa característica no estará disponible, pero es posible indicar al

AngularJS la necesidad de su utilización. Una vez indicado la necesidad del uso de este

objeto, el AngularJS pondrá a disposición tal recurso para su uso en el controlador.

 6 - Directivas

Las directivas es una característica que le permite crear su propia plantilla HTML. A través

de directivas es posible crear contenidos específicos que uno viene aplicado a un

componente HTML en forma de atributo generará una vista personalizada.

 BIBLIOGRAFÍA

Angular Js. (29 de 11 de 2014). Recuperado el 02 de 10 de 2017, de Las principales

características del AngularJS: http://angularjsunijorge.blogspot.mx/2014/11/as-

principais-caracteristicas-do_29.html

HTML5Fácil. (s.f.). Recuperado el 02 de 10 de 2017, de Las principales características de

Angularjs: http://html5facil.com/tutoriales/las-principales-caracteristicas-de-

angularjs/

Versus. (s.f.). Recuperado el 02 de 10 de 2017, de AngularJS: Características más

importantes: https://versus.com/es/angularjs

Widecom. (04 de 01 de 2015). Recuperado el 02 de 10 de 2017, de Características de

AngularJS – Parte 2: http://www.widecom.net/2015/01/04/caracteristicas-de-

angularjs/