logo angularJS

Aprendiendo AngularJS (I)

Aunque la primera versión de AngularJS salió en 2012, la gente de Google ya estaba trabajando en esta librería desde 2009. Parece que la idea cuajó bastante bien entre la gente de Cupertino y rápidamente se convirtió en un proyecto corporativo importante para Google.

Aprender AngularJS no es dificil siempre y cuando controles la base de la programación web:

Si no controlas los lenguajes anteriores lo mejor es que te pongas a ello y luego comiences a trabajar este material.

Si quieres ser programador web, deberás controlar JavaScript, CSS y HTML pero para realizar aplicaciones web necesitas algo más. Realizar una aplicación con estas herramientas es lento y vas a encontrarte con muchos errores. Actualmente los programadores utilizan AngularJS y otros lenguajes como TypeScript que son extensiones de JavaScript que permite crear tipos, programar orientado a objetos, etc.

TypeScript y AngularJS

Tanto TypeScript como AngularJS están respaldados por Microsoft y Google con lo cual te aseguras que tus aplicaciones tendrán una buena vida útil y el periodo de soporte serán más largos. Tu código tendrá menos errores puesto que el framework será el responsable de muchas de la programación de tu aplicación. Eso implica que estás usando un código actualizado, probado y eficiente.

Veamos el primer ejemplo con AngularJS. El código del mismo es el siguiente:

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

<div ng-app="">

<p>Escribe tu nombre aquí debajo:</p>
<p>Nombre : <input type="text" ng-model="name" placeholder="Pon tu nombre aquí"></p>
<h1>Hola {{name}}</h1>

</div>

Y este es el aspecto del código anterior:

Escribe tu nombre aquí debajo:

Nombre :

Hola {{name}}

Ejercicio 1.1:
Crea una página web e inserta el código anterior.
Como consejo sería mejor que insertaras el código del script antes del body y tu página resultaría más eficiente.

Como puedes ver, AngularJS es un framework escrito en JavaScript que puedes incorporar a tus páginas incluyendo el siguiente código:

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

Otra cosa que te habrá llamado la atención es que además de las etiquetas de HTML aparecen otras nuevas tipo ng-… que se llaman ng-directives las cuales nos van a permitir incorporar AngularJS a nuestra página web. En el ejemplo anterior tenemos:

  • ng-app. Le dice al navegador que esta es una aplicación AngularJS.
  • ng-model. Enlaza los controles HTML por ejemplo nuestro input a los datos de la aplicación AngularJS. En nuestro caso
  • ng-bind. Realiza lo contrario. Enlaza los datos de la aplicación al HTML. En nuestro ejemplo no lo hemos utilizado porque nos ha bastado hacer {{name}}, pero también podríamos haber hecho lo siguiente:

<h1 ng-bind="name"></h1>

Ejercicio 1.2:
Modifica el ejemplo anterior para incluir el código nuevo que te mostramos arriba.
Recuerda:
Las expresiones en angular se escriben entre dobles llaves {{ y }}. Mira la siguiente línea de código:
<h1>Hola {{name}}</h1>

Deja una respuesta

Tu dirección de correo electrónico no será publicada.

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.