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:

Seguir leyendo “18. Directivas Personalizadas con AngularJS”

Anuncios

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 $.

Seguir leyendo “16. Servicios con AngularJS”

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.

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.

Seguir leyendo “15. Alcance y Variables de Ambiente en AngularJS”

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.

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.

$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:

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:

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.

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