Angular Logo

Angular 101

Angular es un framework en hecho en javascript utilizado mayormente para «Single page apps» y en estos últimos dias muy usado para realizar aplicación web mobile y aplicaciones híbridas mobiles. Entre sus principales características se encuentra que implementa el patron mvvm lo cual le permite tener alto control de la data que se maneja en sus modelos y sus vistas teniendo tambien otra característica importante y es el «two way binding» que le permite al desarrollador cambiar su modelo tanto desde la vista como desde los controladores. Una ultima característica para muchos es que este framework es mantenido por Google (El cual no asegura que habra soporte para este por un buen rato).

Angular aparte de implementar mvvm tambien implementa el modelo mvc (bastante usado en estos dias por no decir que todos) el cual permite al desarrollador dividir su aplicación en Modelo, Vistas y controladores, te permite modular tu aplicación para mantener un mejor control de la misma, este framework la verdad tiene de todo.

Descargar 1.2.21

Para comenzar a trabajar con angular solo es necesario lo siguiente, el solo incluir la libreria y agregar la directiva ng-app y luego ejecutar tendremos como resultado esto.
101


<script src='https://ajax.googleapis.com/ajax/libs/angularjs/1.2.21/angular.min.js'></script>
<div id='hola' ng-app>
    
    { { 5 + 5 } }
    
</div>

FiddleJs

Detalles:

  1. Primero incluimos nuestro framework
  2. Definimos nuestro scope del app y en este caso sera dentro del div hola junto con la directiva ng-app, sin esta angular no sabra donde esta el root de la aplicación.
  3. {{ content }} los dobles llaves son usadas para ejecutar expresiones angular dentro de los mismo, se pueden sumar variable ahi como imprimir texto.

Algo muy bueno que tiene angular es que no es necesario conocer todo el framework para comenzar a trabajar con el.

Double way binding

El biding de angular es unos de sus features mas llamativos


<script src='https://ajax.googleapis.com/ajax/libs/angularjs/1.2.21/angular.min.js'></script>
<div id='hola' ng-app>
    
    <b>Nombre :{{ nombre }}</b><br>
    <input ng-model='nombre'>
    
</div>

FiddleJS

Detalles:
Partiendo de los detalles del ejemplo anterior

  1. usamos una variable llamada nombre que aun no existe y la ejecutamos como una expresion de angular {{}}
  2. agregamos la directiva ng-model y le decimos el input que lo que escriban dentro de el serán mapeado a una variable del scope llamada nombre

Controlladores
Los controladores aqui en angular seria como las actions de los frameworks server site. Aqui en angular son usados para mantener un scope de una area en una vista html.

<script src='https://ajax.googleapis.com/ajax/libs/angularjs/1.2.21/angular.min.js'></script>
<div ng-app>
    <div ng-controller='indexControler'>
        Mi nombre es {{ nombre }}
        </br>
        <input ng-model='nombre'/>
    </div>
    <div>Fuera del scope {{nombre}}</div>
<div>
    
<script>    
        function indexControler($scope){
            $scope.nombre = "Blashadow";
        }
    
</script>

FiddleJS

Descripcion:

  1. Usamos una nueva directiva que es ng-controller es para decirle a esta «vista» que scope manejara y cual sera su controlador, en este caso indexController
  2. Nuestro controlador simplemente es una función que toma un parametro que es injectado por «dependency injection» de angular y es el del scope donde agregamos una nueva variable nombre
  3. Como podemos notar en el ejemplo fuera del scope la variable nombre no existe, solo dentro del div donde tenemos ng-contorller=’indexController’

Ng-repeat y Ng-click
Ng-repeat y ng-click son 2 directivas de angular muy usadas, la primera Ng-repeat es usada para las vistas para iterar sobre una lista y realizar luego una acción, mas la segunda Ng-click es usada para bindear eventos de click a un elemento en una vista.

<div ng-app>
    
    <div ng-controller='libreria'>
        
        Nombre Libro:<br>
        <input type="text" ng-model='nombre'/><br>
        
        Cantidad Libro:<br>
        <input type="text" ng-model='cantidad'/><br>
        <button ng-click='agregar()'>Agregar</button>
        
        <div>
            
            <ol>
                <li ng-repeat='item in libros'>{{ item.nombre }} - {{ item.cantidad }}</li>
            </ol>
            
        </div>
        
    </div>
       
</div>

<script>
    function libreria($scope){
        $scope.agregar = function(){
            $scope.libros.push({
                nombre:$scope.nombre,
                cantidad:$scope.cantidad
            })
        }
    
        $scope.libros = [];
    }
    
</script>

Descripción:

  1. Tenemos una lista en nuestro controlador llamada libros, y la usamos en la vista cuando llamamos ng-repeat (es como un foreach para otro lenguajes) y una vea agregamos un libro esta se refresca automáticamente
  2. Tenemos un boton con la directiva ng-click y la función agregar de nuestro controlador, una vez oprimimos agregar este tomara los valores dactuales de la variable nombre y cantidad de nuestro scope y los agregara a nuestra lista de libros.

FiddleJS

Hasta aqui el tutorial Angular 101, ya luego escribiré otro con opciones mas avanzadas de angularjs como trabajar con servicio y modulos en nuestra aplicacion.

Referencia y mas informacion