Angular JS

AngularJS es un framework de javascript de código abierto, mantenido por Google

Patrón

Modelo-Vista-Controlador

Single-page application

SPA

 Sitio web que cabe en una sola página

• Experiencia más fluida 

Concepto

• Atributos a nivel de HTML que Angular 
• Esto permite extender las capacidades que HTML
• Ejemplo:

      ng-click, ng-repeat, ng-app,

      ng-controller etc.

Cada una aporta su propia funcionalidad

Directiva

Concepto

Se trata del concepto clásico de controlador que realiza tareas de comunicación entre la vista y el modelo

Controller

Usando AngularJS

<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.6/angular.min.js"></script>

Organización de Módulos

Inline

cada fichero de JavaScript almacena un tipo de elemento.

Específico

Cada controlador, servicio etc en su propio fichero js

Dominio

Proyecto de gran tamaño. 

Se agrupan en relación con el dominio al que pertenecen

Cómo arranca Angular

La primera directiva que Angular necesita encontrar es la directiva ngApp

<div ng-app>  
     <h1>Hola Angular</h1>  
</div>

Módulos

1. Crear un módulo

2. Obtener la referencia a un

    módulo existente

 angular.module('myApp', []);

 angular.module('myApp');

Ámbitos

$scope

AngularJS utiliza ámbitos para comunicarse entre componentes - particularmente entre nuestro javascript y nuestro HTML.  

Controladores

angular.module('myApp')      
   .controller('HomeController',                         
       function($scope) {  

         // Tenemos acceso a este nuevo  
         // objeto $scope, donde podemos colocar  
         // datos y funciones para 
         // poder interactuar con él 

      });

<div ng-controller='HomeController'> 
    <!-- Aqui tenemos acceso al objeto 
     $scope definido en el HomeController --> 
</div>

Se trata del concepto clásico de controlador que realiza tareas de comunicación entre la vista y el modelo

$http, XHR, and Promesas

¿Cómo podemos interactuar con APIs de backend con Angular?

$http({  
   method: 'GET',  
   url: 'http://foo.com/v1/api',     
   params: {  api_key: 'abc'  } 
});