Quiero aprender a usar Angular JS (parte 1)

O ¿como arranco con esto?

¿Entonces queres aprender a usar Angular JS?¿Sabes algo de Javascript? ¿y de Typescript?¿Jugaste con jQuery alguna vez? Si tu respuesta es sí, se te va a hacer un poco más fácil. Sino, vas a tener que aprender en el camino, no va a ser fácil pero con perseverancia (casi) todo se puede.

Voy a contarte un poco acerca de la segunda versión de este framework. Si bien cambio bastante desde la versión 1 los chicos de Google prometen no hacer mas.

Partes de una app en Angular

Diagrama de arquitectura oficial de Angular JS

Del diagrama podemos ver tres partes bien diferenciadas, los componentes (component), las plantillas (template) y los servicios (servicio). Hay mas cosas en ese diagrama pero por el momento no le vamos a prestar atención.

Los componentes son bloques de la interfaz de usuario con una funcionalidad especifica. En ellos se escribe la lógica de negocio. Se componen los unos a los otros para formar la vista de tu app.

Por ejemplo si fuésemos a construir la app web de Youtube un componente podria ser la lista de videos, la cual tendría dentro mas componentes que serian los videos mismos. ¿Se entiende?

Los componentes se sirven de las plantillas para generar la vista. Las cuales tienen el conocimiento de que se va a mostrar y de que forma.

Luego tenemos a los servicios que son todo aquello que conecta los componentes con algo para el intercambio de datos. Por ejemplo puede ser la interfaz entre un componente y un api REST.

Para dar un cierre a esta idea inicial, los componentes se valen de los servicios para obtener los datos a presentar en las plantillas.

Es mucho mas complejo que eso pero ya vamos a llegar.

Angular-CLI, conocé a tu nuevo mejor amigo

Gracias a la gente de Google, a partir de la versión 2 angular viene acompaña do de un ayudante a la hora de desarrollar un proyecto en este framework. CLI significa interfaz de linea de comandos, es una herramienta que nos permite crear un nuevo proyecto, generar nuevos bloques, correr un servidor de desarrollo e incluso compilar los archivos para enviar a producción.

Instalación

Antes que nada, tenes que tener instalado NodeJs. Es gratuito y esta disponible para todas las plataformas. Baja el instalador desde acá: https://nodejs.org/es/

Luego, la instalación del cli es directa. Simplemente abrimos una terminal y escribimos:

npm install -g angular-cli

Listo, este proceso puede durar varios minutos. Baja un montón de cosas de la red, necesarias para que todo funcione.

Luego tenemos un comando para generar un nuevo proyecto:

ng new nombre_del_proyecto

Un comando para generar componentes:

ng generate component nombre_del_componente

Cabe aclarar que al generar el componente, tambien se genera la plantilla.

Y un comando para generar servicios:

ng generate service nombre_del_servicio

Listo! Con esto ya tenes para empezar a meterte en el nuevo mundo de Angular JS, te dejo un enlace a la documentación oficial (solo disponible en ingles) https://angular.io/docs/ts/latest/

Estate atento a la segunda parte.