Introducción a Angular JS

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 librera de Angular

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

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

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.

¿Olvidaste tu contraseña?

30Comentarios

  • Avatar-9 ronald.salazar 18/09/2014

    Excelente Crysfel!

    • Avatar-10 juliogp 19/09/2014

      Muy Interesante...!!!

      • Avatar-10 Julio Yacot 22/09/2014

        Que bien!!! Muchas gracias por este curso!

        • Avatar-10 Rocko 16/10/2014

          Sigues siendo el mejor :D

          • Avatar-4 Crysfel Villa 16/10/2014

            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

          • Avatar-11 Francisco Selles 23/10/2014

            Muy buen tutorial. Gracias.

            • Avatar-9 moa bass 14/12/2014

              muchas gracias, excelente

              • Avatar-3 yubel 06/01/2015

                Buenísimo, empiezo a amar angular. Gracias por el curso

                • Avatar-3 Israel Castillo 22/02/2015

                  Genial... seguire adelante muchas gracias..

                  • Avatar-11 PRichard 14/04/2015

                    Como es costumbre en usted, excelente material.

                    • Avatar-9 Juan 10/09/2015

                      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

                      • Avatar-8 oscarcareaga.careaga 27/09/2015

                        Muy bueno! bien explicado!! desde Paraguay!

                        • Avatar-2 Silvia 29/09/2015

                          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}}

                          • Avatar-9 David Rodriguez 29/09/2015

                            Silvia, serviria de mucho si compartieras las lineas de codigo que deseas ejecutar en tu navegador para comprender un poco mejor la situacion. Saludos

                            • Avatar-12 Silvia 30/09/2015

                              &lt;!DOCTYPE html> Installation - Angular JS Welcome {{name}} <p></p>

                              • Avatar-5 Silvia 30/09/2015

                                &lt;!DOCTYPE html> Installation - Angular JS Welcome {{name}} <p></p>

                              • Avatar-7 David Rodriguez 29/09/2015

                                Silvia, serviria de mucho si compartieras las lineas de codigo que deseas ejecutar en tu navegador para comprender un poco mejor la situacion. Saludos

                              • Avatar-2 Silvia 30/09/2015

                                &lt;!DOCTYPE html> Installation - Angular JS Welcome {{name}} <p></p>

                                • Avatar-8 Silvia 30/09/2015

                                  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

                                  • Avatar-7 David Rodriguez 30/09/2015

                                    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.

                                    • Avatar-10 David Rodriguez 30/09/2015

                                      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

                                    • Avatar-9 Silvia 01/10/2015

                                      sí perfecto, ya me funciona, gracias!!!!! ahora a seguir con el curso jejeje un saludo,

                                    • Avatar-11 xavier quintero 21/03/2016

                                      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.

                                      • Avatar-5 Pedro hernandez 20/07/2016

                                        Excelente curso, muchas gracias por el aporte....

                                        • Avatar-3 antonio 13/11/2016

                                          excelente gracias por compartir voy a aprender mucho gracias a ti

                                          • Avatar-1 Bernardo Martinez 04/08/2017

                                            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?

                                            • Avatar-6 Crysfel Villa 04/08/2017

                                              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 :)

                                            • Avatar-5 cesar 24/10/2017

                                              muy buena introduccion

                                              Instructor del curso

                                              Crysfel3

                                              Autor: Crysfel Villa

                                              Ha participado en varios proyectos con Angular y es participante activo del grupo de Angular NYC.

                                              Descarga video Descarga Código Fuente Ver Demostración

                                              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.