Angular.js es un framework web open-source para Javascript que nos facilitará la creación de single-page applications (SPA) y data-driven apps.

Contenidos

1 Componentes principales de AngularJS

Componentes principales de AngularJS

AngularJS tiene una extensa API y cantidad de componentes. En este post nos centraremos en aquellos que son mas importantes a la hora de empezar un nuevo proyecto.

Directivas de AngularJS

Las directivas son extensiones del lenguaje de marcado de HTML. Pueden ser atributos, nombres de elementos, clases CSS o incluso comentarios HTML.

Cuando el framework de AngularJS se carga, el contenido de ng-app se compila. Las directivas se vinculan a los datos, eventos y transformaciones del DOM.

En el siguiente ejemplo utilizaremos dos directivas: ng-app y ng-model.

<html ng-app>
<head>
  <title>Hello World en AngularJS</title>
</head>
<body>
<input ng-model="nombre"> Hola {{ nombre }}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.25/angular.min.js"></script>
</body>
</html>

Hello World in AngularJS

ng-app es la directiva que arranca AngularJS. Designa cual es el elemento raíz (root). Normalmente se coloca en el <html> o <body>.

ng-model es la directiva que normalmente enlaza elementos de formularios. Por ejemplo, input, select, checkboxes, textarea, … Mantiene los datos (el modelo) y los elementos visuales (HTML) conectados.

{{ name }} {{ }} es la forma de enlazar los modelos con los elementos HTML. En el ejemplo anterior, el ng-model se vincula con el placeholder {{ name }}.

See the Pen Plantilla Básica Angular.js by Luis Piñon Ferrer (@senoritopi) on CodePen.0

Enlazando los datos de AngularJS – Data Binding

El data binding de AngularJS es la herramienta que permite que los datos del modelo se sincronicen con el HTML. Los modelos son, por tanto, las únicas fuentes de los datos y no deberemos preocuparnos de actualizarlos.

Cada vez que el HTML se modifica, el modelo se actualiza automáticamente. Y cada vez que el modelo se modifica se actualiza el HTML también automáticamente.

AngularJS Scope

El $scope es un objeto que contiene todos los datos que se vinculan con el HTML. Son la unión entre el código javascript (controlador) con las vistas (HTML).

Todo lo que se vincula al $scope, se monitoriza por AngularJS y se actualiza. Además se pueden vincular a las propias funciones de javascript. Hablaremos más de esto en la sección sobre los controladores.

Controladores en AngularJS

Los controladores de AngularJS son métodos encargados de controlar el comportamiento de elementos del DOM. Encapsulan el comportamiento, callbacks y conectan los modelos $scope con las vistas.

See the Pen rGzErJ by Luis Piñon Ferrer (@senoritopi) on CodePen.0

ng-controller es la directiva que le dice a Angular que función del controlador utilizar para la vista en particular. Cada vez que AngularJS carga, comprueba el argumento del ng-controller y busca una función Javascript (POJO) con el mismo nombre o un angular.controller con el mismo nombre.

Como hemos visto antes, el $scope vinculará el ControladorTareas con la vista. El controlador tiene un parámetro $scope y AngularJs inyectará en el parámetro y el elemento que esté vinculado el array del $scope.tareas.

ng-repeat nos permitirá repetir un elemento o sub-elemento en el sitio del DOM en el que la directiva sea declarada. Iterará a lo largo del array de tareas $scope.tareas.

ng-model vinculará el valor del checkbox con el modelo para que se actualice automáticamente cuando se marque/desmarque en la vista HTML.

Módulos en AngularJS

Los módulos son una forma de encapsular partes del proyecto y poder así reutilizarlas en otras partes.

See the Pen aLLgvW by Luis Piñon Ferrer (@senoritopi) on CodePen.0

Como veis, con <html ng-app=»app»> vinculamos el modulo app con la Vista y además se cargarán los controladores del módulo.

El uso de los modulos tiene muchas ventajas ya que pueden ser cargados en cualquier orden y de forma paralela (parallel dependency loadning).

Plantillas de AngularJS

Las plantillas contienen tanto código HTML como los elementos de Angular (directivas, filtros, formularios, …). Pueden ser cargadas y cacheadas en memoria y referenciadas por su ID.

<script type="text/ng-template" id="/tareas.html">
  <ul>
    <li ng-repeat="tarea in tareas">
      <input type="checkbox" ng-model="tarea.completada">
      {{ tarea.nombre }}
    </li>
  </ul>
</script>

Cuidado porque en caso de utilizar plantillas, como veis en el ejemplo, el código va dentro del script the tipo text/ng-template.

Rutas con AngularJS (ngRoutes)

ngRoutes te permite cambiar lo que vemos en la app dependiendo de la ruta (url). Normalmente, se usan plantillas par inyectar el HTML en la app.

El módulo de ngRoutes no viene por defecto en la distribución de AngularJS así que deberemos importarlo de las dependencias de Google CDN:

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.25/angular-route.min.js"></script>

See the Pen ZXvzGq by Luis Piñon Ferrer (@senoritopi) on CodePen.0

Ahora cargamos los controladores desde la ruta, por eso eliminamos la directiva ng-controller=»ControladorTareas».

La directiva ngView se utiliza por $routeProvider para inyectar el HTML. Cada vez que cambia la dirección (URL) inyectará la nueva plantilla HTML en ngView.

Servicios de AngularJS – Fabricas (Factories)

Los servicios de AngularJS son formas de inyectar dependencias en los controladores. Se crean a partir de fabricas y permiten así, por ejemplo, tener 2 controladores compartiendo $scope.tareas .

See the Pen NaYadb by Luis Piñon Ferrer (@senoritopi) on CodePen.0

Como veis, en el HTML hemos creado otra plantilla para los detalles de la tarea. En la plantilla anterior añadimos un enlace a la pagina de los detalles. Utilizamos $index para obtener el número del orden en el bucle ng-repeat.

En el JS crearemos un $routeProvider para mapear las rutas (url) a los controladores y plantillas correspondientes. El parámetro :id en la ruta será accesible desde el controlador a través de $routeParams .