Instalando Angular JS Más videos
Descripción del tema
En este tema vamos a instalar la Angular JS para poder iniciar un proyecto, existen varias manera de hacerlo, bien podemos utilizar bower, descargar el archivo JS de la librería o usar el CDN que Angular nos proporciona.
Para este curso estaremos usando la versión 1.3.0, que es la última versión al momento de escribir este tutorial, además de que esta versión esta siendo desarrollada activamente.
Vamos a crear un HTML completamente vacío donde lo único que haremos será incluir la librería de angular desde el CDN.
<!DOCTYPE html>
<html>
<head>
<title>Installation - Angular JS</title>
</head>
<body>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.0-rc.1/angular.min.js"></script>
</body>
</html>
Lo siguiente que haremos será agregar en el body del HTML anterior el siguiente código:
<div ng-init="name='John Smith'">
<h1>Welcome {{name}}</h1>
</div>
En el código anterior se esta inicializando una variable name mediante el atributo ng-init, luego se imprime esta variable dentro del título, para imprimir una variable usamos {{ y }}. Obviamente el código anterior es una muy mala práctica, más adelante veremos como usar controllers donde inicializaremos variables, arreglos, etc. Por el momento lo hacemos directamente en el html.
Si vamos a nuestro navegador y visualizamos estos cambios, veremos que no ha sucedido nada del otro mundo, simplemente veremos Welcome {{name}}.
Incluyendo la librería de Angular JS
Para que la angular inicialíze la aplicación necesitamos definir el atributo ng-app en el documento HTML, generalmente esto lo hacemos en el tag <html>, pero bien lo podríamos hacer en el <body> o en cualquier otro lugar.
<!DOCTYPE html> <html ng-app> //... </html>
Cuando la página se carga angular busca el atributo ng-app, y comienza a evaluar el resto de atributos o etiquetas que se encuentren por debajo del nodo que donde hemos definido el ng-app, en este caso lo definimos en el nodo principal, esto significa que todo el documento será una aplicación angular. Si actualizamos el navegador ahora veremos algo como la siguiente imagen.
Inicializando Angular JS
Como se puede apreciar, ya se esta evaluando correctamente la variable name. Lo siguiente que haremos es agregar un input para poder modificar el contenido de la variable name.
<div ng-init="name='John Smith'">
<h1>Welcome {{name}}</h1>
<p><input ng-model="name" type="text" /></p>
</div>
Aquí estamos usando el atributo ng-model, en angular a estos atributos se les llaman directivas, existen directivas de tipo elemento, atributo y clase (css), ya hablaremos más adelante sobre como crearlas, por el momento solo es necesario conocer el término.
Si refrescar el navegador y comienzas a escribir en la caja de texto, verás que automáticamente se refresca el título, a esto se le llama Two way data binding y es una de las características que más llaman la atención de angular.
Two way data binding
Pues bien, así es como instalamos Angular JS, ya estamos listos para comenzar a desarrollar alguna app o proyecto interesante. En el siguiente tutorial veremos como crear módulos para comenzar a ordenar nuestro código de una mejor manera.
Puede descargar el código fuente de este tutorial así como ver el demo. Te agradecería en gran manera que puedas compartir este tutorial en tus redes sociales, me ayudarías mucho de esa manera.
Te gustaría recibir más tutoriales como este en tu correo?
Este tutorial pertenece al curso Introducción a Angular JS, te recomiendo revises el resto de los tutoriales ya que están en secuencia de menor a mayor complejidad.
Si deseas recibir más tutoriales como este en tu correo te recomiendo registrarte al curso, si ya eres miembro solo identifícate y registrate al curso, si no eres miembro te puedes registrar gratuitamente!
Si no gustas registrarte en este momento no es necesario! Aún así puedes recibir los nuevos tutoriales en tu correo! Jamás te enviaremos Spam y puedes cancelar tu suscripción en cualquier momento.
Instructor del curso
Regístrate a este curso
Este tutorial pertenece al curso Introducción a Angular JS, revisa todos los tutoriales que tenemos en este mismo curso ya que están en secuencia y van de lo más sencillo a lo más complicado.
Tendrás acceso a descargar los videos, códigos y material adicional.
Podrás resolver los ejercicios incluidos en el curso así como los Quizzes.
Llevarás un registro de tu avance.
30Comentarios
Excelente Crysfel!
Muy Interesante...!!!
Que bien!!! Muchas gracias por este curso!
Sigues siendo el mejor :D
Me alegra que este curso te sea de beneficio, mañana planeo sacar el siguiente tema sobre como actualizar, crear y borrar un Bookmark :) Te recomiendo unirte a la comunidad ;) Saludos
Muy buen tutorial. Gracias.
muchas gracias, excelente
Buenísimo, empiezo a amar angular. Gracias por el curso
Genial... seguire adelante muchas gracias..
Como es costumbre en usted, excelente material.
Excelente!!, Sigue asi compañero. Me esta ayudando bastante comprender Angular.... Saludos desde Perú, espero mas tutoriales eres muy bueno explicandolos, pocos tienen esa capacidad
Muy bueno! bien explicado!! desde Paraguay!
Hola, tengo un problema, a ver si me pueden ayudar ... gracias si clico en "ver demo" lo veo todo correcto y funciona bien, pero pongo yo el código en el notepadd y lo ejecuto (aunque sea copiar y pegar del original que funciona) y no se ve correcto, Es como si no tuviera el atributo ng-app definido, es decir, se ve Welcome {{name}}
Silvia, serviria de mucho si compartieras las lineas de codigo que deseas ejecutar en tu navegador para comprender un poco mejor la situacion. Saludos
<!DOCTYPE html> Installation - Angular JS Welcome {{name}} <p></p>
<!DOCTYPE html> Installation - Angular JS Welcome {{name}} <p></p>
Silvia, serviria de mucho si compartieras las lineas de codigo que deseas ejecutar en tu navegador para comprender un poco mejor la situacion. Saludos
<!DOCTYPE html> Installation - Angular JS Welcome {{name}} <p></p>
<!DOCTYPE html> Installation - Angular JS Welcome {{name}} <p></p>
no se que pasa, pero copio el código y lo pego y no se ve bien mi código es exactamente como el del vídeo y como el que expone aquí Crysfel, pero cuando ejecuto el código me sale Welcome {{name}} y abajo el text box para poder escribir (que no deja escribir en el) tengo el chrome, pero lo probé en ie y sale exactamente igual
Antes que cualquier cosa, permiteme decir que soy completamente nuevo utilizando esta libreria; tengo apenas una que otra semana desarrollando una aplicacion web en mi trabajo con este frame.... Aclarado lo anterior te comento Lo que pasa es que no esta cargando el archivo angular.min.js desde la CDN; esto es la linea Lo que puedes hacer es descargar la carpeta completa de angular y guardarla en donde tienes tu proyecto, una vez hecho esto cambias la linea que te comente por algo como Esta version es la ultima estable de angular, al menos es la que te aparece al descargar desde angularjs.org. Haciendo esto ya te va a controlar tu modelo vista en el navegador y te va a aparecer el contenido de la variable {{name}} en lugar de la variable en si.
Bueno olvide que no se permite postear partes de codigo la linea que arroja el error es la que esta entre la etiqueta script... cambia esto (omiti las barras y puse signo plus en su lugar): ajax.googleapis.com+ajax+libs+angularjs+1.3.0-rc.1+angular.min.js Guardas la carpeta que descargues de angularorg en la misma carpeta donde tienes tu archivo index-html y pones algo asi: angular-1.4.4+angular.min.js Espero haber sido claro Saludos
sí perfecto, ya me funciona, gracias!!!!! ahora a seguir con el curso jejeje un saludo,
Excelente Saludos desde México.
Excelente explicación andaba buscando material de referencia para iniciarme en el entorno de programación que nos Brinda Angular_JS, este sitio llena todas mis expectativas, en cuanto a organización, referenciación, materiales, pedagogía e interactividad , en fin mis más sinceras Felicitaciones.
Excelente curso, muchas gracias por el aporte....
excelente gracias por compartir voy a aprender mucho gracias a ti
Buen dia estimados, felicidades por este Blog gracias a ti y varios amigos aprendi EXTJS 3.4, que todavia me rehuso a dejar... Quiero aprender Angular mi duda es la siguiente en la pagina oficial de ANGULAR, va por la version angular-1.6.5... Hay mucha diferencia con la version que utilizas en este curso?
De hecho va por la versión 4.3.3 xD la cual es muy diferente a la versión 1.x. La verdad es que deje de usar angular hace ya un buen rato ahora hago React :)
muy buena introduccion