¿Quieres que tu sitio de Angular sea lo más rápido y accesible posible? Este es el lugar indicado.
¿Qué es Angular?
Angular es un framework para compilar interfaces de usuario. Proporciona componentes básicos para ayudarte a configurar con rapidez una aplicación escalable y que se puede mantener. Angular permite a los desarrolladores crear aplicaciones que se alojan en la Web, en dispositivos móviles o en computadoras de escritorio.
¿Qué hay en 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 mediante el almacenamiento previo en caché de 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 mediante el procesamiento previo y la renderización del servidor
- Hacer que tu aplicación sea instalable para brindar una experiencia del usuario similar a la de una app para iOS y Android
- Mejoras la accesibilidad de tu aplicación para que sea fácil de usar y comprender para todos los usuarios
En cada publicación de la colección, se describirán técnicas que puedes aplicar directamente a tus propias aplicaciones.
¿Qué no hay en esta colección?
En esta colección, se da por sentado que ya conoces Angular y TypeScript. Si aún no te sientes seguro 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 sencilla de Angular del cliente. Esta publicación tiene una breve introducción a la CLI, mientras que otras publicaciones de la colección muestran cómo agregar funciones más avanzadas, como la renderización 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 tienes la versión más reciente:
npm i -g @angular/cli
ng --version
Asegúrate de que el último comando genere la versión 8.0.3 o una más reciente.
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 un proyecto nuevo, ejecuta el siguiente comando:
ng new my-app
Este comando creará la estructura inicial de archivos y carpetas para tu aplicación, y también instalará los módulos de nodo que necesita.
Cuando el proceso de configuración se complete correctamente, ejecuta el siguiente comando para iniciar tu aplicación:
cd my-app
ng serve
Ahora deberías poder acceder a tu aplicación en http://localhost:4200.
¿Qué sigue?
En el resto de esta colección, aprenderás a mejorar el rendimiento, la accesibilidad y la SEO de tu aplicación de Angular. Esto es lo que se cubre:
- División de código a nivel de ruta en Angular
- Presupuestos de rendimiento con la CLI de Angular
- Estrategias de precarga de rutas en Angular
- Optimización de la detección de cambios en Angular
- Virtualiza listas grandes con el CDK de Angular
- Cómo almacenar previamente en caché con el Service Worker de Angular
- Renderiza previamente las rutas con la CLI de Angular
- Renderización del servidor con Angular Universal
- Agrega un manifiesto de app web con la CLI de Angular
- Auditoría de accesibilidad con Codelyzer