Andres Felipe Blog's

My WordPress Blog

Mes: enero 2016

6. Expresiones con AngularJS

angularjs-logo

Las expresiones son usadas para empaquetar datos en el HTML. Las expresiones son escritas dentro de corchetes dobles {{expresión}}. Las expresiones tienen el mismo comportamiento que la directiva ng-bind. La expresiones de una aplicación con AngujarJS son puro javascript y las salidas son las que voy explicar a continuación.

Expresiones para números:

La suma de 100 + 500 es {{100 + 500}}
La resta de 5 - 10 es {{ 5 - 10 }}

Expresiones con cadenas de texto:

ID y Nombre: {{estudiantes[0].id + " -- " + estudiantes[0].nombre}}

Expresiones con objetos:

La cantidad de caracteres para <b>{{estudiantes[1].nombre}}</b> es {{estudiantes[1].nombre.length}}

[gist]fd4c0110b3f1a25ef530[/gist]

Ejecutarhttps://jsfiddle.net/AFelipeTrujillo/7606jfct/

5. Directivas en AngularJS

angularjs_curso

Las directivas en AngularJS son utilizadas para extender funcionalidades del HTML. son atributos especiales inicializados con el prefijo ng. En el siguiente artículo, discutiremos las siguientes  directivas:

ng-app: esta directiva inicializa una aplicación basada en AngularJS

ng-init: esta directiva define los datos iniciales de la  aplicación.

ng-model: esta directiva define la variables del modelo a utilizar en el modelo.

ng-repeat: esta directiva tiene la capacidad de repetir los elementos de un HTML basado en una colección.

Directiva ng-app

Esta directiva se usa para inicializar una aplicación en AngularJS. Esto define el elemento raíz de la  aplicación y automáticamente carga los componentes necesarios del framework. También se usa para iniciar varias módulos en una sola  aplicación. En el siguiente ejemplo, se definirá por defecto una aplicación usando la directiva ng-app en un elemento div.

[gist]ec1d52802a199b8f7020[/gist]

Directiva ng-init

Esta directiva inicializa los datos en un aplicación AngularJS. En el siguiente ejemplo se creara un arreglo de contactos definidas por medio de la notación JSON.

[gist]6a082083d27759501c2a[/gist]

Directiva ng-model

Esta directiva define las variables del modelo ha ser utilizadas en un aplicación AgularJS. En el siguiente ejemplo, se definirá una variable con el nombre “email“.

[gist]0f643cd60a85a650134d[/gist]

Directiva ng-repeat

Esta directiva tiene la capacidad de repetir elementos HTML basado en una colección de elementos. En el siguiente ejemplo se iterara la lista de contactos anterior:

[gist]5f272a97bbd262d07e08[/gist]

Ejemplo Completo

[gist]5ad4c1fc536cf31b2692[/gist]

Ejecutarhttps://jsfiddle.net/7t1592u5/

4. Hola Mundo con AngularJS

Antes de empezar con la creación del famoso HolaMundo usando AngularJS. Vamos a analizar las partes más importantes de una aplicación con AngularJS. Entonces una aplicación web basada en este framework, consiste de tres importantes partes:

ng-app – Directiva que enlaza AngularJS con el HTML

ng-model – Directiva que empaqueta los valores de datos que provienen de los controles de entrada.

ng-bind – Directiva que encapsula los datos de AngularJS en las etiquetas HTML

Pasos para la creación de una aplicación con AngularJS

Paso 1 – Cargar el Framework
Utilizando la etiqueta <script>, se carga el CDN de AngularJS

Paso 2 – Definir el nombre la aplicación con la directiva ng-app

Paso 3 – Definir la variable del modelo con la directiva ng-model

[gist]44c91f11d6475b754692[/gist]

Ejecutar: http://jsfiddle.net/AFelipeTrujillo/ry8xx74o/1/

3. Instalación del Ambiente de Desarrollo

En este articulo, vamos hablar sobre la instalación de AgularJS, utilizada para el desarrollo de aplicaciones web. También, estudiaremos de forma resumida la estructura de directorios y su contenido.

Cuando se abre el enlace https://angularjs.org/, se veran diferentes opciones para descargar la libreria de AngularJS

angularJS_instalacion

Descargar y almacenar en nuestro servidor

Hay tres diferentes opciones release, stable y legency. Los nombres describen las versiones mas estables de AngularJS. También se puede descargar comprimido o no.
CDN
También se puede tener acceso al CDN de AngularJS. Este se refiere a que usted tendrá acceso alrededor del mundo a través de los datacenter de Google.  Esto significa que al usar CDN movemos la responsabilidad a un hosting externo las librerías de terceros. Esto también ofrece una ventaja que si el visitante de la página web ya tiene descargado un copia de AngularJS, no es necesario descargarlo de nuevo.
Ejemplo

[gist]304560ea0e59a61d4480[/gist]

Especificar el AngularJS App

Se hace por medio de la directiva ng-app y se agrega como un atributo de una etiqueta HTML. Se pue agregar en la etiqueta Body o Html.

View

