Angularjs Apuntes 1

Introducción a AngularJS

¿Qué es AngularJS? Es un proyecto de código abierto, abierto, realizado en JavaScript, JavaScript, (desarrollado, mantenido e impulsado por la gente de Google) que contiene un conjunto de librerías útiles librerías útiles para el desarrollo de aplicaciones web y web y propone una serie de patrones de diseño para diseño  para llevarlas a cabo. En pocas palabras, es lo que se conoce como un framework  framework  para el desarrollo, en este caso sobre el lenguaje JavaScript  JavaScript  con programación del lado del cliente.

¿Qué es un framework? La palabra inglesa "framework" (marco de trabajo) define, en términos generales, un conjunto estandarizado de conceptos, prácticas y criterios para enfocar un tipo de problemática particular que sirve como referencia, para enfrentar y resolver nuevos problemas de índole similar. En el desarrollo de software, un framework o infraestructura digital, es una estructura conceptual y tecnológica de soporte definido, normalmente con artefactos o módulos de software concretos, que puede servir de base para la organización y desarrollo de software. Típicamente, puede incluir soporte de programas, bibliotecas, y un lenguaje interpretado, entre otras herramientas, para así ayudar a desarrollar y unir los diferentes componentes de un proyecto. Representa una arquitectura de software que modela las relaciones generales de las entidades del dominio, y provee una estructura y una especial metodología de trabajo, la cual extiende o utiliza las aplicaciones del dominio.

Características de un framework - Inversión de Control - Comportamiento por defecto - Extensibilidad - Son incompletos, no usables al 100%, deben ser completados - Dirigen la solución o proyecto

Patrón de diseño MVC

El modelo–vista–controlador (MVC) es un patrón de arquitectura de software que separa los datos y la lógica de negocio de una aplicación de la interfaz de usuario y el módulo encargado de gestionar los eventos y las comunicaciones. Para ello MVC propone la construcción de tres componentes distintos que son el modelo, la vista y el controlador, es decir, por un lado define componentes para la representación de la información, y por otro lado para la interacción del usuario. Este patrón de arquitectura de software se basa en las ideas de reutilización de código y la separación de conceptos, características que buscan facilitar la tarea de desarrollo de aplicaciones y su posterior mantenimiento.

Patrón de diseño MVC en AngularJS  Vistas: Será el HTML y todo lo que represente datos o información. Controladores:  Se encargarán de la lógica de la aplicación y sobre todo de las llamadas "Factorías" y "Servicios" para mover datos contra servidores o memoria local en HTML5. Modelo de la vista: En Angular el "Modelo" es algo más de aquello que se entiende habitualmente cuando te hablan del MVC tradicional, o sea, las vistas son algo más que el modelo de datos. Toda esa información, que es útil para el programador pero que no forma parte del modelo del negocio, es a lo que llamamos el "scope" que es el modelo en Angular.

¿Qué ofrece AngularJS? Client-side template El sistema de plantillas en AngularJS es diferente del utilizado en otros frameworks. Por lo general es el servidor el encargado de mezclar la plantilla con los datos y devolver el resultado al navegador. En AngularJS el servidor proporciona los contenidos estáticos (plantillas) y la información que se va a representar (modelo) y es el cliente el encargado de mezclar la información del modelo con la plantilla para generar la vista. Data binding Con AngularJS podemos sincronizar el modelo y la vista automáticamente utilizando ciertas directives del framework. Esta sincronización es bidireccional, es decir, la información se sincroniza tanto si cambia el valor en la vista como si lo hace el valor en el modelo.

¿Qué ofrece AngularJS? (Cont.) Directives Las directives son el plato fuerte de AngularJS. Mediante el uso de las mismas podemos extender la sintaxis de HTML y darle el comportamiento que deseemos. Podemos crear directives a nivel de elemento, de atributo, de clase y de comentario. Filters Los filters nos permiten modificar el modo en el que se va a presentar la información al usuario. La utilización de los mismos es similar a los Pipeline de Unix: {{ expresion | filtro }} Donde expresion puede ser cualquier tipo de expresión de AngularJS, como una variable del $scope, y filtro el nombre del filtro que le queremos aplicar a la expresión.

