¿Que es AngularJS?
Según Wikipedia: AngularJS es un framework de JavaScript de código abierto, mantenido por Google, que ayuda con la gestión de lo que se conoce como aplicaciones de una sola página. Su objetivo es aumentar las aplicaciones basadas en navegador con (MVC) Capacidad de Modelo Vista Controlador, en un esfuerzo para hacer que el desarrollo y las pruebas más fáciles.
Bien, y como empiezo
Muy simple, solo debes agregar la librería de AngularJS al HEAD de tu página:
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js"></script>
Puedes descargar la ultima versión en la pagina oficial www.angularjs.org
Con esto ya estas listo para empezar a programar.
Ejemplo de Hola Mundo en AngularJS:
Bien, voy a explicar un poco el código.
Con la directiva ng-app lo que hago es indicarle a AngularJS que parte del código debe gestionar.
<body ng-app="">
Esta directiva podemos colocarla en cualquier parte de la pagina indicando de esta forma que solo maneje esa parte de la pagina.
Con la directiva ng-controller="miControlador" indicamos a AngularJS cual es la sección de código que debe ser manejada por este controlador
<div ng-controller="miControlador">
El controlador se define en la sección de JavaScrip y se le pasa el objeto $scope, que sirve para propagar los eventos del código, osea que cuando cambie una variable se refleje en la pagina.
Dentro del controlador he declarado la variable saludo
Ahora, con solo colocar llaves dobles y el nombre de la variable podemos hacer que se muestre su contenido en cualquier parte del código HTML.
Esto funciona de la forma {{ expresión }}, donde expresión es un fragmento de código de tipo JavaScript como por ejemplo:
- 3+1
- saludo.texto
- miFuncion()
Ahora vamos a hacer algo mas interesante, voy a agregar un input de tipo text con la directiva ng-model="saludo.texto" Ahora el input y la variable han quedado enlazados y todo lo que se escriba pasara automáticamente a la variable.
También agregué un botón al que le incluyo la directiva ng-click="saludo.texto='Hola'"
De esta forma cada vez que se haga click en el botón, a la variable saludo.texto se le asignara el valor Hola
Ir a parte 2
ojalá sigas subiendo más de angularjs
ResponderBorrarmuy bueno gracias, me gustaría poder seguir más tutoriales de Angular. Saludos.
ResponderBorrar