Data

Tools

Indexes

Applications

Experiments

Awesome

An open API service indexing awesome lists of open source software.

https://github.com/cesarmartinez7/learning-angular


https://github.com/cesarmartinez7/learning-angular

angular typescript

Last synced: 4 months ago
JSON representation

Awesome Lists containing this project

README 

          

# Aprendiendo 🅰ngular 19

 

Para empezar es necesario tener instalado la version de node especifica segun el proyecto que quieras iniciar tmb me recomendaron la version 16 de angular porque suele ser muy estable.



Primer paso es tener ng instalado, si no esta instalado se tiene que instalar con el siguiente comando de forma global



```bash

npm install -g @angular/cli 

```



Para ejecutar el servidor de angular se ejecuta el siguiente comando, este comando compila y lanza un puerto que servira al proyecto en modo desarrollo



```bash

    ng serve && npm start

```



## Conceptos de Angular



*`Que es un pipe:`* Los pipes son funciones que se ejecutan antes de mostrarse en la vista, mejor dicho son  funciones que se transforman antes de mostrarse en la vista del usuario y se utilizan junto a la __interpolacion__ y se utilizan con el operador `|`. Los pipes no funcionan en los bucles @for



*`Servicios`* :  Los servicios podriamos decir que son los llamados customHooks de react que nos permiten llevar la logica de un componente para que puedan ser reautilizados, o simplemente llevarlos fueras de componente principal, La verdadera 

`Definicion` es que son simplemente clases que nos permiten encapsular logica reutilizable y permite la comunicacion entre un componente



*`RxJS`*: React Extensiones para Javascript.



*`HttpClient`*: HttpClient es un servicio ya definido de angular que nos permite hacer peticiones en Angular por medio de servicios.



*`selector Props`* : Es el nombre que se le da en el documento html o la etiqueta.



*`templateUrl`* : Es la ruta de donde se encuentra el documente html del componente.



*`template`* : Puedes poner tu documento html aqui tambien, pero lo mejor seria separar la vista de la logica lo mas posible.



*`CommonModule`* : Son aquellos componentes que son dependientes de sus modulos



*`imports en @Component`* : Se utiliza para importar modulos o componentes que el componente necesita para funcionar. Por ejemmplo al utilizar standalone y querer utilizar el *ng necesitamos importar el CommonModule para que este traiga esas funcionalidades



` ngOnInit`: Se ejecuta despues que angular crea el componente perfecto para ejecutar llamadas apis y todo lo demas, mucho mas recomendable que el metodo constructor de Angular , para implementar algo de el se utiliza la herencia de __JS__ con el implements metodo de clase.



## Estructuras de Carpetas Sencilla



```

/nombre-del-proyecto

│── 📂 src

│   ├── 📂 app

│   │   ├── 📂 core        → Servicios globales, guards, interceptores  

│   │   ├── 📂 shared      → Componentes, pipes y directivas reutilizables  

│   │   ├── 📂 modules     → Módulos organizados por funcionalidad  

│   │   ├── 📂 pages       → Componentes específicos de cada página  

│   │   ├── 📂 components  → Componentes generales usados en varias partes  

│   │   ├── 📂 services    → Servicios específicos de cada módulo  

│   │   ├── app.module.ts  → Módulo principal  

│   │   ├── app.component.ts  → Componente raíz  

│   ├── 📂 assets         → Imágenes, fuentes, JSON, etc.  

│   ├── 📂 environments   → Configuración de entornos (`prod`, `dev`)  

│   ├── main.ts           → Punto de entrada de Angular  

│   ├── index.html        → Archivo principal HTML  

│── angular.json          → Configuración de Angular  

│── package.json          → Dependencias del proyecto  

│── tsconfig.json         → Configuración de TypeScript  

```



