Angular js para principiantes

En este articulo hablamos de Angular JS, la primera version de este popular framework.

Empezamos un tutorial de AngularJS para principiantes. En este caso vamos a fijarnos en la versión 1.x

Inicialmente esta versión se lanzó a finales del 2010 y todavía hoy sigue teniendo soporte. Aunque Google comenta que pasará a LTS (soporte a largo plazo) el 1 de Julio del 2018.
AngularJS se utiliza para crear aplicaciones SPA (aplicaciones de una sola página). Se combina habitualmente con NodeJS, Express y MongoDB. Puedes ver la página oficial en angularjs

Posteriormente la versión 2 de Angular, se pasó a denominar simplemente "Angular" y fue reescrito desde cero, y con el lenguaje Typescript y ES6. Puedes encontrar la página oficial en angular.io.
Hoy en día "viven" las dos ramas principales: AngularJS (versión 1.x) y Angular (que ya va por la versión 6).

Dado que angular.io tiene una curva de aprendizaje alta, conviene empezar por coger unos conceptos de angularjs y posteriormente pasar a aprender angular.io, ya que es el más utilizado y actualizado por Google.

Descubre todos los secretos de angular 6 en este curso online.

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.

Cuales son los elementos principales de Angular JS?

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:

1.  "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.

2.  "expresiones", que se usan para insertar contenido dinámico de las variables dentro de los tags HTML. Por ejemplo <b>{{ 10 - 2}}</b>  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).

3.  "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.

4.  "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 su página de descargas http://code.angularjs.org.
Con la versión angular.min.js (que se deberá incluir en el fichero html con la etiqueta <script>) tendremos lo básico para desarrollar.

La segunda opción es hacer referencia al CDN de Google dentro del fichero html de este modo:

	 
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js" ></script>
	

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

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.

Luego mostraremos otro ejemplo más completo, donde se utilizará un formulario, usando "data binding", controladores (para la lógica de la vista), servicios y acceso a un backend.

Ejemplo 1

Recuerda que puedes poner el código de app.js dentro de la misma html entre las etiquetas <script> y </script>

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.

• app.js
• index.html
• Ver DEMO

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

<!DOCTYPE html>
<html ng-app="tutorial">
<head>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js"></script>
<script type="text/javascript" src="app.js"></script>
</head>
<body ng-controller="MiControlador as control">
<div>
<h1 style=" color: {{control.cabecera.color}} " ng-show="control.cabecera.tipo == 1">{{ control.cabecera.mensaje }}</h1>
</div>
</body>
</html>

Ejemplo 2

Vamos a usar un formulario simple para informar la cantidad, el símbolo de la criptomoneda y la moneda destino (euro o dólar).
Luego añadiremos lógica de negocio usando un controlador. Cuando la aplicación crece es habitual mover el código reutilizable del controlador a un servicio.
Por último accederemos a un backend para obtener ciertos datos de cotizaciones mediante JSON, para calcular los valores de la aplicación dinámicamente.

La demo incorpora además el uso de filtros para formatear los números y fechas, puedes mejorar el ejemplo como ejercicio o ver el código fuente de la demo para ver como se implementa.

• index.html
• conversor.js
• monedas.js
• Ver DEMO

<!DOCTYPE html>
    <html lang="es">
    <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="keywords" content="Cotizacion,conversor,criptomonedas,euro,bitcoin,ether" />
    <meta name="description" content="cotizacion bitcoin euro. conversor bitcoin, ether, monero, ripple, xem a euro" />
    <title>Cotización bitcoin euro. Conversor bitocoin, ether, monero, ripple, xem a euro</title>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.js" ></script>
    <script type="text/javascript" src="/js/demo/conversor.js"></script>
    <script type="text/javascript" src="/js/demo/monedas.js"></script>
    </head>
    <body>
    <div class="container" ng-app="conversor" ng-controller="ConversorController as conversor">
    <h1>Cotización bitcoin euro y otras criptomonedas</h1>
    <hr>
    <form class="form-inline">
    <div class="row well">
    <div class="col-sm-9">
    <div class="form-group">
    <input class="form-control" type="number" min="0" step='0.0000000001' ng-model="conversor.qty" required >
    <select class="form-control" ng-model="conversor.inCurr2">
    <option ng-repeat="c in conversor.criptocurrencies" value="{{c.id}}">{{c.valor}}</option>
    </select> a
    <select class="form-control" ng-model="conversor.inCurr">
    <option ng-repeat="c in conversor.currencies">{{c}}</option>
    </select>
    <button class="btn btn-primary btn-sm" ng-click="conversor.enviar()">Convertir</button>
    <input class="form-control" type="text" ng-model="conversor.qty2"  >
    </div>
    </div>
    </div>
    </form>
    </body>
    </html>
    

angular.module('conversor', ['monedas'])
    .controller('ConversorController', ['currencyConverter', function ConversorController(currencyConverter) {
        this.qty = 1;
        this.qty2 = 0;
        this.inCurr = 'EUR';
        this.inCurr2 = currencyConverter.criptocurrencies[0].id;
        this.currencies = currencyConverter.currencies;
        this.criptocurrencies  = currencyConverter.criptocurrencies;
        this.enviar = function enviar() {
        this.qty2 = currencyConverter.convertir(this.qty, this.inCurr, this.inCurr2);
        };
        }]);

angular.module('monedas', [])
    .factory('currencyConverter', ['$http', function($http) {
        //valores iniciales de las listas desplegables
        var monedasfiat = ['USD', 'EUR' ];
        var criptomonedas = [{id:'bitcoin',valor:'BTC (bitcoin)'},
        {id:'ethereum',valor:'ETH (ethereum)'},
        {id:'monero',valor:'XMR (monero)'},
        {id:'nem',valor:'XEM (nem)'},
        {id:'ripple',valor:'XRP (ripple)'} ];
        var datajson = {};
        //convertir el valor de criptomoneda a moneda fiat
        var convertir = function(cantidad, inCurr, inCurr2) {
        console.log("Convertir:"+cantidad+' -'+inCurr+'- a -'+inCurr2+'-');
        if (Object.keys(datajson).length===0 && datajson.constructor === Object) {
        console.log("No se ha cargado correctamente la información de las cotizaciones json");
        return 0;
        }
        var i;
        for(i = 0; i < datajson.length; i++) {
        if(datajson[i].id == inCurr2)  {
        break;
        }
        }
        if (inCurr==='EUR') {
          return cantidad*datajson[i]['price_eur'];
        } else if (inCurr==='USD') {
          return cantidad*datajson[i]['price_usd'];
        } else return 0;
        };

        var obtener = function() {
          console.log("Obteniendo las cotizaciones de coinmarketcap");
          var url = 'https://api.coinmarketcap.com/v1/ticker/?convert=EUR';
          return $http.get(url).then(function(response) {
              datajson = response.data;
              //console.log(datajson);
              }, function (err) {
              console.log("Error http conectando a coinmarketcap "+err.status+' '+err.statusText);
              });
        };
        //al cargar este modulo obtener las cotizaciones de la web
          obtener();

        return {
          currencies: monedasfiat,
            criptocurrencies: criptomonedas,
            convertir: convertir
        };
    }]);

Conclusión

En este artículo hemos hecho una toma de contacto con angularjs y hemos mostrado dos ejemplos para empezar. Como punto de partida es recomendable primero entender este framework para luego pasar de lleno a angular.io, que será el estándard de facto a largo plazo.
Si te ha gustado o te ha parecido útil, por favor deja tu opinión en los comentarios.

Descubre todos los secretos de angular 6 en este curso online.