Curso de Angular desde de cero Curso de Angular desde de cero
Desde que comencé a desarrollar en angular, me di cuenta que el contenido que hay sobre el framework mucho esta en ingles, entonces esto me causo problemas para aprender, pero ya sabes uno sale adelante, asi que hoy traigo el primer tema sobre angular y espero poder exponer todo lo que angular nos ofrece, sobretodo en nuestro idioma.
¿Qué carajos es AngularJS?
Angular es un Framework de javascript desarrollado por Google, un framework es traducido al español "Manera de trabajar", en pocas palabras es código escrito por alguien que tu vas utilizar las funciones y objetos que contenga.
Angular encaja el los frameworks del paradigma MVC, que significa Modelo, Vsita y Controlador. Aunque Angular es de tipo MWC, pero eso lo veremos mas adelante.
El paradigma MVC consiste en separar el código en funcionalidad:
Modelo: Aquí se encuentran los datos y se les da formato, por así decirlo.
Controlador: Es el intermediario entre la vista y el modelo, se encarga de llevar y traer datos entre si.
Vista: Es el resultado de la combinación de los anteriores, donde el javascript se convierte en html.
Bien bastante teoría por ahora, si quieres puedes entrar a la documentacion oficial de angular (En ingles)[URL="https://docs.angularjs.org/guide"] aquí.[/URL]
Nuestro "Hola mundo!" en angular.
Para empezar tenemos que cargar Angular:
Código HTML:
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.min.js"></script> <script> window.angular || document.write('<script src="js/angular.min.js">x3C/script>'); </script>
para saber las ventajas de los documentos por CDN, clic [URL="https://www.ovh.es/cdn/ventajas.xml"]aquí.[/URL] En caso de que el CDN se caiga, hacemos una operación lógica, lo que hace es comprobar si el objeto angular esta disponible, si lo esta, seguirá su curso normal, pero en caso contrario, va cargar nuestro documento de angular que tenemos cargado en el servidor.
Bien este de los ejemplos mas sencillos de angular, como toda tradición, este ejercicio, consiste en escribir "Hola mundo!" en la pantalla. Para eso veremos nociones básicas de como trabajar y sobretodo lo mas impresionante sin tocar javascript. Tienes idea de cuanto nos llevaría hacer algo así con javascript puro o jquery.
Eh aquí todo el código que vamos a usar:
Código HTML:
<body ng-app> <h1>{{texto}}</h1> <input type="text" ng-model="texto"/> </body>
Como ves con casi absolutamente nada de código, construimos un input, que con su contenido actualiza el estado del contenido del h1. Esto es una pequeña demostración de lo que angular es capaz.
Si pones atención, veras que en el input colocamos un atributo llamado ng-model, escrito correctamente seria "NgModel", lo que hace es que el contenido del input lo lleva al scope del modelo y angular se encarga de pasar los datos del modelo a la vista. Para poder indicar en que parte de la pagina queremos los dato usamos la expresión "{{nombreDeLaVariable}}", donde nombreDeLaVariable es el valor que recibe ng-model.
Para el siguiente post hablaremos sobre ng-app, modulos y controladores.
Hasta la próxima.
Gracias! 