Angular para componentes grandes la mejor manera de escribir los componentes en features si son rutas o components carpeta por si es una carpeta, dentro de estos directorios debe ir el archivo __TS__ el archivo __CSS__ el archivo __HTML__ y opcional el de las rutas de ese componente para manejar esa ruta



## Rutas Angular v19

Para manejar las rutas de angular se necesita el archivo app.route.ts, funciona similar al outlet de javascript, mejor dicho en react para poner que queremos poner se envuelve ese componente dentro de ello



```ts

import { Routes } from "..."

import { NormalComponent } from "..."



export const routes: Routes = [

    { path: "" , component: NormalComponent }

];



```



Recibe una lista de objectos que contiene la ruta junto a al elemento, similar a la sintaxis de  `react-router-dom`



## Comandos Basicos



Los comandos son similares a los comandos de __Vite__ en React



Para ofuscar el codigo , optimizar el codigo y frontend para produccion.



``` bash

ng build

```

El comando crea el tipico directorio __dist__ que contiene todo el codigo para produccion.



Alternativa sencilla en el package.json a __ng serve__

``` bash

ng start 

```



Para todo lo que tiene que ver con testing esta el comando:

``` bash

ng test

```



# Inicio 



Aprendi cosas sencillas como el cambio de nombres en los templates y como funcionan las templates sencillas en angular para mandar bloques de codigo, tambien lo sencillo de como funcionan las rutas, como poner algunas carpetas y esctructurar los componentes y rutas y tambien algunas cosas para el funcionamiento detras de Angular



## Creacion de los componentes desde Angular CLI



```

ng generate component  --standalone --inline-template --skip-tests

```

__Altenativa con path__

```

ng generate component /

```



El comando generara un directorio que tendra el componente de angular o ts y tambien los estilos de ese componente



```

| __  📁

|    |

    -- home.component.ts 

    -- home.component.css

```



## Manejo de Eventos en Angular



En angular los eventos funcionan algo similar a react o la mayoria de framework o modulos javascript, su sintaxi es sencilla



```html

Presioname

```



Donde `click` es el evento a hacer y __mostrarAlgo()__ es simplemente esa funcion o mejor dicho metodo que se hara cuando se dispare ese listener



Ahora la question seria donde esta la funcion que se ejecuta cuando se presiona el boton, sencillo en angular las funciones se definen en las mal llamadas `props` de un componente, es decir definen dentro del archivo `namecomponent.component.ts`



Tambien es importante saber que esas funciones son mejor dicho metodos porque no es necesario darle a entender que son funciones a javascript, porque son mas metodos por asi decirlo porque estan dentro de la importacion de la clase.



Ejemplo de esto



```ts

export default class ButtonPressed {

    mostrarAlgo(){

        window.alert("Hola Soy tu primer componente Reactivo y no Angulativo ⚛️👑")

    }

}

```



## Ejemplos de Eventos de Angular



Evento __click__

```ts

(click) = "nombreFuncion()"

```

Evento __change__

```ts

(change) = "nombreFuncion()"

```

Evento __input__

```ts

(input) = "nombreFuncion()"

```

Evento __submit__

```ts

(submit) = "nombreFuncion()"

```

## Templates 



 En angular los templates son pedazos de codigo HTML que nos permite y nos sirve para escribir algunas caracteristicas de angular y no es necesario incluir etiquetas como `` `` `` y se ignora la etiqueta `` por seguridad, y esta definidos solo para definir la interfaz o diretris



 ##  Binding Syntax



 El encuadernamiento de datos nos permite personalizar el HTML especificando valores con atributos de cadena desde el HTML , lo q nos propociona el encuadernamiento de datos es simplemente inicializar esta parte, como por dicho desde el __JS__ o __Angular__ en vez del HTML, es decir que funcionan desde el doom:



 Ejemplos de personlizacion de los atributos de cadena desde javascript



### Los cuatro tipos de Biding syntax son



#### Interpolation - Interpolacion



`app.component.html`

``` html

<p>{{ name }}</p>

```

