Andres Felipe Blog's

My WordPress Blog

Autor: AFelipeTrujillo (Página 2 de 7)

17. Inyecciones de Dependencias con AngularJS

angularjs-logo

La inyección de dependencias es un patrón de diseño de software el cual los componentes de una clase (atributos y métodos) son obtenidos por dependencias de otros objetos (wiki). Esto evita que la clase escriba sus propios métodos y ayuda a desarrollar componentes re-utilizables, mantenibles y fáciles de probar. AngularJS provee un mecanismo de inyección de dependencias. los cuales son:

  • value
  • factory
  • service
  • provider
  • constant

Leer más

English Language Notes – Adjective Order

According tohttp://www.bbc.co.uk/programmes/p03jmf01

The podcast gives us a simple definition about the adjectives, it said that an adjective is a useful word to describe things or nouns. Such as big, small, blue or tasty. But sometimes we need to use two or more adjectives in order to describe a noun. So let’s start !

Check the next example below:

This is my big old red leather sofa

The order is: Size – Age – Color – Material, but Why? the reason is that you have to put the adjective with the meaning most closely related to the noun. The last adjective (leather) has a closer connection with the sofa.

Blue stripy cotton cushions.

The orde is: Colour, Quality and Material

Beautiful green Turkish kilim

Ther order is: Opinion – Color – Country

Vocabulary:

  • Striply: with a pattern of stripes
  • Kilim: Turkish carpet
  • Cushions: a cloth bag filled with something soft.

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

The Help – Criadas y Señoras

wp-1456118894654.jpg

Cabe denotar que no soy un crítico de literatura y mi poca experiencia literaria no se alinean con lo que verdaderos expertos puedan opinar. En consecuencia, esta reseña es mi simple opinión y una descripción de los sentimientos que este libro encontró en mi.

Inicialmente me sentí atraído por este libro, simplemente por la admiración hacia la lucha social levantada por los afroamericanos en Estados  Unidos en los años 60s. Escuchar nombres como Medgar Evers, Rosa Parks y Martin Luther King llenan en mi interior un espíritu de esperanza por las causa pequeñas, por luchas por la equidad en los temas cotidianos y en vivir en paz sin desigualdad. Este pequeño espíritu que se despertó en mí, me llevó a leer este maravilloso libro.

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

 

11. Control y Manejo de Formularios con AngularJS

angularjs-logo

AngularJS enriquece la validación y diligenciamiento de formularios. Con la directiva ng-click podemos controlar el evento click de un elemento, como un botón. También existen banderas como $disrty e $invalid para realizar validaciones. También se puede utilizar novalidate para inhabilitar una validación específica del navegador. Por último, Angular propone un esquema fuerte de eventos.

Eventos

AngularJS provee múltiples formas de asociar eventos en los elemento HTML. Por ejemplo, ng-click es normalmente asociados con un botón. La siguiente lista describe todo los eventos proporcionados por AngularJS.

  • ng-click
  • ng-dbl-click
  • ng-mousedown
  • ng-mouseup
  • ng-mouseenter
  • ng-mouseleave
  • ng-mousemove
  • ng-mouseover
  • ng-keydown
  • ng-keyup
  • ng-keypress
  • ng-change

ng-click

El siguiente código es un ejemplo de restablecer un formulario.
[gist]c9fbacbc78e3f9db26dd[/gist]

Ejecutarhttps://jsfiddle.net/AFelipeTrujillo/jgtznffm/5/

Validadores

Los siguientes validadores puede ser utilizados para realizar seguimiento a los errores.

  • $dirty: Estado del dato cuando a cambiado.
  • $invalid: Estado del dato cuando es invalido.
  • $error: Error exacto.

[gist]a551826be0dc7f7093a7[/gist]

Ejecutarhttps://jsfiddle.net/AFelipeTrujillo/jgtznffm/11/

 

 

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

Página 2 de 7

Creado con WordPress & Tema de Anders Norén