¿Qué ofrece AngularJS? (Cont.) Services Los services  son los encargados de comunicarse con el servidor para enviar y obtener información que después será tratada por los controllers para mostrarla en las vistas. Esta parte es más compleja de explicar con un ejemplo, por el momento nos basta con saber que los services se pueden dividir en tres categorías: services, factories y providers. Uno de los services incluidos en el framework es $resource, el cual nos permite encapsular la interacción con servicios RESTful sin tener que tratar directamente con las llamadas http.

Dos mundos en AngularJS

Ahora tenemos que examinar AngularJS bajo otra perspectiva, que nos facilite entender algunos conceptos y prácticas habituales en el desarrollo. Para ello dividimos el panorama del framework en dos áreas. Parte del HTML: Es la parte declarativa, con las vistas, así como las directivas y filtros que nos provee AngularJS, así como los que hagamos nosotros mismos o terceros desarrolladores. Parte Javascript puro: Que serán los controladores, factorías y servicios.

NG-APP Las directivas  son atributos que extienden a los ya existentes en HTML y comienzan con el prefijo ng- . La directiva ng-app inicializa una nueva aplicación de AnguarJS.  Sin esta directiva no podemos comenzar a trabajar con nuestra aplicación. En el ejemplo anterior se ha utilizado también la directiva ng-init que inicializa variables y la directiva ng-model que vincula un elemento de formulario con un dato para que este sea también manipulado por el usuario

NG-BIND Me permite mostrar el scope o elemento manipulado en la vista. Si bien es una directiva útil suele reemplazarse por el uso de {{expresión}} que es más fácil y útil al momento de trabajar, por ejemplo: Existe otra forma de mostrar un dato en la vista que es de la siguiente forma:

{{dato}} Por supuesto esta forma es más práctica y rápida para manipular nuestro html  y en muchos casos nos termina siendo más conveniente.

mi {{dato}}

NG-CONTROLLER  ● ●

●

Me permite vincular un controlador con un elemento de mi html Recordemos que el trabajar asignado un controlador a cierta parte de mi html también genera un contexto o ámbito de acción de ese controlador. Por tanto el controlador que manipula un dato para ser mostrado en la vista, no podrá mostrar ese dato si no fijamos correctamente el controlador anidando aquellos elementos o expresiones que mostrarán el valor de ese scope o dato

Por ejemplo:

var app = angular.module('miApp', []) app.controller('miCtrl', function($scope){   $scope.dato = 'valor del dato' }) {{dato}}

NG-MODEL  Vincula un elemento de formulario con mi aplicación y es lo único obligatorio para poder a su vez acceder a los datos de ese elemento de formulario (vista) y También manipularlo desde el código (controlador). Por caso:

<script> var app = angular.module('miApp', []) app.controller('miCtrl', function($scope){   $scope.nombre = 'manuel' })

NG-SHOW ● ●

Me permite mostrar o no cierta información en mi documento. La verdad es que es una directiva que puede utilizarse de manera compleja si se quiere y daremos algunos ejemplos de la misma:

Como toggle:

Haceme click Vinculado a un ng-model  .

NG-SHOW Con un ng-model más complejo:

Como producto de una función

Nota: ng-show muestra un elemento cuando un es true y ng-hide lo esconde cuando es true, luego en el resto de los ejemplos ambos funcionarían con las mismas posibilidades.

FUNCIONES El llamado a funciones desde angular es muy sencillo tan sólo hay que anteponer El prefijo ng. Por ejemplo: <script> var app = angular.module('miApp', []) app.controller('miCtrl', function($scope){   $scope.alerta = function(nombre){  alert('hola sos' + nombre)  }  }) Carlos

NG-SWITCH Tiene un sistema similar a ng-show y ng-hide pero me permite mostrar u ocultar elementos de una manera más cómoda si es que tenemos varias opciones para mostrar u ocultar . Por ejemplo: Opcion 1 Opcion 2 opcion 2  ...

NG-IF La verdad es que si bien en su descripción más técnica dice que remueve elementos si se da que un dato es true o verdadero sería igual su funcionamiento a ng-show y ng-hide en todo caso, también se lo utiliza para plantear ciertas situaciones como por caso:

NG-REPEAT Si queremos iterar dentro de un arreglo de objetos lo haremos de la siguiente forma: var app = angular.module('miApp', []) app.controller('ctrl', function($scope){   $scope.datos = [{nombre: 'nombre1', apellido: 'apellido1'},{nombre: 'nombre2', apellido: 'apellido2'} ]   }