adsense

XRL Tech Corner

Tutoriales online de programación, CMS, Raspberry y artículos sobre tecnología.

Angularjs para principiantes

En este artículo vamos a hacer un tutorial de AngularJS para principiantes. En este caso vamos a fijarnos en la versión 1.
Últimamente veo bastantes proyectos que están hablando del tema y por eso me he decidido a escribir un pequeño artículo para principiantes que quieran aprender AngularJS

Que es AngularJS

Puedes consultar también el tutorial sobre Angular cli 


Dicho esto, adicionalmente podéis leer el artículo cómo programar un servidor web con node js donde se trata de manera muy breve (con un ejemplo) el framework node js, que es un framework de Javascript en el lado del servidor.
Sin embargo AngularJS se ejecuta en el lado cliente (en el navegador).

Lo podemos definir como un framework de desarrollo Javascript para generar contenido web dinámico en la parte del front-end.
Nos podemos olvidar (de momento) de la parte del back-end, con sus tecnologías habituales: Java, PHP, o las más nuevas como Rails, Django, etc...
Hay que comentar que el gran Google está detrás de este framework, y se encarga de su mantenimiento y evolución.

Uno de los requisitos básicos para empezar con Angular JS es tener conocimientos de HTML, CSS y Javascript, dado que se trata de un framework que utiliza estos lenguajes.

Es una tecnología que se puede complementar bien con jQuery (librería Javascript), bootstrap y JSON (formato para el intercambio de datos), así que tampoco está de más tener conocimientos de ellos.

Cuales son las piedras angulares en las qué se basa Angular JS para construir una aplicación?

Este framework utiliza el patrón MVC (Modelo, Vista, Controlador)
Lleva parte del desarrollo que se implementa habitualmente en el back-end al front-end, por ejemplo el controlador En concreto, y de modo bastante genérico diremos que usa los siguientes elementos principales:

  •  "directivas", que son atributos adicionales que se añaden a los tags HTML, hacen referencia a funciones o código Javascript. Disparan el comportamiento de la aplicación. Por ejemplo la directiva ng-show permite mostrar un elemento (un div pej.) en función de si una expresión es verdadera o falsa.

  •  "expresiones", que se usan para insertar contenido dinámico de las variables dentro de los tags HTML. Por ejemplo {{ 10 - 2}}  se muestra en el navegador como 8. Las variables dentro de las llaves dobles toman los valores de las variables de Javascript o de un contenido JSON (estático o dinámico).

  •  "módulos", que son los diferentes componentes (paquetes, librerías) de Javascript que sirven para separar el código, y que se pueden referenciar entre ellos. Es una manera eficiente y fácil de mantener luego el código de la aplicación.

  •  "controladores" que son los componentes donde se define el comportamiento de la aplicación mediante la definición de funciones y la asignación y tratamiento de las variables. Se incrustan en los tags HTML, y son invocados cuando se muestran esos tags HTML.


Existen además otros componentes que permiten dar formato a los datos, como los "filtros". Por ejemplo "currency" que sirve para dar formato a los precios.

Para empezar con Angular JS tenemos varias opciones, la primera es descargarnos la librería javascript que podemos encontrar en http://angularjs.org.
Con la versión angular.min.js (que se deberá incluir en el fichero html con la etiqueta


La tercera opción es utilizar el gestor de paquetes npm para instalarlo dentro de un entorno local con node js de este modo:

 npm install angular@1.5.5



A continuación mostraremos un ejemplo básico con un html, y un fichero app.js. Podemos desarrollar un típico ejemplo con "Hola Mundo", usando un controlador que llamaremos MiControlador, una estructura JSON con la variable mensaje y color y una directiva ng-show. Si estás interesado en aprender a programar en AngularJS, te recomendamos uno de los mejores bootcamps de programación de AngularJS

Utiliza el editor html css online para probar los ejemplos. Recuerda que puedes poner el código de app.js dentro de la misma html entre las etiquetas


Se puede cambiar el resultado cambiando el valor de la variable mensaje, el tipo o el color en la estructura datos del fichero app.js.




Fichero app.js


(function() { var app = angular.module('tutorial', []); app.controller('MiControlador', function(){ this.cabecera = datos; }); var datos = { "mensaje" : "Hola Mundo!", "tipo" : 1, "color" : "red" }; })();
Fichero index.html


 ng-app="tutorial">
  
     href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
    

 

   ng-controller="MiControlador as control"> 
 
style=" color: {{control.cabecera.color}} " ng-show="control.cabecera.tipo == 1">{{ control.cabecera.mensaje }}

 

Valora este artículo del blog:
Base de datos nosql mongodb
Tutorial Bootstrap

Artículos relacionados

 

Comentarios

No hay comentarios por el momento. Se el primero en enviar un comentario.
¿Ya està registrado? Ingresa Aquí
Invitado
Viernes, 20 Octubre 2017
Si desea registrarse, por favor rellene los campos de nombre de usuario y nombre.

Imagen Captcha