Bienvenidos sean a este post, hoy configuraremos a Angular.
Antes de comenzar con Angular vamos a aclarar un tema. La version que usaremos sera la 2 que es habitualmente conocida como Angular pero tambien existe la version 1 que es denominada como AngularJS. Esto es asi porque Angular nacio de la union de Microsoft con Google y que este fue creado con typescript. Con esto comentado vamos a comenzar con la configuracion de este. Para ello primero ejecutaremos el siguiente comando:
$ npm install -g @angular/cliEste nos instalara a Angular y su CLI para poder ejecutar nuevos comandos, una vez instalado podemos crear nuestra primera aplicacion y para ello ejecutaremos el siguiente comando:
$ ng new app-primeraEsto genera la aplicacion, les va a pedir algunas opciones pero por el momento tomen todos los valores predeterminados, es decir solo presionen Enter, y comenzara con la generacion el mismo. Una vez finalizado tendran un directorio con el nombre de la aplicacion. Ingresan en este y ejecuten este comando:
$ npm startEsto iniciara la aplicacion y al final les indicara que una direccion y que el servidor esta escuchando en el puerto 4200. Para probarlo se deben conectar mediante un navegador y la direccion que utiliza es:
Solo admite conexiones locales, si lo prueban con la direccion IP no funcionara. Si se conectan veran una pagina similar a esta:
Si nos fijamos tendremos la siguiente estructura en el nuevo directorio donde ejecutamos nuestra aplicacion, como mencionamos esta fue generada automaticamente por el comando ng, aqui tendremos muchos elementos pero los principales van a ser:
- node_modules, directorio donde estan los modulos de node.js
- src, directorio donde se encuentran nuestros codigos fuentes
- package.json, configuracion de node
- tsconfig.json, configuracion de typescript
- angular.json, configuracion de angular
Los archivos package.json y tsconfig.json fueron comentados en otros posts para determinadas configuraciones. El nuevo como mencionamos es el encargado de la configuracion de angular. De este archivo tomemos como ejemplo la opcion build. En esta especificaremos cuales stylesheets seran incluidos, donde esta el path de salida, y las opciones de configuracion que usaremos al momento de crear el codigo de produccion pero como se imaginaran tendremos muchisimas mas opciones. La otra opcion interesante es el directorio src, porque como mecionamos anteriormente es donde estara alojada la aplicacion en si. Este contendra dos directorios que son app, aqui estaran los modulos y componentes que se usan para construir la aplicacion; y assets, este contiene el contenido de la pagina como pueden ser imagenes, fuentes, etc. Dentro de src tenemos tambien el archivo index.html, echemos un vistazo al predeterminado:
src/index.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>AppPrimera</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
<app-root></app-root>
</body>
</html>
Como pueden ver es una pagina normal de html, hasta que llegamos al body donde tenemos al tag app-root. Este es para indicarle a angular que debe mostrar en el body, esta etiqueta se encuentra definida en el archivo app.component.ts ubicado en src/app/, veamos como es su codigo:
src/app/app.component.ts
import { Component } from '@angular/core';
import { RouterOutlet } from '@angular/router';
@Component({
selector: 'app-root',
standalone: true,
imports: [RouterOutlet],
templateUrl: './app.component.html',
styleUrl: './app.component.css'
})
export class AppComponent {
title = 'app-primera';
}En este caso app-root esta en @Component, la cual se encarga de pasarlo en base al nombre que le asignamos en la propiedad selector. De las propiedades, en la que nos centraremos ahora son templateUrl que es la encargada de apuntar a la pagina donde estan los elementos y styleUrl que es donde estan los estilos de CSS. Si lo miran a este segundo archivo, esta vacio pero aqui los pueden ir agregando los nuevos estilos.
Nuestro siguiente tema son los modulos en angular. Los modulos son basicamente componentes de angular agrupado en un conjunto logico. Tambien nos permiten especificar dependencias que un conjunto de componentes puede tener, que a su vez puede contener otros modulos. Para comenzar a ver el concepto de modulos vamos a crear un nuevo componente llamado header con el siguiente comando, siempre dentro del directorio app-primera:
$ ng generate component headerEste comando generara un nuevo directorio en src/app con el nombre que le pasamos. Las tres primeras palabras son las encargadas del comando y la ultima sera el nombre que la identificara, una vez terminado nos devolvera esta salida:
$ ng generate component header
CREATE src/app/header/header.component.css (0 bytes)
CREATE src/app/header/header.component.html (21 bytes)
CREATE src/app/header/header.component.spec.ts (596 bytes)
CREATE src/app/header/header.component.ts (234 bytes)
$Estos seran los cuatro archivos que se generan por defecto y cada uno tendra distintas responsabilidades: el primero sera para almacenar los estilos de CSS, el segundo sera la pagina en si, el tercero sera para almacenar tests, y el ultimo para nuestro codigo de typescript. Pero todavia no esta implementado, para ello debemos hacer algunas modificaciones. La primera sera en el archivo app.component.ts en el directorio src/app donde al inicio agregaremos la siguiente linea:
import { HeaderComponent } from './header/header.component';Esta se encargara de importar nuestro nuevo componente desde donde lo creamos. Lo siguiente sera modifficar la propiedad imports en @Component de la siguiente manera:
imports: [ RouterOutlet, HeaderComponent ],Esto le dira al app-root que debe importar este objeto tambien, nuestra siguiente modificacion sera en templateUrl. A la cual la modificaremos de la siguiente manera:
templateUrl: './header/header.component.html',En lugar de utilizar la pagina predeterminada le diremos que utilice la nueva. Una vez guardado el archivo si tienen el servidor funcionando, la pagina se actualizara automaticamente. De lo contrario deben iniciarlo pero en cualquiera de los dos casos si todo salio bien tienen que tener una pagina como la siguiente:
Con esto ya tenemos nuestro primer complemento implementado. Antes de cambiar de tema, debo comentarles que se pueden omitir algunos archivos al momento de crear el componente como pueden ser la pagina o el archivo de test, el primero con la opcion –inline-template, y el segundo con la opcion –skip-tests, pero si lo utilizan de manera predeterminada lo hara como vimos al comienzo, y siempre tienen la opcion de poder eliminar los archivos que no sean necesarios.
Con esto no solo tendremos angular instalado sino tambien hemos creado nuestra primera aplicacion asi como tambien hemos visto como crear nuestro primer componente y como implementarlo en nuestra aplicacion. Antes de terminar les dejo un link con todos los archivos del proyecto creado:
En resumen, hoy hemos visto como instalar Angular, mencionamos la diferencia entre 1 y 2, cual vamos a usar, lo instalamos, creamos una aplicacion simple, hablamos sobre los complemento/modulos, creamos uno y lo implementamos. Espero les haya sido 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.
Donación
Es para mantenimento del sitio, gracias!
$1.50
El blog de Tinchicus 