La directiva ng-controller especifica que controlador va usar esta vista. La variable entre corchetes dobles, hace referencia a las variables del modelo.

Controller

El código registra una función llamada HelloController en un módulo de AngularJS llamado myapp. El parámetro $scope hace referencia al contexto en cual se está llamando el controlador.

2. Introducción a AngularJS

Qué es AngularJS?

Angularjs es un framework de aplicaciones web de código abierto. Originalmente fue desarrollado en 2009 por Misko Hevery y Adam Abrons. En la actualidad es mantenido por Google. Su última versión es la 1.4.8 y es la que se usará durante el curso.

AngularJS es un framework para la creación de aplicaciones web dinámicas. Permite usar HTML como un lenguaje de plantilla y extender la sintaxis de marcado de tal forma de expresar los componente de una aplicación de una forma clara y concisa. La dependencias y constructores de AngularJS eliminan mucho código a escribir. Todo esto gracias al navegador, que se convierte es un socio como cualquier servidor.

Características

  • AngularJS es un poderoso framework basado en Javascript para crear crear aplicaciones de internet enriquecidas (RIA).
  • AngularJS no ofrece la posibilidad de escribir un aplicación del lado del cliente implementando el Model-Vista-Controlador.
  • La aplicaciones escritas con AngularJS son cross-browser. AngularJS maneja de forma apropiada la ejecución en cada navegador.
  • AngularJS es open-source y es gratuito.

En resumen, AngularJS es un framework para construir aplicaciones web a gran escala y alto rendimiento mantenimiento el concepto easy-to-maintain.

Características Principales

Las siguientes, son las características más relevantes de AngularJS

Data-Binding: es la sincronización automática de datos los componentes de la vista y el modelo.

Scope: Estos son objetos que se refieren al modelo. Estos actúan como un enlazador entre el controlador y la vista.

Controller: Son funciones de Javascript que están atados a un scope en particular.

Services: AngularJS tiene por defecto varios servicios ya construidos, por ejemplo $http para realizar peticiones XMLHttpRequests. Son un objeto singleton el cual es instanciado solo una vez en la aplicación.

Filters: Estos son una selección de objetos que se realizan de un array y retorna uno nuevo.

Directives: Son marcas sobre los elementos del DOM, que pueden ser utilizadas para crear etiquetas HTML y/o widgets personalizados. Podemos encontrar como ejemplo de directivas ngBind o ngModel.

Templates: Se utilizan para la generación de vistas dinámicas a partir de información manipulada por el controlador y el modelo. Estos pueden ser archivos simples o múltiples vistas.

Routing: Es la forma de cambiar de vistas.

MVW (Model – View – Whatever): AngularJS no implementa el MVC tradicional y es acerca más la MVVM (Model-View-ViewModel) por esta razón MVW es una manera humorística de llamar a este modelo.

Deep Linking: Esta propiedad permite codificar el estado de una aplicación en una URL y puede ser restaurada desde la URL y con el mismo estado.

Conceptos

angularjs_conceptos

Ventajas de AngularJS

  • Tiene la capacidad de crear aplicaciones SPA (Single – Page – Application) de una forma limpia y mantenible.
  • Gracias al Data-Binding le da al usuario un experiencia mas enriquecida y receptiva.
  • Unit – Test es posible
  • Separación de Intereses (separation of concerns)
  • Componentes re-utilizables.
  • Menos código y mas funcionalidad.

Desventaja de AngularJS

  • Seguridad: Las aplicaciones escritas con AngularJS no son seguras. Del lado del servidor se deben mantener la autenticación y autorización de la información.

Componentes de AngularJS

AngularJS se puede dividir en las siguientes tres partes:
  • ng-app: Esta directiva define y enlaza una aplicación AngularJS con el HTML
  • ng-model: Esta directiva empaqueta los valores de una aplicacion con los controles de entrada (input) del HTML.
  • ng-bind: Se encarga de empaquetar una aplicación AngularJS en un etiqueta HTML.

1. Curso de AngularJS

AngularJS es un poderoso framework para Javascript. Este es usado para proyectos Single-Page-Application (SPA). AngularJS extiende el DOM con atributos adicionales, haciendo un poco más amigable con la interfaz de usuario. AngularJS es open-source y es completamente gratis, y utilizado por miles de desarrolladores a nivel mundial. Tiene un licencia Apache Versión 2.0.

Dirigido:

Este curso está dirigido a profesionales que quieran aprender los conceptos básicos en la programación basada en AngularJS en simple pasos y ejemplos.

Pre-requisitos:

Tener experiencia básica en Javscripts y un editor de texto como Sublime o Notepad++. Como se desarrollarán aplicaciones basadas en la web con AngularJS, es necesario entender otras tecnologías como HTML, CSS, AJAX, entre otros.

AngularJS Online

Para la mayoría de los ejemplos de este curso, usaremos la página jsfiddle, para compartir y ejecutar ejemplos en tiempo real. Este es el primer ejemplo con AngularJS:

[gist]004f8aef9487bd69c865[/gist]

Ejecutar

Creado con WordPress & Tema de Anders Norén