Quer deixar seu site do Angular o mais rápido e acessível possível? Você veio ao lugar certo!
O que é o Angular?
O Angular é um framework para a criação de interfaces do usuário. Ele fornece elementos básicos para ajudar você a configurar rapidamente um aplicativo sustentável e escalonável. O Angular permite que os desenvolvedores criem aplicativos que ficam na Web, em dispositivos móveis ou no computador.
O que há nesta coleção?
Esta coleção se concentra em cinco áreas principais de otimização de um aplicativo do Angular:
- Aprimorar a performance do seu aplicativo para aumentar o engajamento e a conversão do usuário
- Melhorar a confiabilidade do seu aplicativo em redes ruins armazenando previamente os recursos em cache com o service worker do Angular
- Tornar seu aplicativo detectável para mecanismos de pesquisa e bots de mídias sociais usando a pré-renderização e a renderização do lado do servidor
- Tornar seu aplicativo instalável para fornecer uma experiência do usuário semelhante à de um app iOS/Android
- Melhorar a acessibilidade para tornar o aplicativo usável e compreensível para todos os usuários.
Cada postagem na coleção descreve técnicas que você pode aplicar diretamente aos seus próprios aplicativos.
O que não está nesta coleção?
Esta coleção pressupõe que você já conheça o Angular e o TypeScript. Se ainda não tiver confiança, confira a documentação do TypeScript e o guia Primeiros passos com o Angular em angular.io (links em inglês).
Iniciar um projeto
Com a interface de linha de comando (CLI) do Angular, é possível configurar rapidamente um aplicativo simples do Angular no lado do cliente. Esta postagem apresenta uma breve introdução à CLI, enquanto outras postagens da coleção mostram como adicionar recursos mais avançados, como renderização do lado do servidor e suporte à implantação.
Configurar a CLI
Para começar, instale a CLI globalmente e verifique se você tem a versão mais recente executando estes comandos:
npm i -g @angular/cli
ng --version
Verifique se o último comando gera a versão 8.0.3 ou mais recente.
Como alternativa, se você não quiser instalar a CLI globalmente, poderá fazer isso localmente e executá-la com o comando npx:
npm i @angular/cli
npx ng --version
Criar o projeto
Para criar uma nova execução de projeto, siga estas etapas:
ng new my-app
Esse comando cria a estrutura de pastas e arquivos iniciais do seu aplicativo e instala os módulos de nó necessários.
Depois que o processo de configuração for concluído, inicie seu aplicativo executando o seguinte:
cd my-app
ng serve
Agora deve ser possível acessar o aplicativo em http://localhost:4200.
A seguir
No restante desta coleção, você aprenderá a melhorar o desempenho, a acessibilidade e o SEO do seu aplicativo Angular. Veja o que é abordado:
- Divisão de código no nível da rota no Angular
- Orçamentos de desempenho com a CLI do Angular
- Estratégias de pré-busca de rota no Angular
- Otimização de detecção de mudanças no Angular
- Virtualizar listas grandes com o CDK do Angular
- Pré-armazenamento em cache com o service worker do Angular
- Pré-renderizar rotas com a CLI Angular
- Renderização do lado do servidor com o Angular Universal
- Adicionar um manifesto de app da Web com a CLI Angular
- Auditoria de acessibilidade com o codelyzer