Andres Felipe Blog's

My WordPress Blog

Mes: febrero 2016 (Página 2 de 2)

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/

Página 2 de 2

Creado con WordPress & Tema de Anders Norén