Inicio › Empezar

Inicio rápido

Instala AngeLite, escribe tu primer componente y elige cómo enviarlo: un solo script, o precompilado para pesar lo mínimo.

Qué es AngeLite#

Es un framework de interfaces de usuario hecho de tres ideas:

• Señales (signal, computed, effect): el estado vive en valores reactivos; cuando uno cambia, solo se actualiza lo que depende de él. No hay detección de cambios global ni Zone.js.
• Plantillas al estilo de Angular: HTML con {{ }}, [prop], (evento), @if y @for. Las plantillas se compilan una vez a una lista de instrucciones; no hay DOM virtual.
• Módulos opcionales: el núcleo es pequeño y todo lo demás (router, formularios, HTTP, i18n, animaciones, SSR) se importa solo si lo usas.

Instalación#

Hay dos caminos. El más rápido no necesita ninguna herramienta: un <script>.

Con un script (sin build)#

Incluye el bundle y escribe tu app. Las plantillas se compilan en el navegador al arrancar (unos 10 KB gzip en total, módulos opcionales incluidos en el bundle completo).

<div id="app"></div>
<script src="https://duvanjamid.github.io/angelite-docs/angelite.min.js"></script>
<script>
  const { signal, component, mount } = AngeLite;

  class Hello {
    name = signal('mundo');
  }
  component(Hello, {
    template: `<input [(ngModel)]="name"> <p>Hola, {{ name() }}</p>`
  });
  mount(Hello, document.getElementById('app'));
</script>

Con npm y un bundler#

npm install github:duvanjamid/angelite

import { signal, component, mount } from '@duvanjamid/angelite';

Con un bundler (esbuild, Vite, Rollup) cada módulo que no importes desaparece del resultado. Para pesar lo mínimo, precompila las plantillas: la app envía solo el runtime (unos 6 KB), sin el compilador.

Tu primer componente#

Un componente es una clase de JavaScript más component(Clase, { selector, template }). Los campos de la clase están disponibles en la plantilla; las señales se leen llamándolas (count()) y se escriben con set o update.

const { signal, computed, component, mount } = AngeLite;

class Counter {
  count = signal(1);
  double = computed(() => this.count() * 2);
  add(n) { this.count.update(v => v + n); }
}
component(Counter, {
  template: `
    <button (click)="add(-1)">−</button>
    <b>{{ count() }}</b>
    <button (click)="add(1)">+</button>
    <span> × 2 = {{ double() }}</span>`
});
mount(Counter, root);

Cómo enviarlo#

Lo habitual es empezar con el script y pasar a precompilar cuando la app crece. El código de los componentes no cambia.

Siguientes pasos#