angular (1): introducción

Primera entrada de una serie dedicada a angular js

Lilanga

archivado en: JavaScript / 6 mayo, 2014 / taller:

Angular js es un framework para trabajar con javaSript siguiendo un patrón MV*, que vendría a ser Modelo-Vista-Lo que sea. Es más intuitivo, o al menos a mí me lo parece, que backbone-marionette y está desarrollado por Google, con todo lo que esto conlleva.

En esencia, sirve para generar aplicaciones web o single page applications (SPA) de una forma ordenada, ágil, eficaz y, sobre todo, estandarizada; lo que a mi entender es su principal virtud, pues, en vez de montarte tú mismo un batiburrillo de código ininteligible por terceros (o por ti mismo pasado un tiempo), al seguir unas pautas, resulta mucho más fácil de mantener y comprender.

Y como esto de las introducciones es una lata, vamos ya al lío sin más preámbulos.

Comenzamos

Aunque es más cómodo preparar toda la aplicación que correrá bajo angular con node.js, para no liarla y que sea un tutorial de complejidad creciente, vamos a hacerlo primero a la manera tradicional.

Para no perder el tiempo con chorradas, nos bajamos el HTML5 Boilerplate, que nos deja preparada esta estructura:

cosas sin importancia

index.html

js/vendor

En el archivo main.js pondremos nuestras primeras líneas de angular y en el index cargamos el framework, que bajaremos desde la página oficial y lo guardaremos en vendor.

Quitamos líneas irrelevantes para lo que nos atañe del index y cargamos ahí angular:

<!DOCTYPE html>

<head>

<meta charset="utf-8">

<title></title>

<link rel="stylesheet" href="css/normalize.css">

<link rel="stylesheet" href="css/main.css">

</head>

<body>

<!--  Aquí irán las "plantillas" -->

<script src="js/vendor/jquery-1.10.2.min.js"></script>

<script src="js/vendor/angular.min.js"></script>

<script src="js/main.js"></script>

</body>

</html>

El inevitable hola Mundo

Ya con todo listo, vamos a preparar un hola mundo que nos permita comprender el mecanismo básico de angular. En este framework, toda especificación propia viene indicada por la partícula ng-algo y la primera que tenemos que indicar es la parte del código de index que queremos que se vea afectada por angular. En este ejemplo será todo el body, pero se pueden especificar partes más concretas. Así, en el body añadiremos la «directiva» ng-app, que viene a significar algo así como «aquí empieza mi tinglado angularesco»

<body ng-app>

Ahora preparamos un primer controlador mediante la directiva ng-controller, que podemos incluir en cualquier contenedor, como un div. Aunque en realidad no deberíamos hablar de controlador, sino de vista, pues es una vista que manejaremos desde otro sitio, donde estará realmente el controlador en el sentido clásico del término. Bueno, esto ahora carece de importancia.

<body ng-app>

Soy una aplicación angular

<div ng-controller='miControlador'>

<p> {{ textoDinamico }} </p>

</div>

En este controlador-vista encontramos una variable entre dos pares de llaves. Así le indicamos a angular que esa variable deberá ser sustituida por un valor que le enviaremos desde el controlador propiamente dicho. Es decir, es como si ahí tuviéramos una plantilla con valores que irán cambiando dinámicamente, al igual que cualquier otro sistema de plantillas js como handelbars.

Ahora, en el archivo main.js, escribimos la función asociada a ese fragmento de código, ahora ya sí, el controlador.

function miControlador($scope) {

$scope.textoDinamico = "hola Mundo";

}

Ale op, si ahora abrimos en el navegador el archivo index.html, en pantalla se nos muestra un originalísimo hola Mundo, pero no tenemos tiempo para aplaudir maravillados ante la poesía de esta cadena de texto, pues debemos fijarnos ese $scope, que lleva por parámetro la función miControlador.

Como veremos en detalle más adelante (o aquí si alguien tiene prisa), $scope es un objeto que sirve para comunicar las vistas con sus respectivos controladores. Así, si hacemos un console.log debajo de $scope.textoDinamico, vemos que, entre otras cosas, tiene definida la variable textoDinamico, que será la que luego se leerá en la vista.

$$childHead: null

$$childTail: null

$$listenerCount: Object

$$listeners: Object

$$nextSibling: null

$$prevSibling: null

$$watchers: Array[1]

$id: "003"

$parent: h

textoDinamico: "hola Mundo"

this: a

__proto__: h

Bueno, de momento vamos a dejarlo aquí.

|| Tags: ,

valoración de los lectores sobre angular (1): introducción

  • estrellica valoración positiva
  • estrellica valoración positiva
  • estrellica valoración positiva
  • estrellica valoración positiva
  • estrellica valoración negativa
  • 4.3 sobre 5 (6 votos)

¿Te ha parecido útil o interesante esta entrada?
dormido, valoración 1 nadapensativo, valoración 2 un poco sonrisa, valoración 3 a medias guiño, valoración 4 bastante aplauso, valoración 5 mucho

Tú opinión es muy importante, gracias por compartirla!

Los comentarios están cerrados.