Criando sua segunda aplicação com Angular

Antes de começar

Eu criei um repositório no GitHub para este tutorial, sugiro cloná-lo. Nele você encontrará o HTML inicial do projeto, bem como um exemplo finalizado da aplicação que vamos desenvolver aqui.

Para clonar o repositório, abra o terminal e navegue até o diretório onde ficará o projeto. Depois, digite:

$ git clone https://github.com/charlesferreira/minhas-listas.git

$ cd minhas-listas

Aproveite para explorar brevemente o conteúdo do diretório html e familiarizar-se com a estrutura do código. Algumas partes que vamos utilizar mais pra frente estão comentadas, como a mensagem de “não há listas” e um card de lista sendo editada.

Como você pode ver, estamos utilizando o framework Bootstrap para dar estilo à nossa aplicação. Adicionamos algumas poucas regras de CSS com o arquivo style.css. Para simplificar as coisas e focar mais no Angular, importamos o arquivo completo do Bootstrap via CDN. Nos blocos de código ao longo deste post, eu preferi manter as classes do Bootstrap, apesar de deixar os exemplos mais poluídos, para facilitar a correlação com o código em que você estará mexendo.

Também estamos importando via CDN a biblioteca de ícones Font Awesome. Em um projeto no mundo real, você provavelmente vai querer importar esses pacotes via NPM e personalizar algumas coisas aqui e ali.

O diretório app-final contém a aplicação finalizada e você pode usá-la de referência ao longo do tutorial se desejar. Apenas lembre-se que, caso deseje executá-la localmente, é preciso primeiro navegar até o diretório e dar o comando npm install.

Deixar uma resposta