`app.component.ts`



```ts

export default class AppComponent {

    name: string = "Soy angulativo"

}

```



#### Property Binding 



`app.component.html`

```html

<input [value]="message" />

```

`app.component.ts`

```ts

export default class AppComponent {

    message = "Hello soy el valor de un input 😂"

}

```



#### Event Binding 



`app.component.html`

```html

<button (click)="funcionARealizar()" >Presioname</button>

```

`app.component.html`



#### Two-Way biding



## Renderizado de clases condicional



Angular tiene su propia directiva llamada `ngClass` que nos permite darle estilos condicionales a una etiqueta de html y hay diferentes formas de hacerlo, en un `string`, `array` y en un `objeto`, le pasamos nuestro argumento, algo sencillo como un ternario estaria bien y despues nuestras clases para que se ejecuten dependiendo de la funcion



### Sintaxis

```html

<button [ngClass]="<expresion_si_si> ? ´clase_si_Si´ : ´clase_si_No´ " >Presioname</button>

```



## Signals



Los signals son una nuevo manejo de estado hecho por angular similares a los estados de `react`, tienen un effect y asi como señales, cuando algo cambia este verifica si cambia algo en la ui y lo actualiza, la diferencia de las señales con los estados de react es que los señales estan hecos para una mejor optimizacion, ademas que tiene diferentes metods que podrian ayudarnos y no solo un `setteador`.



### Sintaxis



```ts



const contador = signals(0);



handleChangeContador (){

    this.contador.set(this.contador() + 1)

}



```



## Tipos de Pipes



Los pipes son funciones que se transforman algo antes de mostrarse en la vista y se hacen con el operador de `|` 



Pipes de `string`



```ts

{{"hola mundo" | uppercase }}

{{"hola mundo" | lowercase }}

```



Pipes de fecha `fecha`

```ts

{{fecha | date:"dd/MM/yyyy"}}

```

Pipes de formato de moneda o `currency`

```ts

{{fecha | currency}}

```



Pipes de `json`

 

```ts

{{data | json}}

```



> [!NOTE]

> Se pueden crear Pipes personalizables .



En resumen los pipes son funciones que se transforman antes de mostrarse en la vista y se utilizan con el operador | en las plantillas de Angular y nos permiten hacer cosas simples para la vista del usuario



## Comandos Angular Cli



```sh

ng generate component

```



```bash

ng generate module

```



```bash

ng generate service

```



```bash

ng generate directive

```



# Decoradores en Angular 



    @Component: se utiliza para definir un componente en Angular. Se utiliza para especificar la plantilla, estilos y metadatos asociados con el componente.

    @Directive: se utiliza para definir una directiva personalizada en Angular. Las directivas se utilizan para agregar comportamientos específicos a elementos de la interfaz de usuario.

    @NgModule: se utiliza para definir un módulo en Angular. Los módulos se utilizan para agrupar componentes, directivas, servicios y otros objetos relacionados entre sí.

    @Pipe: se utiliza para definir una tubería en Angular. Las tuberías se utilizan para transformar datos en tiempo real en una plantilla.

    @Injectable: se utiliza para definir un servicio en Angular. Los servicios son una forma de compartir datos y funcionalidades entre componentes.

    @Input: se utiliza para definir una propiedad de entrada en un componente. Las propiedades de entrada se utilizan para pasar datos a un componente desde un componente padre.

    @Output: se utiliza para definir un evento en un componente. Los eventos se utilizan para enviar datos desde un componente hijo a un componente padre.

    @HostBinding: se utiliza para enlazar una propiedad de un componente a una propiedad del elemento DOM que lo contiene.

    @HostListener: se utiliza para escuchar eventos del elemento DOM que contiene el componente.

    @ContentChild: se utiliza para obtener una referencia al primer elemento secundario coincidente de un componente.

    @ContentChildren: se utiliza para obtener una referencia a todos los elementos secundarios coincidentes de un componente.

    @ViewChild: se utiliza para obtener una referencia al primer elemento hijo coincidente de un componente.

    @ViewChildren: se utiliza para obtener una referencia a todos los elementos hijos coincidentes de un componente.

    @Attribute: se utiliza para obtener el valor de un atributo en un elemento DOM.

    @Self: se utiliza para indicar que una inyección de dependencia debe ser resuelta solo en el propio componente.

    @Optional: se utiliza para indicar que una inyección de dependencia es opcional y no causará un error si no se puede resolver.

    @SkipSelf: se utiliza para indicar que una inyección de dependencia debe ser resuelta por un componente superior en la jerarquía de componentes.

    @Inject: se utiliza para especificar un proveedor de inyección de dependencia personalizado en un componente.



