Ejemplos prácticos de AngularJS en los que solo estamos realizando código HTML, con directivas embutidas en el código HTML.
En lo que hemos visto hasta aquí del Manual de AngularJS ya hemos tenido ocasión de conocer varias cosillas simples que nos sirven para hacer ejemplos. He hecho a lo largo de los artículos anteriores ya hemos podido hacer algunas muestras de cómo trabajar con el framework.
Queremos ahora introducir unos vídeos que nos van a aclarar todavía un poco más los primeros pasos en AngularJS. Estos vídeos están extractados del #programadorIO de AngularJS desde cero punto cero. En este artículo además compartimos el código fuente utilizado.
1) "Hola mundo" en AngularJS
En este primer ejercicio vimos lo mínimo necesario para comenzar una aplicación con AngularJS.
Revisamos el uso de la directiva ngApp, la directiva ngModel y una expresión en la que volcamos un dato que hay en el modelo. Es muy sencillo, así que nadie se puede perder.
El código fuente realizado es el siguiente:
<!DOCTYPE html>
<html lang="en" ng-app>
<head>
<meta charset="UTF-8">
<title>hola mundo en Angular</title>
</head>
<body>
<input type="text" ng-model="campotexto">
<br />
{{ campotexto }}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.24/angular.min.js"></script>
</body>
</html>
2) Campos select y recomendaciones de inicialización
En este ejercicio incorporamos un campo SELECT que también asociamos al modelo de nuestra aplicación mediante la directiva ngModel. Gracias a ello podemos mostrar dentro del cuerpo de la página el valor del SELECT por medio de una expresión.
El código es el siguiente:
<!DOCTYPE html>
<html lang="en" ng-app>
<head>
<meta charset="UTF-8">
<title>hola mundo en Angular</title>
</head>
<body>
<input type="text" ng-model="campotexto">
<br />
{{ campotexto }} - {{ camposelect }}
<br />
<select ng-model="camposelect">
<option value="uno">1</option>
<option value="dos">2</option>
</select>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.24/angular.min.js"></script>
</body>
</html>
3) Directiva ngClick
En este tercer vídeo vamos a explicar la directiva ngClick que ya nos permite agregar algo de interacción en los elementos de la página. Colocaremos un botón y dentro de él el atributo ng-click que nos permitirá asignarle un comportamiento.
Aclaramos en el vídeo que no es la manera más recomendable de actuar, puesto que los comportamientos deberían escribirse (su código) dentro de los controladores. No obstante nos ofrece una idea de las posibilidades de AngularJS y está bien para comenzar a dar los primeros pasos.
Mediante el botón escribimos dos comportamientos en el vídeo (aunque en el código fuente que tenemos solo se conservó uno de los comportamientos). El primero que verás en la grabación es asignarle un valor al campo SELECT. De ese modo se muestra cómo el campo de selección pierde el valor a null con el que lo inicializa automáticamente AngularJS. En el segundo comportamiento simplemente se coloca un nuevo texto en el campo de texto.
Este es el código fuente que quedó del ejemplo realizado en el vídeo.
<!DOCTYPE html>
<html lang="en" ng-app>
<head>
<meta charset="UTF-8">
<title>hola mundo en Angular</title>
</head>
<body>
<input type="text" ng-model="campotexto">
<br />
{{ campotexto }} - {{ camposelect }}
<br />
<select ng-model="camposelect">
<option value="uno">1</option>
<option value="dos">2</option>
</select>
<input type="button" ng-click="campotexto='DesarrolloWeb.com'" value="Pulsa aquí">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.24/angular.min.js"></script>
</body>
</html>Estos son los tres ejemplos que te mostramos por ahora, aunque la sesión se completó con dos nuevas muestras de uso de AngularJS, en las que se mostró cómo crear un controlador. Sin embargo, como no hemos visto controladores todavía en este manual, nos reservamos para un poco más adelante comentarte acerca de esos vídeos. Si te interesan, lo único que debes hacer es irte a la lista de reproducción de los videotutoriales de Angular en nuestro canal de Youtube.
En el siguiente artículo continuaremos hablando de modelos y luego de controladores, con lo que podremos comenzar a ver código fuente Javascript con buenas prácticas, en vez de mezclar la interacción con la presentación, tal como nos hemos obligado a hacer con lo que sabemos en estos primeros pasos con la librería Javascript.
De momento te sugiero que practiques por tu cuenta y trates de hacer ejemplos como éstos u otros más complejos que se te ocurran, pues con la práctica es como se afianzan los conocimientos. Observarás que jugar con AngularJS se hace muy divertido y que se consiguen comportamientos interesantes con muy poco o ningún código Javascript.
Miguel Angel Alvarez
Fundador de DesarrolloWeb.com y la plataforma de formación online EscuelaIT. Com...