15/05/2021 - Aula 1 de Angular (Presencial)
Professor Geferson fez a apresentação do professor Jean, visto que é a primeira aula que temos com ele. Em seguida foi passado alguns avisos sobre os computadores e acessos.
Logo em seguida o professor perguntou sobre os acadêmicos, para saber o nível de cada um, para saber se todos já tem experiencia com programação. Após o momento de introdução, ele apresenta um pouco sobre si, e damos inicio a aula.
O material que o professor utilizou foi esse aqui em .PDF.
Professor começa a aula falando da parte histórica do Angular, que atualmente esta na versão 12.
Site oficial: https://angular.io/
O Angular utiliza componentes para sua estrutura, como controle de rotas, servições, etc. Já para a parte de interface, todos os componentes que comecem com ng pertencem ao Angular, dentre eles temos componentes lógicos, como ngIf, ou laços de repetição, como o ngFor.
Começamos com a instalação de alguns programas como o Node.js. O professor recomenda a utilização de um gerenciador de versão do Node, o NVM.
# Verificar vesao do Node
node -v
As 09:30 a aula continuou com a instalação do Angular.
# Verificar do Angular
npm install -g @angular/cli
ng version
As 10:00 a aula continuou com a criação de um novo projeto.
# Verificar do Angular
ng new app-unipar
# ? Would you like to add Angular routing? (y/N)
n
# ? Which stylesheet format would you like to use? (Use arrow keys)
SCSS
As 10:25 o professor continuou a apresentar a aula, explicando a estrutura do projeto angular recém criado. É aberto o arquivo angular.json e explicado o que significa cada item do arquivo, como onde se coloca novos assets, estilos ou bibliotecas. Depois vimos o arquivo package.json, que contem mais configurações para o projeto. Continuamos vendo outros detalhes, como arquivo de ambientes, o /src/environments, que você coloca configurações para seu ambiente, como ambiente de teste ou ambiente em produção.
Depois de mostrar os arquivos, foi mostrado o componente inicial app-root, como ele está estruturado, onde está o .HTML, o .SCSS e os componentes desse modulo.
Depois de vermos um pouco o projeto, e alteramos o arquivo inicial, vamos começãr a mexer com código. Para isso vamos instalar alguns componentes.
npm i bootstrap --save
npm i @ng-bootstrap/ng-bootstrap --save
Site oficial: https://ng-bootstrap.github.io/
Depois de instalar, começamos a utilizar o Bootstrap para formatar um página, mas não terminamos antes do almoço está atividade.
A aula começou a tarde as 13:45, dando continuidade a atividade anterior, que é um TODO, implementamos os metodos de adicionar e remover um TODO.
Professor pediu para gerarmos um novo componente, utilizamos o código abaixo.
ng generate component table-todo
Após criar o componente, migramos de local ele, para aprender a como trabalhar com componentes nossos. Além disso, começamos a utilizar @Input e Output para modificar atributos de dentro de nosso componente, isso tudo até as 16h.
Agora vamos criar um novo componentes para treinarmos a criação de um formulário de cadastro de usuária.
ng generate component form-usuario
As 17:30 terminamos um componente de validação, que ao digitar um campo que não atende aos requisitos, ele apresenta o erro.