Andres Felipe Blog's

My WordPress Blog

Página 3 de 7

10. Modulos con AngularJS

angularjs-logo

AngularJS tiene la ventaja de usar módulos. Dichos modelos son utilizados para separar los servicios, controladores, aplicaciones, entre otros y mantener el código limpio. Se defino modulo con archivos separados de javascript (*.js). En el siguiente ejemplo, vamos a crear dos módulos.

  • Modulo de la aplicación: usado para inicializar una aplicación AngularJS
  • Modulo de Controladores: usado para definir y crear un controlador.

Modulo de la Aplicación

var myApp = angular.module("myApp", []);

Creamos un archivo llamado myApp.js y se declara una aplicación llamada myApp y se le pasa como parámetro un arreglo vacío, que generalmente contiene dependencias.

Modulo del Controlador

mainApp.controller('EstudiantesController', function($scope) {
  $scope.estudiante = {
    nombre: "Oscar",
    apellido: "Diáz",

    nombreCompleto: function() {
      var estudianteObj;
      estudianteObj = $scope.estudiante;
      return studentObject.nombre + " " + studentObject.apellido;
    }
  };

Se crea un archivo llamado EstudiantesControlador.js y se declara un controlador usando la aplicación anterior.

Uso de los Modulos

 src = "myApp.js">
 src = "EstudianteControlador.js">

Usando las directivas ng-app y ng-controller, se logra importar la lógica del controlador y la declaración de la aplicación.

À bientôt

9. AngularJS y HTML DOM

angularjs-logo

Las siguientes directivas, son utilizadas para empaquetar atributos de elementos HTML.

  1. ng-disable: inhabilitar un elemento DOM
  2. ng-show: muestra el elemento DOM
  3. ng-hide: esconde el elemento DOM
  4. ng-click: se detecta el evento click, sobre un elemento DOM.

Directiva ng-disable

Al agregar el atributo ng-disabled al botón y pasar este por una variable el modelo. Cuando se selecciona el checkbox, la variable queda true y el botón se inhabilitara.[gist]1b883a1bdf427beaf4c5[/gist]

Directiva ng-show

Igual que la anterior directiva, la variable del modelo controla si se muestra o no el botón.

[gist]cd25f1b85d5fef58672e[/gist]

Directiva ng-hide

En vez de mostrar esta directiva oculta el elemento HTML.

[gist]5a7047cafa0afbdc44fe[/gist]

Directiva ng-click

Este directiva detecta el evento click sobre un elemento HTML.

[gist]770093abe68f1098440b[/gist]

Ejecutarhttps://jsfiddle.net/AFelipeTrujillo/768fd4yv/5/

8. Filtros en AngularJs

angularjs-logo

Los filtros son utilizados para modificar datos y también puede tomar expresiones o directivas, solo usando el símbolo de la barra horizontal (|). En la siguiente lista, se encuentran los más usados.

  1. uppercase: convertir a mayúsculas
  2. lowercase: convertir a minúsculas.
  3. currency: toma el número y lo convierte a un formato de moneda.
  4. filter: filtra un array y retorna un subconjunto según la búsqueda.
  5. orderby: ordena un arreglo según los datos suministrados.

Los código presentados a continuación están basados en el articulo, Controladores con AngularJS.

uppercase y lowercase

Agregando el filtro uppercase sobre una expresión usando el la barra horizontal. Convertiremos una cadena de texto en letras mayúsculas. Con lowercase realizamos la operación contraria.

[gist]deb2d89f10dccd0aa33a[/gist]

currency

Agregando el filtro currency a un expresión, este retornara un numero en formato monetario.

[gist]cebc974a3c83a5152e04[/gist]

filter

Sirve para buscar dentro de una colección de datos, en el siguiente ejemplo se crea un control de entrada de datos con el nombre de modelo “buscar_asignatura” y en el ng-repeat.

[gist]f0d89535ac55ddc5e0c7[/gist]

orderby

Ordenar por un dato especifico.

[gist]6726f34a997e8533dee8[/gist]

Ejecutarhttps://jsfiddle.net/AFelipeTrujillo/sdo8pncw/7/

 

 

7. Controladores con AngularJS

angularjs-logo

Principalmente en una aplicación AngularJS depende del controlador para administrar el flujo de datos. Un controlador es definido con la directiva ng-controller. Un controlador es un objeto Javascript que contiene atributos o propiedades y funciones. Cada controlador tiene acepta un parámetro llamado $scope, el cual se refiere a la aplicación y/o modulo que este administra.

[gist]939018821725574736ab[/gist]

El controlador se declara con la directiva ng-controller, ahora se define el controlador.

[gist]cbfed1ea35b9faf3a7b4[/gist]

  • EstudiantesController se define como un objeto de javascript que recibe un parámetro $scope.
  • $scope se refiere a la aplicación o modulo que esta haciendo uso del controlador.
  • $scope.estudiante es una propiedad del controlador
  • nombre y apellido son dos atributos del objeto $scope.estudiante y son declarados por defecto.
  • nombreCompleto es una función del objeto $scope.estudiante, el cual concatena el nombre y el apellido.

Ahora, para utilizar los elementos del controlador en la vista, necesitamos de la directiva ng-model.

[gist]8ecf1ac9b0cd700fca57[/gist]

  • Se empaqueta los dos atributos del objeto $scope.estudiante en dos controles de entrada (<input>) .
  • Para obtener el nombre completo, se llama la función $scope.nombreCompleto
  • Si edita cualquier elemento contenido en los controles de entrada (<input>) se actualizaran automanticamente.

Ejecutar: https://jsfiddle.net/AFelipeTrujillo/7v1ajmes/1/

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

Página 3 de 7

Creado con WordPress & Tema de Anders Norén