En este tema vamos a instalar la Angular JS para poder iniciar un proyecto, existen varias manera de hacerlo, bien podemos utilizar bower, descargar el archivo JS de la librería o usar el CDN que Angular nos proporciona.

Para este curso estaremos usando la versión 1.3.0, que es la última versión al momento de escribir este tutorial, además de que esta versión esta siendo desarrollada activamente.

Vamos a crear un HTML completamente vacío donde lo único que haremos será incluir la librería de angular desde el CDN.

<!DOCTYPE html>
<html>
<head>
    <title>Installation - Angular JS</title>
</head>
<body>

    <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.0-rc.1/angular.min.js"></script>
</body>
</html>

Lo siguiente que haremos será agregar en el body del HTML anterior el siguiente código:

<div ng-init="name='John Smith'">
    <h1>Welcome {{name}}</h1>
</div>

En el código anterior se esta inicializando una variable name mediante el atributo ng-init, luego se imprime esta variable dentro del título, para imprimir una variable usamos {{ y }}. Obviamente el código anterior es una muy mala práctica, más adelante veremos como usar controllers donde inicializaremos variables, arreglos, etc. Por el momento lo hacemos directamente en el html.

Si vamos a nuestro navegador y visualizamos estos cambios, veremos que no ha sucedido nada del otro mundo, simplemente veremos Welcome {{name}}.

Para que la angular inicialíze la aplicación necesitamos definir el atributo ng-app en el documento HTML, generalmente esto lo hacemos en el tag <html>, pero bien lo podríamos hacer en el <body> o en cualquier otro lugar.

<!DOCTYPE html>
<html ng-app>

//...

</html>

Cuando la página se carga angular busca el atributo ng-app, y comienza a evaluar el resto de atributos o etiquetas que se encuentren por debajo del nodo que donde hemos definido el ng-app, en este caso lo definimos en el nodo principal, esto significa que todo el documento será una aplicación angular. Si actualizamos el navegador ahora veremos algo como la siguiente imagen.

Como se puede apreciar, ya se esta evaluando correctamente la variable name. Lo siguiente que haremos es agregar un input para poder modificar el contenido de la variable name.

<div ng-init="name='John Smith'">
    <h1>Welcome {{name}}</h1>

    <p><input ng-model="name" type="text" /></p>
</div>

Aquí estamos usando el atributo ng-model, en angular a estos atributos se les llaman directivas, existen directivas de tipo elemento, atributo y clase (css), ya hablaremos más adelante sobre como crearlas, por el momento solo es necesario conocer el término.

Si refrescar el navegador y comienzas a escribir en la caja de texto, verás que automáticamente se refresca el título, a esto se le llama Two way data binding y es una de las características que más llaman la atención de angular.

Pues bien, así es como instalamos Angular JS, ya estamos listos para comenzar a desarrollar alguna app o proyecto interesante. En el siguiente tutorial veremos como crear módulos para comenzar a ordenar nuestro código de una mejor manera.

Puede descargar el código fuente de este tutorial así como ver el demo. Te agradecería en gran manera que puedas compartir este tutorial en tus redes sociales, me ayudarías mucho de esa manera.

Te gustaría recibir más tutoriales como este en tu correo?

Este tutorial pertenece al curso Introducción a Angular JS, te recomiendo revises el resto de los tutoriales ya que están en secuencia de menor a mayor complejidad.

Si deseas recibir más tutoriales como este en tu correo te recomiendo registrarte al curso, si ya eres miembro solo identifícate y registrate al curso, si no eres miembro te puedes registrar gratuitamente!