Andres Felipe Blog's

My WordPress Blog

Categoría: AngularJS (Página 1 de 2)

18. Directivas Personalizadas con AngularJS

Las directivas personalizadas son utilizadas en AngularJS para extender funcionalidad del HTML. Las directivas se definen con la función directive(). Esta directiva simplemente remplaza los elementos por los cuales son activados. Durante la fase de despliegue, AngularJS busca los elementos en el HTML y lo hace por medio de las funciones compile() y link() asigna a cada elemento la estructura y estilos. AngularJS soporta la creación de directivas personalizadas por lo siguientes elementos:

Leer más

16. Servicios con AngularJS

angularjs-logo

AngularJS incorpora el concepto de “Seperaciones por Intereses“, usando una arquitectura de servicios. Los servicios son funciones de javascript y son responsables de hacer tareas especificas. Esto crea porciones de código los cuales son más mantenibles y fáciles de probar. Los servicios son normalmente declarados usando el mecanismo de inyección de AngularJS.

AngularJS provee algunos servicios incluidos, por ejemplo, $http, $route, $window, $location, entre otros. Cada servicio es responsable de una tarea específica, por ejemplo $http se usa para realizar llamados Ajax, $route se una para definir el enrutamiento de la información. Los servicios tiene el prefijo de signo de peso $.

Leer más

15. Alcance y Variables de Ambiente en AngularJS

angularjs-logo

Las variables de ambiente o alcance son objetos los cuales juegan un papel importante entre el Controlador y la Vista. Estas variables contienen los datos del modelo y en el controlador son accedidos por medio del objeto $scope.

[gist]3b9a5c0941a9742f5f32[/gist]

Siguiente con el código anterior, los siguientes puntos son los más importantes a considerar son:

  • El objeto $scope, se pasa como argumento durante la definición del constructor.
  • Los atributos $scope.name$scope.formula$scope.area son variables del modelo que son utilizados en la vista.
  • También se pueden definir funciones con el objeto $scope.

Leer más

14. Vistas y Rutas con AngularJS

angularjs-logo

AngularJS soporta Aplicaciones Web de una sola pagina gracias al uso múltiple de vista. Para lograr este objetivo se usar la directiva ng-view y ng-template y el servicio $routeProvider.

ng-view

Es un elemento que se dispone para insertar la vista ya sea un html o un elemento de tipo ng-template. La configuración se hace desde el controlador.

[gist]229013de3fe66d72c3a5[/gist]

ng-template

Esta directiva se usa para crear un HTML. Es contenido por medio de un “id”, el cual es utilizado por el servicio $routeProvider y la acción la realiza el controlador.

[gist]a3460d6ed94e1022f864[/gist]

$routeProvider

Este servicio configura la urls de la aplicación. Cuando se ingresa una url parametrizada, este envía el html correspondiente definido con ng-template y lo fila en el elemento ng-view.

Ejemplo Completo:

[gist]42a741dd2a69b5949f23[/gist]

Ejecutarhttps://jsfiddle.net/AFelipeTrujillo/wrczmgek/

 Los que no puedan mantener el ritmo de la revolución tecnológica, se encontrarán con que ellos mismos se han vuelto obsoletos.

— Katherine Neville

13 . Ajax con AngularJS

angularjs-logo

AngularJS provee de un control llamado $http el cual trabaja como un servicio de leer datos provenientes de un servidor. El servidor hace el respectuvo llamado a la base de Datos y obtiene los datos deseados. Para la lectura, AngularJS necesita los datos en formato JSON, una vez los datos estén listos, $http puede controlar estos datos de la siguiente forma:

[gist]b392d36e370f82aac646[/gist]

Nota: La variable “url” se debe remplazar por un servicio real. Para esta prueba estoy simulando un servicio externo.

Ejecutarhttps://jsfiddle.net/AFelipeTrujillo/tabf5zfh/

 

12. Incluir archivos con AngularJS

angularjs-logo

HTML no soporta la incorporación de paginas html externas. Para lograr esta funcionalidad, se deben hacer de la siguiente forma:

  • Usando Ajax – Haciendo un llamado al servidor y obtener el respectivo html y modificar un elemento por medio de un innerHTML.
  • Usando Inclusiones por medio de una lenguaje del lado del servidor – sea JSP, PHP u otro lenguaje se puede incluir paginas html de forma dinámica.

Usando AngularJS, nosotros podemos incluir paginas HTML usando la directiva ng-include.

[gist]c1dbeb2361974e2fac16[/gist]

Cada pagina puede contener un Controlador independiente o unirlos en uno solo. Simplemente AngularJS, cargara primero las paginas por medio de un llamado Ajax y después desplegara los componentes propios de Angular. Esta es un forma mas elegante de administrar el HTML y no tener todo el código en una sola pagina.

Até logo

 

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 1 de 2

Creado con WordPress & Tema de Anders Norén