¿Quieres que tu sitio de Angular sea lo más rápido y accesible posible? ¡Estás en el lugar correcto!
¿Qué es Angular?
Angular es un framework para compilar interfaces de usuario. Proporciona componentes básicos para ayudarte a configurar rápidamente una aplicación que se pueda mantener y escalar. Angular permite que los desarrolladores creen aplicaciones que se ejecutan en la Web, en dispositivos móviles o en computadoras de escritorio.
¿Qué contiene esta colección?
Esta colección se enfoca en cinco áreas principales para optimizar una aplicación de Angular:
- Mejorar el rendimiento de tu aplicación para aumentar la conversión y la participación de los usuarios
- Mejora la confiabilidad de tu aplicación en redes deficientes almacenando en caché previamente los recursos con el service worker de Angular
- Hacer que tu aplicación sea detectable para los motores de búsqueda y los bots de redes sociales con la renderización previa y la renderización del servidor
- Hacer que tu aplicación sea instalable para proporcionar una experiencia del usuario similar a la de una app para iOS o Android
Cada publicación de la colección describirá técnicas que puedes aplicar directamente a tus propias aplicaciones.
¿Qué no se incluye en esta colección?
En esta colección, se supone que ya conoces Angular y TypeScript. Si aún no tienes confianza con ellos, consulta la documentación de TypeScript y la guía Cómo comenzar a usar Angular en angular.io.
Inicia un proyecto
La interfaz de línea de comandos (CLI) de Angular te permite configurar rápidamente una aplicación de Angular sencilla del cliente. En esta publicación, se incluye una breve introducción a la CLI, mientras que en otras publicaciones de la colección se muestra cómo agregar funciones avanzadas, como la renderización del lado del servidor y la compatibilidad con la implementación.
Configura la CLI
Para comenzar, instala la CLI de forma global y ejecuta estos comandos para verificar que tengas la versión más reciente:
npm i -g @angular/cli
ng version
Asegúrate de que el último resultado del comando sea la versión 8.0.3 o una posterior.
Como alternativa, si no quieres instalar la CLI de forma global, puedes instalarla de forma local y ejecutarla con el comando npx:
npm i @angular/cli
npx ng version
Crea el proyecto
Para crear una ejecución de proyecto nueva, haz lo siguiente:
ng new my-app
Este comando creará los archivos iniciales y la estructura de carpetas para tu aplicación, y, además, instalará los módulos de nodo que necesita.
Una vez que el proceso de configuración se complete correctamente, ejecuta el siguiente comando para iniciar la aplicación:
cd my-app
ng serve
Ahora deberías poder acceder a tu aplicación en http://localhost:4200.
Próximos pasos
En el resto de esta colección, aprenderás a mejorar el rendimiento y el SEO de tu aplicación de Angular. Esto es lo que se incluye:
- División de código a nivel de ruta en Angular
- Presupuestos de rendimiento con la CLI de Angular
- Estrategias de carga previa de rutas en Angular
- Optimización de la detección de cambios en Angular
- Virtualiza listas grandes con el CDK de Angular
- Almacenamiento previo en caché con el service worker de Angular
- Renderiza rutas de forma previa con la CLI de Angular
- Renderización del servidor con Angular Universal
- Agrega un manifiesto de app web con la CLI de Angular