TypeScript / Aplicacion de Angular

Bienvenidos sean a este post, hoy crearemos una aplicacion para explicar varias implementaciones.

Algunos pasos ya los vimos en el post anterior pero hoy no solo repasaremos estos sino que veremos otros temas interesantes. Para comenzar ya debemos tener instalado angular, sino es asi ejecuten el siguiente comando:

$ npm install -g @angular/cli

Esto nos instalara de forma global a Angular, nuestro siguiente paso sera ejecutar este comando:

$ ng new app-segunda

Tomen todas las opciones por defecto, la primera es para el estilo que usaremos, css, y la segunda opcion eligen No y listo, una vez finalizado pueden ingresar al directorio con el nombre de la aplicacion y ejecuten este comando:

$ npm start

Les hara una pregunta pueden usar Yes o No pero deben responder, una vez hecho comenzara la construccion y una vez finalizado tendremos el servidor corriendo y podran acceder mediante la siguiente direccion:

http://localhost:4200

Ahora tienen dos opciones, pueden dejar corriendo en la terminal al servidor y abrir otra para comenzar a trabajar con el codigo. O pueden cerrarlo, trabajar con el codigo y volverlo a ejecutar para probarlo. Si usan la primera opcion esta actualizara automaticamente el servidor con nuestros cambios, por esto es la mas recomendada, con esto comentado continuemos.

Dentro de este directorio iremos al archivo index.html en el directorio src y modificaremos aal tag title de la siguiente manera:

<title>Hogares</title>

Es simplemente para adecuar mejor al proyecto, nuestra siguiente modificacion sera en app.component.ts en el directorio src/app. En esta cambiaremos la siguiente linea:

templateUrl: './app.component.html',

Por la siguiente linea:

template: '<h1>Hola, Mundo!</h1>',

Esta reemplazara la pagina que utilizamos por un mensaje en pantalla. Por otro lado, templateUrl y template no pueden estar al mismo tiempo y solo puede haber una sola. La ultima modificacion en este archivo sera en este bloque:

export class AppComponent {
  title = 'app-segunda';
}

Al cual modificaremos de la siguiente manera:

export class AppComponent {
  title = 'Hogares';
}

Simplemente cambiamos la propiedad que exportamos junto a la clase. Con esto realizado nuestro servidor ahora se vera de la siguiente manera:

Con esto tenemos la aplicacion base que usaremos para implementar y explicar algunos temas basicos de angular y como se utilizan mediante typescript, en los proximos posts explicaremos:

• Componentes
• Interfaces
• @Input
• ngFor
• Services
• Route
• forms
• Eventos
• Datos externos

Nota:
Si al momento de ver este post no tienen los links creados es porque no subi los posts relacionados.

Antes de finalizar les dejo un link con toda la aplicacion base creada y las modificaciones que realizamos para que puedan comprobarlas:

En resumen, hoy hemos creado la base de una aplicacion para trabajar, muy similar al post anterior pero esta vez en lugar de usar una pagina lo haremos mediante codigo interno, hemos repasado algunos temas y establecimos la base, en los proximos posts nos iremos divirtiendo con algunos temas. Espero les haya resultado de utilidad sigueme en tumblr, Twitter o Facebook para recibir una notificacion cada vez que subo un nuevo post en este blog, nos vemos en el proximo post.