Angular 4 Introducción

Angular es un framework estructural para páginas web dinámicas que utiliza el modelo MVC (Modelo, Vista, Controlador). Desarrollado en Javascript por Google nos permite escribir código mas eficiente y organizar nuestro proyecto en componentes reutilizables.

Este framework  ha ido evolucionando para adaptarse a los continuos cambios y mejoras en el tiempo. Comenzando en su versión 1 (AngularJS) nos entrego un conjunto de herramientas para el  desarrollo Web Front End permitiéndonos crear aplicaciones SPA(Single-Page Applications), sin embargo como toda primera versión sugirieron problemas que necesitaban ser mejorados como por ejemplo sobrecargas y lentitud en el navegador todo esto como resultado de  trabajar toda la lógica y el renderizado de vistas en el lado del cliente , también se encontraron problemas con el SEO los que justamente fueron solucionados en su versión 2.00.

Angular 2 es totalmente diferente a angular 1 no es compatible con la versión anterior en resumen es un framework totalmente nuevo que cambia sustancialmente la forma de trabajar. Por el contrario angular 4  respeta la compatibilidad con su versión anterior e introduce nuevas funcionalidades y mejoras en el rendimiento que siguen la misma linea de su versión anterior.


SemVer(Semantic Versioning Specification)

Angular adopto el sistema de "Versionamiento semantico" en su versión estable 2.00 les explicare en que consiste:
donde tenemos un numero de versión representado de la siguiente forma
X.Y.Z ejemplo 1.9.0

X "Mayor": cambios drásticos no compatibles con las versiones anteriores
Y "Minor":  se introducen funcionalidades compatibles con la versión anterior
Z "Patch":  arreglos de bugs

Lógicamente por lo que acabamos de leer se debería haber liberado la versión 3 ¿pero por por qué motivo se decidio saltar a la version 4?
El problema fue que la librería del router ya estaba en su versión  3.4.0 y para evitar confusiones se decidió optar por angular 4.
En el futuro Angular tiene planificado liberar una versión que cambie el valor de "Major" cada 6 meses con un alto nivel de compatibilidad con la versión anterior. Entregada esta información la idea es hablar solamente de angular para las posteriores actualizaciones.

Typescript

Es un superset de Javascript es decir un nuevo lenguaje basado en Javascript, es mantenido y desarrollado por Microsoft e incorporado en angular desde su versión 2.00, funciona compilando los archivos .ts el resultado de este proceso da origen a un archivo Javascript comun, posee un fuerte tipado y utiliza el paradigma orientado a objetos
Para utilizar las dependencias de angular 4 como requisito necesitamos una versión de typescript  >=2.16


Angular CLI (Command line interface)

Con el uso de los siguientes comandos que nos proporciona Angular CLI podemos crear de forma simple todo lo necesario para desarrollar nuestro proyecto.

ng new: Permite crear el esqueleto de una nueva aplicación funcional de angular con el comando "ng new"
ejemplo: ng new proyecto-angular4

ng generate: Podemos generar componentes servicios "ng generate"
ng g component nombre-del-componente

ng serve: levanta un servidor para pruebas locales

ng build --prod : Genera la aplicación y lo deja en el directorio de salida


*g alias para generate

Estructura de angular(carpetas)

Luego de generar la aplicacion con el comando "ng new" nos encontraremos con lo siguiente:

Archivos en Raiz: Podemos encontrar archivos como:

• angular-cli.json : Configuracíon del CLI
• package.json : Dependencias de npm
• tslint.json : Reglas para código limpio
• .editorconfig : Configuración para el editor
• .gitignore: Configuración de archivos y carpetas que git debe ignorar
• tsconfig.json: Configuracion de Typescript 

src: Carpeta  que contiene el codigo fuente del proyecto

• src\index.html : Página raíz que contiene al componente raíz
• src\main.ts : Fichero de arranque de la aplicación que configura y carga el módulo ráiz AppModule.
• src\app\app.module.ts : Declaración del módulo raíz y sus dependencias. Exponen al AppComponent para el bootstraping de la aplicación
• src\app\app.component.ts : Componente raíz app-root
• src\app\app-routing.component.ts : Se usará para definir rutas en aplicaciones SPA
• src\app\index.ts : Fichero índice de una carpeta, para facilitar la importación de otros ficheros

dist: Esta carpeta contiene todos los archivos necesarios para subir tu pagina a la web es el resultado del comando "ng build" y solo contiene archivos que son compatibles con el navegador

e2e: Carpeta para el desarrollo de pruebas (end to end)

node_modules: Archivos y dependencias de NPM

Instalar node

Para poner todo esto en practica necesitamos Node
Descargamos la version recomendada
Version 6.10.2 LTS (Long Term Support) hasta el 2019 y ejecutamos el siguiente comando:
curl -sL https://deb.nodesource.com/setup_6.x | sudo -E bash -

  Luego sudo apt-get install nodejs

   y finalmente verificamos la versión instalada nodejs --version

Instalando Angular CLI

Pagina de angular CLI
https://cli.angular.io/

Ejecutar el siguiente comando para instalar
npm install -g @angular/cli@latest
puedes verificar la version del CLI con
ng --version

crear proyecto angular
ng new proyecto-angular4

Podemos ver las dependencias de Angular 4 en el archivo package.json

Ingresamos a la carpeta del proyecto "proyecto-angular4" y ejecutamos ng serve

Finalmente ingresamos a localhost:4200 para ver la aplicación trabajando

Esperamos haber disipado muchas de las dudas que tenias para empezar a desarrollar con este framework ¡No te pierdas la segunda parte próximamente¡