From bc62dd83eeab325441380d83bd02f223c407610c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Miri=C3=A3=20Amaral=20Cust=C3=B3dio=20Santos?= Date: Fri, 29 Aug 2025 15:51:03 -0300 Subject: [PATCH 1/3] Create Resumo-Entendendo-Angular --- Resumo-Entendendo-Angular | 15 +++++++++++++++ 1 file changed, 15 insertions(+) create mode 100644 Resumo-Entendendo-Angular diff --git a/Resumo-Entendendo-Angular b/Resumo-Entendendo-Angular new file mode 100644 index 0000000..3c67ab6 --- /dev/null +++ b/Resumo-Entendendo-Angular @@ -0,0 +1,15 @@ +# Desvendando o Angular: do zero ao funcionamento + +Se você está começando a explorar o **Angular**, relaxa! Ele é um framework super poderoso que ajuda a criar sites e sistemas web de forma organizada e prática. + +Tudo começa com o **Angular CLI**, que é tipo uma "ferramenta mágica" que funciona no terminal e facilita muito sua vida. Com ela, você consegue criar um novo projeto rapidinho (`ng new`) e gerar os arquivos necessários (`ng generate`). A ideia principal é que sua aplicação seja feita de **componentes**, que são como bloquinhos de código que juntam HTML, CSS e TypeScript para formar partes do seu site. + +Agora, a parte legal: cada componente tem um "ciclo de vida". Isso significa que ele nasce, vive e pode ser destruído. Por exemplo, quando um componente é criado, o Angular chama o método `ngOnInit`; quando ele é removido, chama o `ngOnDestroy`. Esses momentos são chamados de "ganchos" (ou *hooks*), e você pode usar eles para colocar sua lógica e fazer as coisas funcionarem direitinho em cada etapa. + +Resumindo: + +- **CLI:** É sua ferramenta para automatizar tarefas e facilitar o trabalho. +- **Componentes:** São os pedacinhos reutilizáveis do seu código. +- **Ciclo de Vida:** É como você controla o momento certo de executar ações no componente, evitando problemas como vazamento de memória. + +Aprender esses conceitos básicos já vai te deixar pronto para criar projetos incríveis com Angular! From 657f7f85234c743740245745bb928eaddd27ae9c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Miri=C3=A3=20Amaral=20Cust=C3=B3dio=20Santos?= Date: Fri, 29 Aug 2025 15:57:47 -0300 Subject: [PATCH 2/3] Update Resumo-Entendendo-Angular Resumindo meus estudos --- Resumo-Entendendo-Angular | 16 +++++++--------- 1 file changed, 7 insertions(+), 9 deletions(-) diff --git a/Resumo-Entendendo-Angular b/Resumo-Entendendo-Angular index 3c67ab6..cfe3653 100644 --- a/Resumo-Entendendo-Angular +++ b/Resumo-Entendendo-Angular @@ -1,15 +1,13 @@ -# Desvendando o Angular: do zero ao funcionamento +### **1. O Básico do Ambiente Local** -Se você está começando a explorar o **Angular**, relaxa! Ele é um framework super poderoso que ajuda a criar sites e sistemas web de forma organizada e prática. +* **Preparando o Terreno:** Aprendi a instalar o **Angular CLI** de forma global com o `npm`, e a criar um novo projeto com o comando `ng new`. -Tudo começa com o **Angular CLI**, que é tipo uma "ferramenta mágica" que funciona no terminal e facilita muito sua vida. Com ela, você consegue criar um novo projeto rapidinho (`ng new`) e gerar os arquivos necessários (`ng generate`). A ideia principal é que sua aplicação seja feita de **componentes**, que são como bloquinhos de código que juntam HTML, CSS e TypeScript para formar partes do seu site. +* **O Novo Brother:** O CLI virou meu melhor amigo. Com ele, consigo criar componentes (`ng g c`), que são a base de qualquer app, e entendi a estrutura de arquivos de um projeto Angular. -Agora, a parte legal: cada componente tem um "ciclo de vida". Isso significa que ele nasce, vive e pode ser destruído. Por exemplo, quando um componente é criado, o Angular chama o método `ngOnInit`; quando ele é removido, chama o `ngOnDestroy`. Esses momentos são chamados de "ganchos" (ou *hooks*), e você pode usar eles para colocar sua lógica e fazer as coisas funcionarem direitinho em cada etapa. +* **Dica Opcional:** Deixei meu VS Code com uma cara mais profissional usando o `Material Icon Theme` para organizar pastas e arquivos de forma visual. -Resumindo: +### **2. Entendendo o Ciclo de Vida do Componente** -- **CLI:** É sua ferramenta para automatizar tarefas e facilitar o trabalho. -- **Componentes:** São os pedacinhos reutilizáveis do seu código. -- **Ciclo de Vida:** É como você controla o momento certo de executar ações no componente, evitando problemas como vazamento de memória. +O coração do que estudei! Entendi que um componente tem uma vida, e o Angular nos dá "ganchos" para controlá-la. -Aprender esses conceitos básicos já vai te deixar pronto para criar projetos incríveis com Angular! +* **A Ordem da Vida:** Os **8 hooks** de ciclo de vida são como momentos de um dia. Fui do nascimento (`ngOnInit`), passando por cada pequena mudança (`ngOnChanges`), até a hora de dar tchau (`ngOnDestroy`). From 959470829b7b4b06805a98abf670a34af459a720 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Miri=C3=A3=20Amaral=20Cust=C3=B3dio=20Santos?= Date: Fri, 12 Sep 2025 20:42:32 -0300 Subject: [PATCH 3/3] Create study-angular-material Meu caderninho de estudos e playground para Angular Material Complementar do professor Felipe Aguiar da DIO --- study-angular-material | 69 ++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 69 insertions(+) create mode 100644 study-angular-material diff --git a/study-angular-material b/study-angular-material new file mode 100644 index 0000000..3a3f9ee --- /dev/null +++ b/study-angular-material @@ -0,0 +1,69 @@ +# 📚 Angular Playground da Miriã: Meu Caderno de Estudos (Fork) ✨ + +E aí, meu 🐙! Bem-vindos ao meu **playground de estudos em Angular**! 🥳 + +Este repositório é um `fork` do material incrível do meu professor Felipe Aguiar, da DIO, e estou usando-o como meu **caderno de anotações e experimentos práticos** para aprofundar meus conhecimentos no framework. + +A ideia aqui é documentar o meu **processo de estudo**, testar conceitos, refatorar códigos e aplicar novas ideias, tudo com base em um projeto existente. É o meu espaço para: + +* Explorar novos recursos do Angular. +* Entender padrões de projeto na prática. +* Desenvolver soluções para desafios que surgem. +* E, claro, colocar a mão na massa sem medo de errar, aprendendo com um código base de qualidade! + +Se você também adora ver o Angular em ação e quer acompanhar um processo de aprendizado prático, este é o lugar certo! Fique à vontade para explorar como estou desvendando o Angular por aqui. 😉 + +--- + +### **Créditos e Origem do Projeto ✨** + +Este projeto é um `fork` do repositório original desenvolvido pelo meu professor Felipe Aguiar **[https://github.com/felipeAguiarCode]**. Toda a estrutura base e o projeto inicial são de autoria dele, e sou muito grata por esse material que me serve de excelente fonte de estudo! 🙏 + +--- + + +### **Tecnologias Envolvidas:** + +* **Angular** +* **TypeScript** +* **HTML & CSS** + +--- + +### **Como Rodar o Projeto (Localmente):** + +1. **Clone este repositório (`fork`):** + ```bash + git clone [https://github.com/miriaamaral/angular-playground.git](https://github.com/miriaamaral/angular-playground.git) + ``` +2. **Entre na pasta do projeto:** + ```bash + cd angular-playground + ``` +3. **Instale as dependências:** + ```bash + npm install + ``` +4. **Inicie o servidor de desenvolvimento:** + ```bash + ng serve + ``` +5. Abra seu navegador e acesse `http://localhost:4200/`. + +--- + +### **Conecte-se Comigo! 👋** + +Gostou do meu jeito de estudar ou tem dicas para compartilhar? Que tal a gente se conectar? Ficarei super feliz! + +* **LinkedIn:** [https://www.linkedin.com/in/miriaamaralcs](https://www.linkedin.com/in/miriaamaralcs) +* **GitHub:** [https://github.com/miriaamaral](https://github.com/miriaamaral) +* **Plataforma DIO, onde estudo:** [https://www.dio.me/sign-up?ref=6F1F401485F9459BA6AC879FEA95D1B5](https://www.dio.me/sign-up?ref=6F1F401485F9459BA6AC879FEA95D1B5) + +Vamos juntos construir o futuro da tecnologia! ✨ + +--- + +#### **Tópicos (Tags) para este Repositório:** + +`Angular TypeScript Frontend Estudos Aprendizado Fork Demonstração`