https://github.com/vagnerbellacosa/128_criandoecommercesimplesangular

Criando um E-commerce Simples com Angular
https://github.com/vagnerbellacosa/128_criandoecommercesimplesangular

angular dio ecommerce lab

Last synced: 6 days ago
JSON representation

Criando um E-commerce Simples com Angular

Host: GitHub
URL: https://github.com/vagnerbellacosa/128_criandoecommercesimplesangular
Owner: VagnerBellacosa
License: gpl-3.0
Created: 2022-01-24T16:58:43.000Z (over 4 years ago)
Default Branch: main
Last Pushed: 2022-01-24T22:13:29.000Z (over 4 years ago)
Last Synced: 2025-02-22T11:17:54.782Z (over 1 year ago)
Topics: angular, dio, ecommerce, lab
Homepage:
Size: 429 KB
Stars: 0
Watchers: 2
Forks: 0
Open Issues: 0
Metadata Files:
- Readme: README.md
- License: LICENSE

Awesome Lists containing this project

README

# LABs

## 128_CriandoECommerceSimplesAngular

Criando um E-commerce Simples com Angular

Plano de Aulas - Angular - Marketplace

📁 Repositório disponível em: DianaMartine/angular-marketplace (github.com)!

Aula 1 - Overview angular.js

Referências

Name
Tags
Links

Como surgiu?

History

glossário

Vantagens

HistoryTheory

glossário

Conceitos importantes

DevTheory

glossário

Andamento da aula
- 📔História
  - Como surgiu?
  - Vantagens
- ‼️Conceitos importantes
  - Components
  - Templates
  - Metadata
  - Data binding
  - Serviços
  - Injeção de dependência
  - Diretivas
  - Roteamento

Aula 2 - Iniciando o projeto ng new

Referências

Name
Tags
Links

Criando nosso backend

DevRepoTheory

npm init; json-server; repo

Iniciando nosso projeto

DevRepoTheory

repo

Entendendo conteúdo gerado

DevTheory

estrutura de projeto

Andamento da aula
- 🗄️Criando nosso backend
  - Criando base de dados
  - npm init && npm init -y
  - npm i -g json-server
  - npm start
- ✈️Iniciando o projeto
  - ng new
- 🤔Entendendo conteúdo gerado
  - src
  - app-component
  - assets
  - environments
  - index.html

Aula 3 - Homepage methods and local variable template

Referências

Name
Tags
Links

Explorando o poder do Angular material

DevTheory

Angular Material

Criando header, footer && nav component

DevRepoTheory

repo

Criando nossa home view

DevRepoTheory

repo

Andamento da aula
- 🔎Explorando poder do Angular material
  - ng add @angular/material
- 🛠️Criando header, footer && nav component
  - criando header
  - criando footer
  - criando nav
    - explorando métodos em eventos e variável do template

Aula 4 - Listando produtos Observable, subscribe, *ngFor

Referências

Name
Tags
Links

Criando nosso modelo de produto

DevRepoTheory

repo

Criando nosso primeiro service

DevRepoTheory

repo

Renderizando produtos na lista (Observable, Subscribe e *ngFor).

DevRepoTheory

Observable e subscribe

Andamento da aula
- 🛠️Criando nosso modelo de produto
  - conceito de interface
- 🛠️Criando nosso primeiro service
  - usando o HttpClient
  - conceito de modificadores de acesso
- 📝Renderizando produtos na lista
  - Observable e subscribe
  - diretiva *ngFor

Aula 5 – Add produtos e Checkout checkout

Referências

Name
Tags
Links

Métodos de add e remover produtos

DevRepoTheory

repo

Criando botão de select

DevRepoTheory

repo

Criando página de checkout

DevRepoTheory

repo

Explorando o poder do Angular Material

DevRepoTheory

repo

Criando botão de pagamento com mensagem em snackbar

DevRepoTheory

repo

Andamento da aula
- 📐Métodos de add e remover produtos
  - Criando handlers (manipuladores)
  - Explorando métodos acessores (getter e setter)
- 🛠️Criando botão de select
  - Separando responsabilidades dos botões
- 🛠️Criando página de chekout
  - Criando um novo componente e atualizando as rotas
- 🔍Explorando o poder do Angular Material
  - Formulários (forms)
  - Campos (fields)
  - Labels
  - Inputs
- 💳Criando botão de pagamento com mensagem em snackbar
  - Explorando snack-bar do angular material

Aula 6 – Melhorias no projeto melhorias

Referências

Name
Tags
Links

Contador de produtos selecionados

DevRepoTheory

repo

Explorando pipes do Angular

DevRepoTheory

pipes

Explorando o data binding

DevRepoTheory

data binding; two-way data inding

Andamento da aula
- 🔢Contador de produtos selecionados
  - Criando um contador
  - Explorando botões do Angular material.
- 🔍Explorando pipes do Angular
  - Explorando a pipe currency para tratar dados de preço
- 🔍Explorand o data binding
  - Two-way data binding
  - Criando objeto com informações do cliente
- ⬆️Melhorando nosso checkout
  - Add melhorias e regras no nosso checkout

CONTEÚDOS INFORMAÇÕES

DESCRIÇÃO

Angular - Front-End - Intermediário
ESPECIALISTA
#### Diana Martine
Application Development New Associate, Accenture
 

https://web.dio.me/lab/criando-um-e-commerce-simples-com-angular-cards-de-produtos-e-um-carrinho/learning/beedb3e1-83d0-4202-bcdb-596f780240f8