# Cosas a tener en cuenta



Me llevo 5 minutos arreglar una interfaz y fue simplemente porque la interfaz que puse se encontraba debajo del decorador `@Component` algo que sin escusa tiene sentido ya q este espera si o si un componente en clase, pero es algo a tener en cuenta sin duda.



❌ Los pipes no funcionan dentro de bucles @for una cosa demasiado rara en angular



# Pensamientos propios



Creo que ya voy entendiendo el sistema de modulos y el standalone al menos lo que creo, el standalone lo que nos permite es tener los mismos importes como si fuera en un @ngModule o algo asi, ya se me olvido



# Importacion De Componentes En Angular



La importacion de componentes en angular al menos en la ultima version permite importarlo en ponerlo en componentes padres, solo hace falta importar ese componente en los imports de la metadata del componente padre



```ts

@Component({

    selector: "app-padre",

    imports: [ ComponenteHijo ]

    standalone: true

})

```



# Routing Angular 19



Para el routing se necesita el archivo app.route.ts, aqui se definiran las rutas, muy similar a react router doom para ser especificos tiene la misma sintaxis y se espera la ruta principal junto al componente o la ruta, el router de todas la paginas  `404`  se hacen con `**` para las paginas que no se encuentran



De lo demas la sintaxis de las rutas en angular 19 es practicamente igual a las rutas react router dom



__Ejemplo__

```ts

import HomeRoute from "./routes/homeroute/home.component.ts"



export const routes: Routes = [

    {path: "", component HomeRoute}

            |                 |  

            |                 |

          "Path"          "Component"  

]

```



## ⚙ Propiedades de Routing



`loadComponent`: Lazy load de el routing



## @For y @Empty en Angular 19



En angular 19 la sintaxis es muy similiar a la del metodo `map` en React a diferencia que se ve un poco mas organizado y con un metodo bastante sencillo pero bastante util que es el `@empty`, el nombre ya describe como tal que es lo que tiene que hacer.



__Ejemplo de uso__ 



```ts

@for (item of items; track item.name ; let indice = $index){

    <li> {{indice + 1}} {{item.name}}</li>

}@empty {

    <li>{{"Esto saldra cuando no haya nada para renderizar"}}</li>

}

```

__✅ Output True | @for__



```

                        ┌─────────┬──────────┬─────────┐

                        │ (index) │ Indice   │ Nombre  │

                        ├─────────┼──────────┼─────────┤

                        │    0    │    1     │ Manzana │

                        │    1    │    2     │ Banana  │

                        │    2    │    3     │ Cereza  │

                        └─────────┴──────────┴─────────┘



```

__❌Output False  | @empty__



```

            ┌─────────────────────────────────────────────────────────┐

            │            Esto saldrá cuando no haya data              │

            └─────────────────────────────────────────────────────────┘

```



> [!TIP]

> Se podria decir que es practicamente el key que se le dan en los mapeos a las grandes en los bucles o listas, mejora el rendimiento de la web considerable mente, dando _id_ unicos para que cuando se haga un cambio angular o el framework pueda encontrar facilmente que fue lo que cambio por medio de los __id__.



## Entradas @Input - property Biding



Se da por medio del decorador `@Input` que nos permite pasar comunicacion o relacion de un componente a otro componente, la sitanxis se crear dentro de la clase como si fuera una propiedad o `prop` y siempre esperara una entrada como tal. Es imporntante inicilizarla porq esto es TS y sobre todo tiparla.



__Ejemplo de uso__



__<font color="#3178c6">son.component.ts</font>__

```ts

export default class SonComponent {

    @Input() message : string = "Hola si no me mandan parametros"

}

```



__<font color="#3178c6">father.component.ts</font>__



```ts

import SonComponent from "./sonComponent/son.component.ts"

import {Component} from "@angular/core"



@Component({

    selector: "father-component",

    imports: [ SonComponent ]

})

```

__<font color="#e34f26">father.component.html</font>__

```html

<main>

    <!-- Aqui va todo el html del componente padre -->

    <son-component message="Hola este es el mensaje que se manda por props ☢" ></son-component>

    <!-- Aqui va todo el html del componente padre -->

</main>

```

## Uso de  @defer, @loading, @placeholder



Tengo idea de como funcionan, pero en la practica no me funcionan



## Injectables



Los injectables en angular son una de las cosas mas importantes de el framework para se espeficos, nos permite poner dependecias en tiempo de ejecucion, una dependecia pordria ser un servicio, por ejemplo un modulo de angular, o una peticion a una api



Es recomendable poner los Injectables en lugares especificos, podrian ser tales como en el directorio servicio si queremos que ese injectable este en modo global si ese injectable solo se usara en un modulo, se puede poner alli mismo



## Uso ⚙



Para hacer uso de una inyeccion es algo similar a la sintaxis del `useContext()` en react a diferencia que aqui no es para estados __globales__, pero es bueno tener la referencia a que la sintaxis y creacion son similares, y para hacer uso de la inyeccion ya sea de un servicio hay dos maneras de hacerlo, sea con el metodo `inject()` o sea con la sintaxis clasica de angular



`Ventajas del metodo inject`: Sintaxis mas limpia, actualizada y no necesita del metodo constructor



__Ejemplo:__



```ts



import GetCarsService from "../../services/cars.services.ts"



class CarsComponent {



    // No hace falta la ejecucion desde el metodo constructor cuando se inicializa el componente, segun lo que entiendo entonces el metodo inject(), seria buena idea utilizarlo cuando no se necesita ejecutar cuando se inicializa el componente. 🐵



    carsServices = inject(GetCarsService)



    getCar(){

        // Input de la interfaz para ver la salida por medio de ID.

        const idInput = this.form.value.id

        const rs = this.carsServices.getCar(idInput)

        // Ver el resultado de la peticion en un alerta

        window.alert(rs)

    }



}



```



> [!IMPORTANT]  

> Es importante tener en cuenta si la peticion es un observable, y, que devuelve un observable se debe tipar ese observable y este observable dara el nuevo flujo con su subscribe que sera diferente como se muestra en el ejemplo anterior.



`Ventajas de La Sintaxis Clasica ` : Sintaxis un poco mas verbosa pero mas utilizada en proyectos sea nuevo como anteriore|s , ademas que hace uso del metodo constructor.



```ts

// Here code ....

```



<!-- ### FormBuilder, FormGroup -->



## Imagenes en angular



Las imagenes en angular se cargan por lo general en el documento assets, o mejor dicho verificar las configuraciones de angular en __angular.json__ y verificar, En Angular 19 al menos las configuraciones de las imagenes se encuentran en la carpeta public y para acceder a alguna de las imagenes de esta carpeta se haria de la siguiente manera:



```html

<img src="/dog.png" />

            |

        <!-- Ruta absoluta de la imagen del perro desde ruta absoluta, angular la reconocera y la configurara enseguida para desarrollo y producccion -->

```