Qué es AngularJS:
AngularJS es un framework de JavaScript de lado cliente que nos sirve para agregar interactividad a nuestro HTML. Si bien, AngularJS es desarrollado por la empresa Google.
Cómo le decimos a nuestro HTML cuando disparar nuestro JavaScript?
En AngularJS usamos Directivas (directives) las cuales son una marca sobre nuestras etiquetas HTML que le dicen a Angular que ejecute o haga referencia a algún código de JavaScript.
Las directivas en Angular unen el comportamiento de nuestro HTML con el código JavaScript. Un ejemplo de directiva seria:
<body ng-controller="tienda"> </body>
En el resto de este curso vamos a desarrollar una aplicación con AngularJS llamada “tienda”.
Si bien, lo primero que tenemos que hacer para comenzar a desarrollar nuestra aplicación es descargar AngularJS de la página oficial.
Como segundo paso vamos a incluir AngularJS a nuestro HTML de la siguiente manera, yo por ejemplo coloque AngularJS dentro de una carpeta llamada “lib” (librerías):
<script type="text/javascript" src="lib/angular.min.js"></script> </body> </html>
Ahora bien, el siguiente componente que necesitamos conocer sobre AngularJS son los Módulos.
Qué es un módulo en AngularJS?
Aquí escribimos piezas de nuestra aplicación Angular. Encapsulamos código en los módulos, entonces esto hace que nuestro código sea mantenible, mas testeable y que tenga una mejor lectura.
En un modulo también definimos las dependencias de nuestra aplicación, por ejemplo un módulo puede depender de otros 2 módulos.
Para crear nuestro primer módulo, lo primero que tenemos que hacer es crear un archivo llamado “app.js” y escribimos:
var app = angular.module('tienda', []);
Te explico otro ejemplo: Declaramos una variable, dentro de esa variable hacemos referencia a AngularJS posteriormente le decimos que vamos a crear un modulo (.module) entre paréntesis va el nombre de la aplicación por ejemplo; ‘tiendaCodejobs’ y por ultimo entre corchetes pondremos algunas otras librerías de las que dependa nuestra aplicación.
Ahora bien, para hacer uso de “app.js” vamos a mandarlo llamar en nuestro HTML de la siguiente manera:
Y en nuestro HTML declararemos una directiva llamada ng-app=”tienda” de la siguiente manera:
<!DOCTYPE html> <html ng-app="tienda">
Esta directiva crea la aplicación angular y ejecuta ese modulo “tienda” cuando se lee el documento.
Qué son las expresiones en AngularJS?
Chicos, las expresiones en AngularJS nos permiten insertar valores dinámicos en nuestro HTML. Por ejemplo:
<p> Tengo {{20 + 6}} años </p>
En el navegador me mostrara: Tengo 26 años
<p> {{"Hola" + "¿Como estas?"}} </p>
En el navegador me mostrara: Hola ¿Cómo estas?
Si quieres aprender más sobre expresiones aquí te dejo el siguiente enlace
Archivos finales:
index.html
<!DOCTYPE html> <html ng-app="tienda"> <head> <title>Aprende AngularJS desde cero</title> </head> <body> <p> Tengo {{20 + 6}} años </p> <p> {{"Hola" + "¿Como estas?"}} </p> <script type="text/javascript" src="lib/angular.min.js"></script> <script type="text/javascript" src="app.js"></script> </body> </html>
app.js
var app = angular.module('tienda', []);
Te invito a que continuemos juntos en la próxima publicación sobre “Aprende AngularJS desde cero”.
0 comentarios:
Publicar un comentario