Blog Detail

Documento Activo: ANGULAR 4 y TypeScript

1 Ago , 2017,
Jose Nunez
No Comments

1. Descripción

En este documento comparto mis anotaciones sobre cómo funciona Angular 4 y otros conceptos relacionados.


2. ¿Qué es una Aplicación Angular?

Una aplicación Angular es un programa o sistema construido mediante el framework Angular.

  1. Se compone de uno o más Módulos
  2. Cada módulo consite de uno o más Componentes que contienen:
    1. Metadata: Información sobre un componente
    2. Plantilla: La vista del componente (HTML y CSS)
    3. Clase: El controlador del componente (TypeScript)

3. CLI de Angular

Utilitario para generar proyectos Angular así como componentes y elementos en dichos proyectos. Implementa las mejores prácticas.

Instalación del utilitario CLI de Angular
npm install @angular/cli -g

https://cli.angular.io

https://github.com/angular/angular-cli/wiki


4. Creando una app Angular con Angular CLI

Una de las funciones del CLI de Angular es la creación de nuevos proyectos.

Creación de un proyecto con Angular CLI
ng new myProject

cd myProject

//Para abrir el proyecto usando Visual Studio Code:
code .   

//Para abrir el proyecto usando ATOM:
atom .

5. Anatomía de un proyecto Angular

Acá se describen las diferentes carpetas en que está estructurado un proyecto Angular
  1. /e2e/                 Carpeta para pruebas de tipo end-to-end
  2. /node_modules/        Paquetes de dependencias instalados con npm
  3. /src/app/             Código fuente del app. Incluye módulos y componentes
  4. /src/assets/          Activos reutilizables
  5. /src/environments/    Definiciones de ambientes
  6. /src/index.html       HTML principal del app
  7. /src/main.ts          TypeScript principal del app
  8. /src/polyfills.ts     Definiciones para la compatibilidad entre navegadores
  9. /src/styles.css       Estilos Generales
  10. /src/test.ts          Pruebas generales
  11. /src/tsconfig.app.json Configuración de TypeScript
  12. /src/tsconfig.spec.json Configuración de Pruebas con TypeScript
  13. /src/typings.d.ts     Tipos de dato personalizados en TypeScript

6. Anatomía de un módulo

Seguidamente se presenta el código de un módulo con comentarios sobre qué significa cada elemento
/*IMPORTS: Acá se incluyen las librerísa necesarias para que el componente pueda operar*/
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';

/*Decorador @NgModule define la metadata correspondiente al módulo*/
@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule
  ],
  providers: [],
  bootstrap: [AppComponent] //Se incluye el componente AppComponent como parte del módulo.
})

/*Clase Principaldel Módulo. En este caso está vacía.*/
export class AppModule { }

7. Anatomía de un Componente

Aquí se presenta el código de un componente con comentarios sobre qué significa cada elemento
/*IMPORTS: Acá se incluyen las librerísa necesarias para que el componente pueda operar*/
import { Component } from '@angular/core';

/*Decorador @Component define metadata como la etiqueta que se usará para acceder al componente (selector) o los URL's a la plantilla o a los estilos.*/
@Component({ 
  selector: 'app-root', //Define la forma en que se puede hacer uso del componente. En este caso, mediante la etiqueta <app-root></app-root>
  templateUrl: './app.component.html', //Define cual plantilla HTML usará el componente.
  styleUrls: ['./app.component.css'] //Define cual archivo de estilos definirá la apariencia del componente
})

/*Clase principal del componente. Se exporta para hacerla accesible por parte de Angular y las vistas relacionadas.*/
export class AppComponent {
  title = 'app works!';
  sayHello() {
    alert("Hello");
  }
}

8. Ejecutando una App

El siguiente comando de consola ejecuta el app y abre (-o) un navegador para verla.

ng serve -o


9. Creando un Componente

Expande para ver cómo se crea un componente

El siguiente ejemplo genera un componente nuevo llamado Hello:

ng generate component Hello

El siguiente ejemplo solamente indica lo que se va a generar, pero no genera nada:

ng generate component Hello --dry-run

 


10. Haciendo Pruebas

Angular integra en sus proyectos la forma de desarrollar pruebas unitarias de código usando una metodología que se llama “Behavior Driven Development” o desarrollo basado en el comportamiento. Los archivos de tipo “*.spec.ts” en el proyecto definen este tipo de pruebas.

Expande para ver el comando para ejecutar las pruebas

ng test


11. Compilando la Aplicación

Mediante el proceso de compilación el código TypeScript es consolidado en archivos minificados de tipo JavaScript. A su vez el código HTML y CSS es también minificado y consolidado para ocupar la menor cantidad de espacio posible. El código es compilado en la carpeta ./dist dentro del proyecto.

Expande para ver el comando compilar la aplicación

ng build --prod

12. Notas sobre Data Binding

El proceso de “data binding” permite enviar datos desde el programa de un componente ( .ts ) hacia una vista o plantilla ( .html )

Para esto se supone que basta con agregar la directiva [(ngModel)]="datos" al código HTML de la plantilla donde “datos” es la variable definida en el archivo .ts del componente respectivo.

Ejemplo

Archivo hello.component.html

<p>
 {{greeting.toUpperCase()}}
</p>
<input type="text" [(ngModel)]="greeting" (keyup)="log($event)"/>

Archivo hello.component.ts

import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-hello',
templateUrl: './hello.component.html',
styleUrls: ['./hello.component.css']
})
export class HelloComponent implements OnInit {
greeting: string;
constructor() {
this.greeting = "Hello Joselito!";
}

log(event){
console.log(event);
}

ngOnInit() {
}
}

 

Nota Correctiva (Expande para leer más)

(!) Es importante destacar que para que funcione la directiva ngModel se debe asegurar que el archivo app.module.ts contenga la referencia a FormsModule y que esta sea inyectada dentro del descriptor de metadatos @NgModule tal y como se ejemplifica seguidamente.

 


 

264 total views, 1 views today

Leave A Comment