Llevo un tiempo mirando este framework de google, y he decidido aprenderlo por mi cuenta, e ir poniendo aquí mis impresiones y como funciona, como otro tutorial tipo al de PHP, de hecho la idea es ir mezclando ambos tutoriales en el blog para que tanto los interesados en back como en front end puedan ir siguiendo las dos líneas de trabajo.
La verdad es que nada vez como empieza a funcionar angularJS uno se queda un tanto perplejo, hay quien incluso dice que se ha comido a ajax y JQuery, eso el tiempo lo dirá.
Para esta serie de tutoriales, tras buscar por la red voy a seguir w3school, aunque utilizaré algún que otro material como vídeos de youtube o manuales en inglés, pero toda la información aquí contenida estará en castellano para que la comunidad hispano parlante pueda seguirlo.
También puede ser interesante hacer el curso que ofrece Google en su web oficial y que yo personalmente haré.
Así que ¿que os parece si empezamos?
Introducción a AnagularJS
Podemos empezar mostrando un ejemplo de la fuerza que tiene AngularJS, si pruebas a copiar el siguiente código y ejecutarlo en tu navegador, encontrarás solo la punta del iceberg de Angular:
Pero...
¿que tengo que saber si quiero aprender AngularJS?
Pues en realidad hace falta saber algunas cosas:
AngularJS es relativamente nuevo, no apareció su versión 1.0 hasta 2012 y empezó a desarrollarse por Miško Hevery en 2009, de modo que es algo aun muy muy novedoso.
La idea resulto muy buena y ahora el proyecto esta respaldado por Google con un equipo a tiempo completo...
¿Que es AngularJS?
AngularJS es un framework de javascript, de hecho es una libreria de javascript, distribuida como un archivo de JS y que se puede añadir a nuestro código con la siguiente etiqueta script:
Es recomendable que esta etiqueta se encuentre al final del body, ya que de lo contrario podría no haber cargado todo el DOM y no funcionar correctamente.
AngularJS extiende HTML
Esto significa que lo enriquece, le da mucha más fuerza de la que tiene por si mismo para ello utiliza las denominadas ng-directivas, las cuales son:
La verdad es que nada vez como empieza a funcionar angularJS uno se queda un tanto perplejo, hay quien incluso dice que se ha comido a ajax y JQuery, eso el tiempo lo dirá.
Para esta serie de tutoriales, tras buscar por la red voy a seguir w3school, aunque utilizaré algún que otro material como vídeos de youtube o manuales en inglés, pero toda la información aquí contenida estará en castellano para que la comunidad hispano parlante pueda seguirlo.
También puede ser interesante hacer el curso que ofrece Google en su web oficial y que yo personalmente haré.
Así que ¿que os parece si empezamos?
Introducción a AnagularJS
Podemos empezar mostrando un ejemplo de la fuerza que tiene AngularJS, si pruebas a copiar el siguiente código y ejecutarlo en tu navegador, encontrarás solo la punta del iceberg de Angular:
<!DOCTYPE html>
<html>
<body>
<div ng-app="">
<p>Escribe algo en la caja:</p>
<p>Prueba a escribir algo: <input type="text" ng-model="texto"></p>
<h2 ng-bind="texto"></h2>
</div>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script>
</body>
</html>
Divertido ¿verdad?Pero...
¿que tengo que saber si quiero aprender AngularJS?
Pues en realidad hace falta saber algunas cosas:
- HTML
- CSS
- Javascript
AngularJS es relativamente nuevo, no apareció su versión 1.0 hasta 2012 y empezó a desarrollarse por Miško Hevery en 2009, de modo que es algo aun muy muy novedoso.
La idea resulto muy buena y ahora el proyecto esta respaldado por Google con un equipo a tiempo completo...
¿Que es AngularJS?
AngularJS es un framework de javascript, de hecho es una libreria de javascript, distribuida como un archivo de JS y que se puede añadir a nuestro código con la siguiente etiqueta script:
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script>
Es recomendable que esta etiqueta se encuentre al final del body, ya que de lo contrario podría no haber cargado todo el DOM y no funcionar correctamente.
AngularJS extiende HTML
Esto significa que lo enriquece, le da mucha más fuerza de la que tiene por si mismo para ello utiliza las denominadas ng-directivas, las cuales son:
- ng-app la cual define una aplicacion de angular.
- ng-model que se une al valor HTML de los inputs, textareas, selects... para los datos de las aplicaciones
- ng-bind que une los datos de la aplicación a la vista HTML
Si observas el ejemplo de más arriba veras como se utilizan las tres directivas de forma sencilla:
- Angular se ejecuta cuando la página es cargada por completo
- La directiva ng-app contenida en la etiqueta <div> indica que se trata de una aplicación de angular
- La directiva ng-model recoge el valor del input en una variable llamada texto
- La directiva ng-bind introduce la variable como si fuera un innerHTML en la etiqueta h2
No hay comentarios:
Publicar un comentario