Angular 1.5.5

AngularJS es un framework desarrollado y hecho para javascript, de código abierto que incorpora un conjunto de librerías  para desarrollar aplicaciones web, también propone una serie de patrones para poder usarlas, sirve con programación del lado del cliente.

Lo que pretende angular es poder hacer html que se pueda entender de manera fácil para cualquier persona, incluso sin conocimientos muy profundos.

para poder aprender Angular solo es necesario manejar los siguientes requisitos:

-Conocimiento básico de HTML, Javascript y CSS
-un editor de texto y un navegador

Angular también  nos permite implementar el patrón MVC(Model-View-Controller) para poder separar la parte lógica de la vista de la aplicación esto nos facilita tener un código ordenado.

De esta manera tenemos que la vista vendría siendo todo lo que hagamos  en html y lo que represente los datos e información, el controlador que es el que se encarga de gestionar todos los datos, es decir, de la lógica de la aplicación, en el caso de angular las factorías y  servicios tienen esta responsabilidad, y por último el modelo es el responsable de manejar los datos de la aplicación, recibe datos de la vista e instrucciones del controlador para actualizar estos, también contiene funciones que son invocadas de acuerdo a entradas del usuario, a esto se le llama scope.

Algunos dicen que realmente lo que implementar ANGULAR es un MVVM(Model-View-View-Model) ya que el modelo comprende los datos de la vista mas datos adicionales para poder mostrarlos adecuadamente. Otro término que es necesario manejar para empezar a usar angularjs es “directiva”, siendo concisos y para entenderlo fácilmente podemos decir que una directiva es código javascript que mejora el HTML; las directivas de Angular sirven para encapsular código HTML de manera que nuestras aplicaciones puedan tener elementos reutilizables, también conocidos como componentes. Angular trae algunas directivas, pero como es código abierto los usuarios también pueden desarrollar unas propias.

Dada esta introducción vamos a empezar con una serie de pasos para iniciar en angular:

  1.   Entrar en la página https://angularjs.org/ seleccionar download AngularJS 1 y a continuación copiar el la url del campo CDN.
  2.  En nuestro código html preferiblemente en el head dentro de una etiqueta script pegar la url copiada en el paso anterior.
  3. El tercer paso para poder iniciar a desarrollar en angular es declarar la directiva(explicada anteriormente) ng-app, esta se debe poner en la etiqueta que englobe la aplicación donde vamos a utilizar angular

Algo similar a esto hemos hecho hasta el momento:

<!DOCTYPE html>
<html>
    <head>
        http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js
        <meta charset="UTF-8">
        <title>Primera página Angular</title>
    </head>
    <body>
         aquí va tu código
     </body> 
</html>

 

 

Ejemplo de una función básica(hola mundo) de angular: 

Ya hemos visto algunas cosas básicas y sabemos como empezar en angular, y como la mejor forma de interiorizar el conocimiento, es usándolo vamos a hacer un ejemplo para este, tenemos que identificar y usar otras directivas además de las que ya usamos.

ng-model: esta directiva nos sirve para informar al compilador html de angularJS que se declara una variable se puede usar dentro de los campos INPUT, SELECT, TEXTAREA o campos de formulario personalizados.

Otro término básico que vamos a aprender para poder entender el ejemplo, es el de “expresión” una expresión nos permite mostrar datos del modelo a través de la vista, es decir, nos sirve para mostrar el valor de una variable, para denotar una expresión se usan dobles llaves al inicio se pone el nombre de la variable y se finaliza con dobles llaves de la siguiente manera:
{{Variable}}

Así podemos entender como funciona nuestro primer ejemplo:

<div class="contenedor">
        <form action="">
            ¿Cómo te llamas? <input type="text" ng-model="nombre">
            este es el hola mundo de grupo GLUD {{nombre}}
        </form>
</div>

En el ejemplo anterior declaramos mediante ng-model una variable llamada nombre en un campo input y posterior a esto haciendo uso de las expresiones la visualizamos. Como se ve es muy fácil empezar a utilizar angular y nos ahorra mucho trabajo teniendo en cuenta todo el código que tendríamos que escribir para poder hacer algo igual al ejemplo. Así se visualiza lo realizado:

3angular

Binding data(Enlace de datos)

Angular nos permite hacer un doble enlace, en primera medida desde el scope hacia la parte visual, es decir, poder llevar un dato desde el modelo y mostrarlo; y por otro lado tenemos que la información puede fluir en ambos sentidos desde el scope hacía la parte visual y viceversa.

Esta herramienta incorporada en angular nos facilita varias labores, dado que a “mano”, es decir, escribiendo código desde cero tendríamos que complicarnos un poco más mientras que desde este framework se convierte en unas pocas lineas.

Directivas básicas

ng-init: inicializa el valor de una variable.

ng-repeat: permite crear un bucle en el que repetir algunas acciones.

ng-click: ejecutar una función cuando se hace click en un elemento.

Ejemplo de uso:

<div ng-app ng-init="pensamientos = [];">
    <h1.>Altavoz AngularJS</h1.>
    <p.>
        ¿Qué hay de nuevo?
        <br />
        <input type="text" ng-model="nuevoPensamiento" /> 
        <input type="button" value="Agregar" ng-click="pensamientos.push(nuevoPensamiento); nuevoPensamiento = '';" />
    </p.>
    Pensamientos que has tenido
    <p. ng-repeat="pensamiento in pensamientos" ng-init="paso = $index">
        Pensaste esto: {{pensamiento}} (Iteración con índice {{paso}})
    </p.>
</div>

Y así se ve en el navegador:

5angular.png

Con esto finalizamos esta introducción a angular, que tiene muchas más herramientas, pero con las que se han mostrado anteriormente se puede hacer un acercamiento a este grandioso framework.

Aprende, y transmite lo que aprendas 🙂