Tutorial de AngularJS: Tema 5 – Hola Mundo

AngularJS

Después de unos días de inactividad volvemos a la carga con nuestros tutoriales de AngularJS.

Hoy vamos a programar nuestra primera web-app en AngularJS, nuestro primer Hola Mundo!Por ahora vamos a dejar de lado la estructura de carpetas y los ficheros javascript separados por tipo (directivas, controladores, etc.), ya que el código que vamos a hacer en estos primeros temas va a ser muy sencillito.

Partimos de la base de que todos tenéis conocimientos de html, así que vamos al turrón.

Primero de todo, para que Angularjs haga su magia deberemos cargarlo previamente en el html:

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

Esta línea se puede añadir al header o al final del body de la página. Nosotros solemos añadirla al final porque mientras se cargan los javascripts el navegador pinta el resto de componentes del html.

Ahora vamos a ver el código del ejemplo y desgranarlo:

<html class="ng-scope" ng-app>
<head>
 <title>Hola Mundo! - AngularJS - eXpert Designs -</title>
</head>
<body>
Escribe en el textbox:
<input ng-model="saludo" type="text">

<h2>Hola {{saludo}}!</h2>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.16/angular.min.js"></script>
</body>
</html>

Lo primero que observamos es la etiqueta ng-app. Esta etiqueta es una directiva de Angularjs que indica cuál es el elemento raiz de donde colgará la aplicación. Normalmente se suele poner en la etiqueta body o html. Más adelante os daremos más información de cómo utilizarla.

<html ng-app>

Lo siguiente que vemos es cómo pintar el resultado de lo que se escribe en el input con Angularjs, haciendo uso del Data Binding. Para ello, usaremos la directiva ng-model cuya propiedad identificará el campo y valor de la variable saludo del scope:

<input ng-model="saludo" type="text">
<h2>Hola {{saludo}}!</h2>

El resultado lo tenéis aquí delante:

Y eso es todo por hoy. Como veis, Angularjs simplifica mucho la programación ya que consigue que con un par de líneas y unos atributos que implementan las etiquetas html se consigan resultados rápidamente.

Deja un comentario

A %d blogueros les gusta esto: