Aprende cómo funciona AngularJS con este sencillo ejemplo

En este artículo os mostraré cómo crear un "Hola Mundo" genérico, práctica que todos hemos realizado al iniciarnos en algún lenguaje, utilizando AngularJS en una aplicación ASP.NET. AngularJS funciona genial en HTML, MVC y ASP.NET y además, contiene algunas directivas muy importantes como np-model, np-bind, np-app y np-controller, todas serán explicadas a base de ejemplos para que quede todo bien claro. Así que, sin más dilación vamos a saludar al mundo como se merece con AngularJS, el framework javascript utilizado normalmente para crear proyectos de una sola página.

Paso 1

En primer lugar es necesario insertar el fichero externo de Angular.js en tu aplicación. Para ello, puedes ir a la página oficial de AngularJS o descargarlo desde aquí. Después de descargar el fichero externo, necesitas añadir este código en el head de tu aplicación.

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

Paso 2

Ahora toca crear la función que mostrará nuestro Hola Mundo en la aplicación. Añade esta función de Javascript en la sección head de tu aplicación.

<script>
function HelloWorld($scope) {
 $scope.test = 'Mundo';
 }
</script>

Aquí, hemos creado una función llamada "HelloWorld". En esta función HelloWorld, $scope crea la conexión entre la función y la vista, o en otras palabras, la parte de diseño. "Test" es una variable que tendrá "Mundo" como valor por defecto.

Paso 3

Ahora crearemos un div, un textbox y varios labels para mostrar el ejemplo del Hola Mundo.

<body>
<div ng-controller="HelloWorld">
 Tu nombre: <input type="text" ng-model="test"/>
<hr/>
 Hola {{test || "Mundo"}}!
</div>
</body>

Aquí en el div, puedes ver que utilizo una directiva llamada "ng-controller", cuyo valor consiste en el nombre de la función JavaScript que se quiere aplicar a un Div, Span o cualquier elemento HTML específico.

Después, en el campo de texto utilizo la directiva "ng-model" que proporciona la unión entre la Vista y el Modelo. En ng-model, cuyo valor es "test", significa que el valor introducido en este campo se reemplazará con el valor predeterminado, establecido en la función JavaScript.

Una cosa más que hay que hacer y que es muy importante. Hay que añadir la directica "ng-app" en la etiqueta HTML.

<html ng-app xmlns="http://www.w3.org/1999/xhtml">

ng-app declara que esto es una página AngularJS. Si no agregas esta directiva en la etiqueta HTML, tu aplicación no funcionará correctamente porque no podrá detectar las demás directivas de AngularJS.

Ahora nuestra aplicación de Hola Mundo está lista para ser ejecutada.

El código completo de la aplicación es el siguiente:

<html ng-app xmlns="http://www.w3.org/1999/xhtml">
<head>
<script src="angular.min.js"></script>
<script>
function HelloWorld($scope) {
 $scope.test = 'Mundo';
 }
</script>
</head>
<body>
<div ng-controller="HelloWorld">
 Tu nombre: <input type="text" ng-model="test"/>
<hr/>
 Hola {{test || "Mundo"}}!
</div>
</body>
</html>

Y este ha sido el artículo en el que trataba explicaros cómo funciona AngularJS con un sencillo ejemplo, esperamos que te haya gustado y sepas aplicarlo en tus futuros proyectos. Ya sabes que si nos quieres proponer un tema que quieres ver reflejado como un tutorial o como una práctica, solo tienes que hacer uso del área de comentarios de un poco más abajo. Por el contrario, si quieres enviarnos tus propios tutoriales, puedes hacerlo a través de la intranet de usuarios que está habilitada para ello, a través del menú Enviar Tutorial. Ya sabes, ayúdanos a crecer con tus conocimientos. ¡Un saludo y feliz código!

COMPARTE ESTE ARTÍCULO

COMPARTIR EN FACEBOOK
COMPARTIR EN TWITTER
COMPARTIR EN LINKEDIN
COMPARTIR EN WHATSAPP