Primeros pasos con AngularJS

  • Por
Qué necesitas para trabajar con AngularJS, como descargar el framework y cómo realizar un primer programa, el típico Hola Mundo.

Ya hemos conocido por qué AngularJS nos ayuda en el desarrollo de sitios web modernos y también hemos explorado en detalle diversos conceptos iniciales para manejar esta librería, así que que estamos en condiciones de poner manos en el código.

En este artículo queremos ofrecer una introducción muy básica a AngularJS, creando un extraordinariamente sencillo "Hola mundo" con el que podremos empezar a apreciar la potencia de este framework Javascript. Los impacientes e manejar código estaréis satisfechos después de la lectura de este artículo, pero antes que nada tenemos que saber qué materiales necesito en mi ordenador para comenzar a trabajar.

Qué necesitas para desarrollar con AngularJS

Lo único que necesitas para desarrollar con AngularJS es un editor de texto y un navegador. Así de sencillo, seguramente todo el mundo tenga ya configurado su editor preferido, así que te puedes saltar si quieres estos siguientes párrafos. Para los que no tengan claro esto, os dejo un par de comentarios.

  • Editor de código: puede ser cualquiera que estés acostumbrado a usar, no necesitas cambiarlo para programar con Angular. Lo que es interesante es que sea un editor para programadores, que te permita diversas ayudas al escribir el código, coloreado de sintaxis, ayudas contextuales, etc. Notepad++, Sublime Text, Komodo Edit, Brackets, etc. Cualquiera es bueno. Si estás acostumbrado a IDEs más complejos como Eclipse o PhpStorm, puedes quedarte también con ellos.

  • Navegador: Puedes usar cualquier navegador para ver un desarrollo basado en Angular. Generalmente tendrás incluso varios navegadores para probar tu página en cada uno de ellos y comprobar que todo está en orden. Solo te recomendamos tener a Google Chrome entre tu batería de navegadores, pues luego hablaremos de una extensión que existe para éste que te permite examinar y depurar páginas donde AngularJS está trabajando.

Descarga de AngularJS

Si quieres trabajar con AngularJS tienes que incluir el script del framework en tu página. Esto lo puedes hacer de varias maneras, o bien te descargas la librería por completo y la colocas en un directorio de tu proyecto, o bien usas un CDN para traerte la librería desde un servidor remoto. En principio es indiferente a nivel didáctico, así que nosotros vamos a comenzar del modo más sencillo, que es utilizar el CDN.

Accedes a la página de AngularJS: https://angularjs.org/

Pulsas el botón de descarga y encontrarás diversas opciones. Escoges la versión del framework (si es que te lo permite) y que esté minimizada (minified). Luego encontrarás un campo de texto donde está la URL de la librería (esa URL está marcada con las siglas "CDN" al lado). Ya sabes que el CDN te ofrece un contenido, en este caso un script Javascript, que está alojado en otro servidor, pero que lo puedes usar desde tu página para mejorar la entrega del mismo.

Nota: La versión minimizada pesa menos en Kb, por lo que será la adecuada para cualquier sitio que tengas en producción. Sin embargo la versión sin comprimir "Uncompressed" tiene el código completo, con comentarios, sangrado, etc. lo que hace que sea más fácil de leer por humanos. Puedes usar si lo deseas la versión sin comprimir en la etapa de desarrollo.

Será algo como https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js aunque todo depende de la versión que haya en el momento en el que tú leas esta guía de iniciación.

Incluir AngularJS en una página web

Una vez tienes tu CDN puedes incluir el script de Angular en la página con la etiqueta SCRIPT. Ese script lo puedes colocar en el HEAD o bien antes del final del BODY, en principio no habría diferencias en lo relativo a la funcionalidad, pero sí hay una pequeña mejora si lo colocas antes de cerrar el cuerpo.

Simplemente, si lo colocas en el HEAD estás obligando a que tu navegador se descargue la librería de AngularJS, retrasando quizás la descarga de áreas de la página con contenido. Si lo colocas antes de cerrar el BODY facilitas la vida a tu navegador, y por añadido a tus usuarios, pues podrá descargar todo el HTML, ir renderizando en la pantalla del usuario los contenidos sin entretenerse descargando AngularJS hasta que sea realmente necesario.

Declarar directivas

Hay un paso más para dejar lista una página donde quieras usar AngularJS. Es simplemente colocar la directiva ng-app en la etiqueta que englobe la aplicación. Más adelante hablaremos con más detalle de las directivas y daremos algunos tips para usarlas mejor. Por ahora puedes quedarte simplemente con la necesidad de informar a AngularJS del contenedor HTML donde va a desplegar su "magia".

Típicamente pondrás ng-app en la etiqueta HTML de inicio del documento.

<!DOCTYPE html>
<html lang="en" ng-app>
<head>
<meta charset="UTF-8">
<title>Ej de AngularJS</title>
</head>
<body>

... Aquí el cuerpo de tu página ...

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

Así como ng-app, existen muchas otras directivas para enriquecer tu HTML, aun veremos alguna más en este artículo.

Hola Mundo en AngularJS

Ahora vamos a poner algo de carne en el asador y vamos a observar la potencia de AngularJS con muy poco código. Realmente, como observarás, se trata de cero código (Javascript).

Nota: El código de este Hola Mundo lo puedes encontrar también, prácticamente la misma implementación, en la home de AngularJS.

Vamos a colocar un formulario con un campo de texto.

<form>
¿Cómo te llamas? <input type="text" ng-model="nombre">
</form>

Observa que en el campo de texto hemos usado ng-model y le hemos asignado un valor. Ese ng-model es otra directiva que nos dice que ese campo de texto forma parte de nuestro modelo y el valor "nombre" es la referencia con la que se conocerá a este dato. Insisto en que más adelante hablaremos con detalle sobre estos datos y veremos nuevos ejemplos.

Ahora vamos a crear un elemento de tu página donde volcaremos lo que haya escrito en ese campo de texto.

<h1>Hola {{nombre}}</h1>

Como ves, dentro del H1 tenemos {{nombre}}. Esas dobles llaves nos sirven para indicarle a AngularJS que lo que hay dentro es una expresión. Allí podemos colocar cosas (código) para que Angular resuelva por nosotros. En este caso estamos colocando simplemente el nombre del modelo o dato que queremos mostrar.

Código completo

Nuestro ejemplo es perfectamente funcional. Si estabas esperando que escribiésemos algo de Javascript, lamento decepcionarte. La potencia de AngularJS es justamente que muchas cosas se pueden hacer en el documento HTML simplemente extendiendo sus posibilidades a través de directivas y expresiones.

Claro que para que esto funcione, por debajo el framework hace muchas cosas, pero de momento no es el caso extenderse más.

Puedes ver el código completo a continuación. Puedes copiarlo y pegarlo tal cual en tu editor de texto, en un nuevo archivo .html y debería de funcionarte sin ningún problema.

<!DOCTYPE html>
<html lang="en" ng-app>
<head>
    <meta charset="UTF-8">
    <title>Ej de AngularJS</title>
</head>
<body>
    <h1>Hola {{nombre}}</h1>
    <div class="contenedor">
        <form action="">
            ¿Cómo te llamas? <input type="text" ng-model="nombre">
        </form>
    </div>

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

En el siguiente artículo nos extenderemos un poco más en las explicaciones. De momento es interesante que observes que sin necesidad de escribir código Javascript AngularJS es capaz de implementar una bonita funcionalidad. Solo piensa el código que necesitarías con Javascript "nativo" para hacer este ejercicio o usando otros sistemas como el popular jQuery.

Autor

Miguel Angel Alvarez

Miguel es fundador de DesarrolloWeb.com y la plataforma de formación online EscuelaIT. Comenzó en el mundo del desarrollo web en el año 1997, transformando su hobby en su trabajo.

Compartir

Comentarios

Saúl Moratín

04/9/2014
primeros pasos con Angular
Así visto parece muy sencillo trabajar con AngularJS, ya veremos cuando se vaya complicando el cuento... supongo que entonces costará más realizar el desarrollo. Nos iréis contando.

Ruben

14/9/2014
Me parece sencillo
Me parece sencillo la libreria, pero yo soy de usar mas Jquery, esque cuando uno se acostumbra.... Pero me parece interesante esta libreria, no sabia que existia. Empezare a trabajar con ella haber que tal. Muchas gracias por la pequeña explicacion y espero mas cosas haber que nos puede ofrecer :)

Oscar

15/9/2014
AngularJS
Espero con ansiedad, los siguientes pasos.

Marcelo

25/9/2014
Angular.js
Muy buen artículo... recién tuve la oportunidad de esta libreria y me parece muy interesante..

Javier Garcia

20/10/2014
Genera error
Buena tarde

El codigo que indicas genera este error net::ERR_INSECURE_RESPONSE y no funciona

lsri8088

19/12/2014
Se ve la directiva
Curioso.... la primera vez que ejecuto el ejemplo, con la caché del navegador limpia, se ve por un instante la directiva {{nombre}} ... esto lo ve mi cliente y me cruje

lsri8088

19/12/2014
el script de angular en el HEAD
Lo acabo de comprobar, si pongo el scrtip de Angular en el HEAD (en vez de al final del BODY), ya no se ve la directiva del H1.
Esto es muy importante sobre todo de cara a conexiones lentas, como pueden ser los moviles por debajo de 3G.
De nada sirve que se cargue la página si no va a funcionar hasta que se cargue el angularjs, con lo cual creo que es mejor cargarlo en el HEAD.

PD: Muy buenos artículos, continuo....

mriverodorta

29/1/2015
Libro en español sobre AngularJS
"AngularJS Paso a Paso?
La primera guía completa en español para adentrarse paso a paso en el mundo de AngularJS
En este libro podrás encontrar una forma fácil y entretenida de aprender AngularJS. Paso a paso te guiaré hacia las características que hacen único y espectacular este Framework de Javascript
Adquiere tu copia en http://bit.ly/AngularJSPasoAPaso

MI nombre

16/5/2015
HEAD vs BODY
Para esta parte del tutorial, las observaciones de lsri8088 son correctas, si no quieres que se vea {{nombre}} al momento de cargar la pagina tendrás que poner el script en el HEAD.

Gracias por compartir.

nombre

19/6/2015
NG-BIND
Hi,
Se puede utilizar "ng-bind" para evitar que se vea "{{nombre}}" al momento de cargarse la página y de esta manera mantener la carga de AngularJs al final:

<body>
<h1>Hola <span ng-bind="nombre"></span></h1>
<div class="contenedor">
<form action="">
¿Cómo te llamas? <input type="text" ng-model="nombre">
</form>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
</body>

borjaJS

15/3/2016
div class= contenedor
Buenas, estoy adentrándome en este mundo de AngularJS.
El caso es que cuando pongo div class= contenedor u otros como probe div class= tarjeta, que usaba un tipo en un videotutorial a mi no se me pone ningun formato a la hora de abrirlo en chrome..
¿como soluciono esto? Gracias amigos!!

jeesy

07/2/2017
grx
facil y entendible gracias

MARK

24/2/2017
ANGULARJX I LIKE
me está empezando a gustar angular, mano arriba

Saul Fernandez

24/7/2017
binding
Good job man!!