AngularJS. Mi primer script “Hola Mundo”


AngularJSAngularJS es un framework de JavaScript desarrollado por Google cuyo objetivo es aumentar la capacidad de las aplicaciones del lado del navegador con la aplicación del patrón de diseño Modelo-Vista-Controlador (MVC).

AngularJS amplia el tradicional HTML para dotarlo de contenido dinámico mediante una tecnología de actualización de datos bidireccional que permite la sincronización automática entre el Modelo y la Vista.

En este artículo voy a programar un script en AngularJS que muestre la celebre frase “Hola Mundo”.

En primer lugar, las etiquetas de HTML extendido y otros elementos básicos de AngularJS que se van a utilizar son:

  • ng-app: atributo que sirve para indicar que el módulo principal de la aplicación.
  • ng-controller: con esta directiva se designa el acceso a un controlador. Sirve para comunicar la vista y el modelo.
  • {{var}}: variable definida en Javascript sobre el $scope de AngularJS.

La aplicación se crea mediante el método angular.module asignándola a una variable que invocaremos en nuestro index.html mediante la directiva ng-app (en este caso “app”).

Con el método controller creamos el controlador que invocaremos en el fichero index.html con la directiva ng-controller. En este método también se define la función que asigna la variable texto en el $scope y que comunica nuestro modelo (en este caso la asignación de variable) con la vista (el fichero index.html).

En cuanto a la estructura de directorios y archivos, para esta sencilla aplicación, sólo tendremos un archivo principal de la aplicación app/app.js y el fichero index.html

app/app.js

index.html

Y con esta ya está lista la aplicación “Hola Mundo” en AngularJS. Si quieres descargar los ficheros lo puedes hacer en este enlace HolaMundo.zip

¿Te ha parecido sencillo? Si tienes cualquier duda escríbeme y trataré de ayudarte.

One thought on “AngularJS. Mi primer script “Hola Mundo”

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *