AngularJS - ¿Que necesitamos para comenzar a desarrollar con AngularJS? - Incluir AngularJS a nuestra pagina web - Primer código con AngularJS
Hoy continuaremos viendo AngularJS, en el día de hoy pondremos nuestros nuestras manos en el código. Finalmente!
Editor de texto: Entre ellos existen muchos en mi caso el notepad++, ya que pose colores para reconocer sintaxys pero cada cual a su gusto.
Navegador: Es sumamente importante que tengamos varios navegadores ya que no siempre en todos se ve la misma manera. En mi caso utilizare el chrome.
Si utiliza desde el CND sera algo así:
https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js
Empecemos con un ejemplo sencillo el famoso hola mundo:
AngularJS - ¿Que necesitamos para comenzar a desarrollar con AngularJS?
Bueno antes de comenzar a desarrollar con AngularJS necesitamos tener siempre a mano nuestro editor de texto preferido y nuestro navegador preferido.Editor de texto: Entre ellos existen muchos en mi caso el notepad++, ya que pose colores para reconocer sintaxys pero cada cual a su gusto.
Navegador: Es sumamente importante que tengamos varios navegadores ya que no siempre en todos se ve la misma manera. En mi caso utilizare el chrome.
AngularJS - Obtener AngularJS
En el post anterior hablamos de esto les dejo el link por si acaso. Pasar por aca!. Una vez bajado lo agregamos a nuestro proyecto,obviamente no hace falta que lo bajemos también podemos importar la librería de AngularJS que se encuentra en el servidor de google, el CDN (Content Delivery Network), esto es recomendable para hacer pruebas y aprender pero no ambientes productivos, por alguna razón bajan la url y dejara de funcionar de AngularJS y dejara de funcionar.Si utiliza desde el CND sera algo así:
https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js
Nota: Al momento de escribir esto la ultima versión vigente de angularjs es la 1.3.15.
AngularJS - Incluir AngularJS a nuestra pagina web
Una vez que ya tenemos AngularJS ya sea la url del CDN o bajado a nuestra pc, tenemos que agregar la misma dentro etiqueta HTML HEAD, con la etiqueta SCRIPT. Esto si bien se puede hacer en el HEAD o antes del final de la etiqueta BODY.
Esta diferencia se debe a dos cosas, si la agregamos al principio el navegador se bajo primero le AngularJS luego renderiza, es decir dibuja, pero si lo agregamos al final lo que hace es primero dibuja la pantalla, luego carga AngularJS y realiza lo que debe hacer.
AngularJS - Primer código con AngularJS
A llegado la hora finalmente ya podemos empezar a probar toda la funcionalidad de AngularJS.Empecemos con un ejemplo sencillo el famoso hola mundo:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Ejemplo AngularJS - Lado oscuro de Java</title>
</head>
<body>
</body>
</html>Por el momento ya tenemos nuestra primer pagina HTML plana totalmente sin nada excepto con el titulo Ejemplo AngularJS - Lado oscuro de Java.
Ahora agregaríamos las directivas mas allá lo que ya explicamos anteriormente (hacer clic acá) solo diremos que las tenemos que agregar para que AngularJS entienda que sobre que etiquetas puede trabajar. En nuestro caso le diremos que puede usar todo la HTML. y agregaremos la directiva ng-app.
Bien agreguemos AngularJS a nuestro código
Ahora agregaríamos las directivas mas allá lo que ya explicamos anteriormente (hacer clic acá) solo diremos que las tenemos que agregar para que AngularJS entienda que sobre que etiquetas puede trabajar. En nuestro caso le diremos que puede usar todo la HTML. y agregaremos la directiva ng-app.
<html lang="en" ng-app>Nota: Mas adelante hablaremos del uso de directivas en detalle.
Bien agreguemos AngularJS a nuestro código
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>Primero dejaremos que el usuario ingrese su nombre
Tenemos que notar que el input de texto esta usando la directiva ng-model y le seteamos el valor "nombre". el atributo ng-model es una directiva que dice que el input forma parte de nuestro modelo y el valor "nombre" es la referencia con la que se toma ese dato. En otras publicaciones hablaremos sobre esto.
Ahora haremos que salude a la persona que se ingresa en un input diciéndole "hola" + variable.
Como esta mas arriba encontramos que en la etiqueta span tiene el {{nombre}}. Esas dobles llaves nos sirven para avisarle a AngularJS que lo que hay adentro es una expresión. Allí podemos colocar código para que Angular resuelva por nosotros. En este caso estamos colocando simplemente el nombre del modelo o dato que queremos mostrar
Código completo:
Ahora cuando vemos el codigo completo y los que estamos mas experimentados en el uso de JavaScript y Jquery nos damos cuenta que este codigo es sumamente sencillo y no tiene nada de funcionalidad javascript :D, como en otros casos deberíamos agregar mucha para este ejemplo!
Saludos!
<form>
¿Cual es tu nombre? <input type="text" ng-model="nombre">
</form>Tenemos que notar que el input de texto esta usando la directiva ng-model y le seteamos el valor "nombre". el atributo ng-model es una directiva que dice que el input forma parte de nuestro modelo y el valor "nombre" es la referencia con la que se toma ese dato. En otras publicaciones hablaremos sobre esto.
Ahora haremos que salude a la persona que se ingresa en un input diciéndole "hola" + variable.
<span> Hola {{nombre}}</span>Como esta mas arriba encontramos que en la etiqueta span tiene el {{nombre}}. Esas dobles llaves nos sirven para avisarle a AngularJS que lo que hay adentro es una expresión. Allí podemos colocar código para que Angular resuelva por nosotros. En este caso estamos colocando simplemente el nombre del modelo o dato que queremos mostrar
Código completo:
<!DOCTYPE html>
<html lang="en" ng-app>
<head>
<meta charset="UTF-8">
<title>Ejemplo AngularJS - Lado oscuro de Java</title>
</head>
<body>
<span> Hola {{nombre}}</span>
<form>
¿Cual es tu nombre? <input type="text" ng-model="nombre">
</form>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
</body>
</html>
Ahora cuando vemos el codigo completo y los que estamos mas experimentados en el uso de JavaScript y Jquery nos damos cuenta que este codigo es sumamente sencillo y no tiene nada de funcionalidad javascript :D, como en otros casos deberíamos agregar mucha para este ejemplo!
Saludos!
AngularJS - ¿Que necesitamos para comenzar a desarrollar con AngularJS? - Incluir AngularJS a nuestra pagina web - Primer código con AngularJS
Reviewed by El lado oscuro de java
on
mayo 15, 2015
Rating:
Reviewed by El lado oscuro de java
on
mayo 15, 2015
Rating:
No hay comentarios: