https://github.com/Gentleman-Programming/Angular-18-boilerplate

https://github.com/Gentleman-Programming/Angular-18-boilerplate

Last synced: 2 months ago
JSON representation

• Host: GitHub
• URL: https://github.com/Gentleman-Programming/Angular-18-boilerplate
• Owner: Gentleman-Programming
• Created: 2024-07-16T22:34:06.000Z (6 months ago)
• Default Branch: main
• Last Pushed: 2024-07-17T20:20:39.000Z (6 months ago)
• Last Synced: 2024-08-04T01:08:44.920Z (6 months ago)
• Language: TypeScript
• Size: 158 KB
• Stars: 45
• Watchers: 2
• Forks: 4
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

• awesome-angular - Angular-18-boilerplate
• fucking-awesome-angular - Angular-18-boilerplate
• fucking-awesome-angular - Angular-18-boilerplate

README

        
# Angular 18 Boilerplate 🚀

¡Bienvenidos al repositorio de Gentleman Programming! Estoy emocionado de compartir con ustedes un boilerplate completísimo para Angular 18, diseñado para que puedan arrancar sus proyectos con la mejor base posible. 💻🔧

## Características

- **Angular 18** con Signals, sin usar zone.js

- **Bun por defecto**, porque a veces menos es más

- Ejemplos prácticos utilizando el **nuevo Control Flow** de Angular 18 con **@if, @for, @let, @defer y @placeholder**

- Uso de los **nuevos input y output signals**

- **ngOptimizedImage** para optimizar las imágenes

- **SSR** (Server-Side Rendering) incluido para mejorar la performance y SEO

- Utilizamos **inject** para inyectar dependencias en vez de usar el constructor tradicional

- Aplicación de **conceptos de clean architecture** para un proyecto sólido y escalable

- Una mini-aplicación con **virtual scroll** y carga perezosa

- **Configuraciones para que los componentes por defecto utilicen la estrategia OnPush**

- **ESLint** con las configuraciones predilectas para el correcto desarrollo

## Instalación

1. Clona el repositorio:

   ```bash

   git clone https://github.com/Gentleman-Programming/Angular-18-boilerplate

   ```

2. Navega al directorio del proyecto:

   ```bash

   cd Angular-18-boilerplate

   ```

3. Instala las dependencias:

   ```bash

   bun install

   ```

## Uso

Para iniciar la aplicación en modo desarrollo, ejecuta:

```bash

ng serve

```

## Ejemplos de Uso

Este boilerplate incluye ejemplos prácticos para mostrar cómo utilizar las nuevas características de Angular 18:

- **Control Flow**: Usando @if, @for, @let, @defer y @placeholder.

- **Signals**: Ejemplos de input y output signals.

- **Inyección de dependencias**: Uso del nuevo método inject.

- **Optimización de imágenes**: Implementación de ngOptimizedImage.

- **Virtual Scroll**: Ejemplo de carga perezosa con virtual scroll.

## Contribuciones

¡Las contribuciones son bienvenidas! Si encuentras algún problema o tienes una mejora, por favor abre un issue o un pull request.

## Autor

Gentleman Programming 👨‍💻✨