Como crear tu primer aplicación con AngularJS

Hola muy buenas a todos bienvenidos a otro post más de este maravilloso blog TecnologiasRapida, ¿como estáis? cuanto tiempo ha pasado ya no?, el post de hoy lo voy a dedicar a un tutorial un poco especial la verdad y si se ha podido hacer es gracias a la gente de Toptal que ha decidido confiar en mi para patrocinar los post y cederme información para traeros post con mas calidad y mas expansión en temas.

Empecemos...

¿Que es AngularJS?

Seguro que muchos de vosotros os estáis preguntando que que es eso de AngularJS pues bien eso se trata de  marco de JavaScript MVC desarrollado por Google, el cual permite construir aplicaciones front-end bien estructuradas y fáciles de comprobar y mantener. 

El marco consiste en un conjunto de herramientas bien integradas que te ayudará a construir aplicaciones del lado del cliente, bien estructuradas en un sistema modular, con menos código y más flexibilidad. 

¿Porque utilizarlo?

AngularJS extiende HTML y permite crear plantillas dinámicas poderosas También implementa binding de datos de dos vías, conectando tu HTML (vistas) a los objetos de JavaScript (modelos) sin problemas. En términos simples, esto significa que cualquier actualización de tu modelo se reflejará inmediatamente en tu vista, sin necesidad de ningún tipo de manipulación DOM o el control de eventos (por ejemplo, con jQuery, Angular cuenta también con una flexibilidad en cuanto a la comunicación con el servidor como los marcos de JavaScript, Angular te permite trabajar con cualquier tecnología de servidor, siempre que puede servir a tu aplicación a través de una API REST Web.

Tutorial 

Y bueno chicos aquí empieza lo interesante y lo verdaderamente útil vamos donde está toda la chicha.

Vamos a iniciar nuestra aplicación de ejemplo con un poco de Boilerplate. Recomiendo el proyecto angular-seed, ya que no sólo proporciona un gran esqueleto para bootstrapping, sino que también establece las bases para las pruebas de unidad con Karma y Jasmine 

ahora que hemos clonado el repositorio e instalado las dependencias, el esqueleto de nuestra aplicación va a tener este aspecto:

Y ya podéis a empezar a codificar chicos y a exprimir vuestra imaginación, yo por ejemplo lo voy a hacer de una aplicación relacionada con la formula 1. 

Teniendo en cuenta que ya tenemos una lista de los conductores definida dentro de nuestro alcance, y haciendo caso de cualquier CSS (para facilitar la lectura), nuestra HTML podría ser:

La primera cosa que notarás en esta plantilla es el uso de expresiones (“{{“ y “}}”) para regresar valores de las variables. En AngularJS, las expresiones permiten ejecutar algunos cálculos, con el fin de regresar un valor deseado.

Comprensión de directrices

Las directrices son la presencia de ng-attributes, que no verías en el marcado típico, las directrices son marcadores (como atributos, etiquetas y nombres genéricos) que le ordenan a AngularJS adjuntar un comportamiento dado a un elemento DOM.

Añadir Controladores.

Por supuesto, nuestra vista no sirve de nada, sin un controlador. Vamos a añadir driversController a nuestros controllers.js:

La variable $scope se supone que debe enlazar tu controlador y vistas. En particular, lleva todos los datos que se utilizarán dentro de la plantilla, todo lo que se agrega a ella,será directamente accesible en tus vistas, por ahora, vamos a trabajar con una matriz de datos ficticios (estática), que vamos a sustituir más tarde con nuestro servicio API.

Con esta línea de código inicializamos nuestra aplicación y registramos los módulos de los cuales depende. 

Ahora se pone todo junto a index.html:

Cargar datos en el servidor

Muy bien os quiero dar mi enhorabuena por llegar a este paso lo mas complicado se ha pasado al menos para mí, ahora vamos a traer datos datos en vivo desde un servidor RESTful ,AngularJS proporciona los servicios $http y $resource. El primero es una capa en la parte superior de XMLHttpRequest o JSONP, mientras que el último proporciona un mayor nivel de abstracción. Vamos a utilizar $http.

Para abstraer nuestras llamadas a la API del servidor desde el controlador vamos a crear nuestro propio servicio personalizado, el cual va a capturar los datos y actuará como una envoltura alrededor de $http al añadirlo a nuestro services.js:

Con las dos primeras líneas, creamos un nuevo módulo (F1FeederApp.services) y registramos un servicio dentro de ese módulo (F1FeederApp.services). Notareis que pasamos $http como parámetro a ese servicio. Esto le dice al motor de inyección de dependenciade Angular, que nuestro nuevo servicio requiere (o depende) del servicio $http.
similarmente tenemos que decirle a Angular que incluya nuestro nuevo módulo en nuestra aplicación. Vamos a registrarlo con app.js, reemplazando nuestro código existente con:

Y por ultimo para acabar con este paso lo que vamos a hacer es ajustar nuestra controller.js, e integrar ergastAPIservice como una dependencia.

Y ahora al actualizar comprobaras que no se ha cambiado la plantilla pero si hemos añadido un nameFilter a nuestro alcance.

Y bueno hasta aquí el post se que se ha echo un poco largo y lo siento también me disculpo por si he puesto algo mal pero es la primera vez que hago un post de este tipo espero que os guste y os sirva de utilidad.

Quiero agradecer también a la gente del blog toptalengineering que es un centro de desarrollo en profundidad de tutoriales y anuncios de nuevas tecnologías creado por ingenieros de software freelance en la red Toptal que es la pagina web principal. 

Quiero agradecer también a Raoini Boaventura por escribir el post del cual he sacado parte de la información 

Si les ha gustado compartanlo denle a seguir y dejen sus comentarios ya que nos ayudan a crecer más y saber si lo hacemos bien o no. Hasta Luegoo people...

Twitter: @tecnologiasrapi

Instagram/Snapchat:rubenvrodriguez

Facebook: Tecnologiasrapida

Enlace al post de donde he sacado la información: https://www.toptal.com/angular-js/un-tutorial-paso-a-paso-para-tu-primera-aplicaci%C3%B3n-angularjs/es

Blog de Toptal:https://www.toptal.com/developers/blog

Contacto en: rubenvargasrodriguez4@gmail.com