Introducción a AngularJS

Hola! en nuestro post de hoy nos vamos a centrar en uno de los frameworks JavaScript más populares, recuerda que si te ha gustado este artículo comparte!!

En los últimos años hemos visto frameworks para manipular el DOM pero Angular vino a cambiar las cosas, ya no solo es manipular sino aumentar las capacidades. Si eres nuevo en Angular y quieres aprender las bases, te recomiendo que sigas leyendo.

Para iniciarte en AngularJS considero que lo más importante es conocer sus conceptos. Si dominas los conceptos podrás reconocer los patrones de cómo programar usando Angular.

Vista / Plantillas
Las vistas o templates, o como quieras llamarle, es simplemente HTML con ciertos atributos y expresiones que aumentan la funcionalidad del mismo.

Uno de los atributos que más veras en todo los tutoriales de Angular es: ng-app. Este atributo le dice al framework que todo lo que esté dentro de la etiqueta que lo contenga, será parte de la aplicación angular.

Otros atributos vienen dados por el framework o pueden crearse mediante directivas. Veremos de directivas más adelante.

Cambiando a expresiones, una expresión de Angular es simplemente código dentro de doble corchetes {{ expresión}}. Un ejemplo de expresión es el siguiente: {{ 2 + 2 }}. Esto no se escribirá como tal en el sitio web sino que se presentará el valor 4, que es el resultado de la operación de la expresión “2+2″.

Una expresión no solamente son operaciones matemáticas, una expresión puede ser sacar el valor de una variable del modelo. Por ejemplo: {{ persona.Nombre }}. Esta expresión retornará el valor de la propiedad nombre del objeto persona.

Controlador
En Angular, un Controlador es simplemente una función utilizada para aumentar las propiedades y capacidades del Scope. Por ejemplo, veamos el siguiente ejemplo:

var app = angular.module(‘ejemplo’,[]);

app.controller(‘BienvenidaController’, [‘$scope’, function($scope) {
$scope.bienvenida= ‘Hola!’;
}]);
En este ejemplo creamos un módulo principal y le agregamos un controlador. Este controlador recibe un primer parámetro que es el nombre y un segundo parámetro que es una lista de dependencias y una función al final que es realmente la función del controlador.

Este controlador aumenta el $scope, agregándole una variable llamada “bienvenida” y asignándole un valor de “Hola!”. Al igual que agregar variables, podemos agregar funciones.

Un controlador debe encargarse de la lógica del negocio como tal y no preocuparse de, por ejemplo, saber cómo ir a buscar datos a una base de datos. Para ir a buscar datos, el controlador utilizará servicios o fábricas (las veremos más adelante) que se inyectarán dentro de la definición del controlador al igual que se inyecta el $scope.

Un ejemplo para inyectar un servicio es el siguiente:

var app = angular.module(‘ejemplo’,[]);

app.controller(‘BienvenidaController’, [‘$scope’, ‘ServicioDatos’, function($scope, servicio) {
$scope.bienvenida= $servicio.getData();
}]);
Hemos agregado al controlador un servicio llamado “ServicioDatos” y lo hemos pasado a la función del controlador como una variable “servicio”. Como ven pueden tener diferentes nombres pero se asocian por el orden en que se van agregando. En el valor de la propiedad $scope.bienvenida hemos mandado a pedir el dato del servicio.

Scope
El $scope es una variable que se encarga de realizar la magia en Angular. La variable $scope véanla como la conexión que existe entre las vistas (plantillas HTML) y los controladores (funcionas js). Cuando en un controlador agregas una variable o una funciona a $scope, esa variable o función la tendrás accesible en la vista donde ese controlador esté instanciado. En resumen: una variable compartida entre vista y controlador.

Directivas
Las directivas en Angular básicamente son el punto donde más se nota la función del framework para aumentar la funcionalidad de HTML. Una directiva básicamente es la forma en que Angular modifica el DOM ya sea para agregar comportamiento, funcionalidad o atributos.

Dentro de las directivas encontramos:

ng-model
ng-bind
ng-href
Hello <input ng-model=’name’> <hr/>
<span ng-bind=»name»></span>
En este ejemplo de arriba vemos 2 directivas en uso: ng-model y ng-bind. Esto quiere decir que cuando el input (ng-model) cambie, el span (ng-bind) cambiará porque está ligado al modelo.

Lo bonito de Angular es que puedes crear tus propias directivas, permitiéndote extender los atributos, funcionalidades, comportamientos y etiquetas de HTML.

Filtros
Un filtro formatea el valor de una expresión para ser mostrada al usuario. Pueden ser usados en plantillas de las vistas, en controladores o servicios. Adicionalmente, como todo es extensible, puedes crear tus propios filtros.

Los filtros pueden aplicarse en una vista de la siguiente manera: {{ expression | filter }}. Un ejemplo de esto es: {{ 12 | currency }} : Esta expresión devolverá un valor (12) formateado como moneda: “$ 12.00″.

Fábricas/Servicios
Los servicios en Angular son objetos substituibles y reutilizables que se conectan por medio de la inyección de dependencias, como lo vimos en la parte de controladores. Puedes usar servicios para organizar, compartir y testear el código de tu aplicación.