Mi primera aplicación en Angular 2

Introducción:

Angular es un framework Open source mantenido por Google para desarrollar en Javascript y TypeScript aplicaciones web de una sola página basadas en el modelo vista controlador (MVC). Combinadas con el framework Electron, puede ser usadas para creas aplicaciones nativas en cualquier plataforma, utilizando otros recursos como scripts de python, c++, etc.

Este articulo va a resumir los detalles que aparecen en la web de documentación oficial, de forma resumida en el caso de TypeScript.

Requisitos:

• Nodejs
• npm

Para ver si los tienes instalados, ejecuta en el terminal:  

node -v
npm -v

Si no aparecen sus respectivas versiones, instalalos.

Crear un proyecto nuevo de forma manual:

 

En esta sección crearemos un proyecto de forma manual en unos sencillos pasos.

Crear los ficheros de configuración

 

Para crear un proyecto, necesitas una carpeta en el sistema, y crear unos ficheros de configuración:

• package.json: Contiene todas las dependencias del proyecto manejadas por npm
• tsconfig.json: Contiene la forma de compilar TypeScript para generar el Javascript final.
• typings.json: Contiene las definiciones adicionales que no se encuentren de forma nativa.
• systemjs.config.js: Contiene toda la información que se necesita para cargar el módulo.

Tienes un ejemplo de estos ficheros aquí

Conceptos básicos de una app

 

• Una clase es un modelo que define un conjunto de variables y métodos para operar datos y estados según un comportamiento.
• Un componente es una parte de la descomposición de un sistema en funcionalidades o lógica mediante interfaces. Tiene un componente de abstracción más alto que una clase ya que no tiene estados. Cómo usarlos. Cada componente es reutilizable y pueden aceptar inputs definidos en la exportación de la clase.
• Un modulo es una porción del programa, que realiza una o varias tareas para cumplor unos objetivos. Son convocados por otro del mismo o superior nivel.
• Una directiva es una operación lógica básica.
• Todos los componentes que no sean ficheros de configuración y la interfaz html estarán en la carpeta app.
• El código HTML y CSS de un componente puede ser añadido inline de varias lineas usando la comilla \`
• Además, se puede tener en un fichero separado e incluir con los tags templateUrl y array styleUrls respectivamente.

 

Nomenclatura

 

• app es la carpeta que contiene todos los elementos de la aplicación.
• Los nombre de los elementos (clases, módulos, servicios...) serán del tipo Mayuscula cada palabra sin espacios. Ej: SpecialSuperHeroService
• Los nombres de los ficheros derivan del anterior por la regla del dash-case. Ej: special-super-hero.service.ts
• *.ts es el nombre de cualquier clase.
• *.components.ts es el nombre de cualquier componente.
• *.services.ts es el nombre de cualquier servicio.

Instalar las dependencias definidas en los ficheros de configuración

 

Para instalar todo lo contenido en el package.json ejecuta:

npm install

Esto creara las carpetas:

• node_modules: Contiene todas las dependencias de npm
• typings: Contiene lo necesario para compilar TypeScript

Crear la aplicación

 

• Crea la carpeta app. Los siguientes ficheros irán dentro de esta carpeta.
• Crea el fichero app.module.ts, que contenta los módulos que requiere tu proyecto. [Más info](https://angular.io/docs/ts/latest/quickstart.html)
• Crea un componente básico 'AppComponent', y añadelo en el fichero de modulos.
• Crea el fichero main.ts que es el punto de entrada de la aplicación.

 

Aspecto y carga de las dependencias js en HTML

 

• Crea en la carpeta base el fichero index.html con el aspecto estático de la aplicación.
• Crea el fichero styles.css y dale el aspecto que quieras.

 

Ejecuta la aplicación

 

Si todos los pasos anteriores son correctos, solo te queda ejecutarla:

npm start

 

Tu primera edición

 

Si quieres cambiar un poco la web, solo tienes que ir al fichero app.components.ts y editarlo. Si cambias la etiqueta de entrada, no olvides cambiarla también en index.html

 

Un tutorial serio

 

Para que veas todo el potencial que ofrece esta herramienta, te recomiendo que sigas el tutorial Tour of Heroes en la página oficial. Tras hacerlo y asimilarlo, tengo ya preparada una versión completa. Puedes usar una versión online, si quieres saltarte el paso de aprenderlo o bajar el código del repositorio oficial.

 

Aspectos básicos

 

General

• Las importaciones de componentes necesarios deben declararse en app.module.ts.
• Todas las importaciones de clases necesarias deben declararse en el *.component.ts que las necesite.
• app.component.ts debe ser usado para administrar la navegación por la aplicación a nivel global.
• Las clases nuevas son *.ts; Los componentes son programados en el *.components.ts, se separan por el [principio de responsabilidad única](https://8thlight.com/blog/uncle-bob/2014/05/08/SingleReponsibilityPrinciple.html)
• Decorator es un patrón de diseño que permite añadir dinámicamente funcionalidades a un objeto.
• Promise es un elemento que permite obtener datos de forma asincrona, cuando esten listos.
• Se puede añadir diversas etiquetas a un componente. Por ejemplo: selector, template, styles...
• Las clases pueden tener atributos como number, string, o incluso otras clases.
• Se pueden declarar valores constantes y arrays en app.component.ts
• Toda directiva que empiece por ng es especial. ngModel, ngIf,  ngFor...
• La directiva ngModel puede usarse para que elementos de la interfaz editados sean propagados en tiempo real.
• Se pueden añadir directivas a etiquetas HTML para que hagan algo en ejecución, por ejemplo, rellenar un objeto hero con valores del array heroes y su correspondiente callback:

<li *ngFor="let hero of heroes" (click)="onSelect(hero)>

• Para todo fichero, al principio se usarán los imports, al final los exports, y en medio el código que lo componga.
• En el ciclo de desarrollo se puede usar objectos mock (Ad-hoc para una funcionalidad) para definir datos que necesitamos para probar la funcionalidad.
• Alternativamente podemos usar un InMemoryWebApiModule, simulando peticiones HTTP a un API en memoria.
• Dicho API se puede sustituir por uno real

Ciclo de vida

El ciclo de vida (o Component Lifecycle) es un conjunto de callbacks que son llamados en distintos momentos de la ejecución cuando suceden eventos.

• Necesitas importarlos de @angular/core
• OnInit: Init

Avanzado

• Crear variables o funciones private o publicas, solo afecta a la compilación para ver cosas, no se ve influenciada la salida en javascript. Sin embargo puede ser una buena práctica usarlas para asegurarnos que la implementación y uso se ajusta al diseño.

 

Generar documentación [Inestable]

 

Si te gusta tener las cosas bien documentadas, entonces vas a necesitar esta herramienta. Typedoc genera la documentación a partir de TypeScript. NO FUNCIONA bien DE MOMENTO! Tan pronto como salga de beta y de menos problemas lo actualizaré

 

Instalación

 

npm install --save-dev @types/core-js        # Local Install working with Angular2JS
typedoc -v                                    # Check installation

 

Usage

 

Usarlo es tan sencillo como teclear:

typedoc --out <path/to/documentation/>

Por ejemplo:

mkdir doc               # Crear path doc
typedoc --out doc app   # Generar

En una próxima entrada enseñaré como meter este repositorio en una aplicación nativa usando el framework electron