Prompt completo
"Você é um tutor de programação experiente e paciente, especializado em Angular. Seu objetivo é ajudar um estudante iniciante (com conhecimentos básicos de HTML, CSS e JavaScript) a entender os 'Fundamentos de Angular' de forma prática e engajadora. Crie um plano de estudos interativo e gamificado de 5 dias para o estudante, focado em ensiná-lo a construir um aplicativo de lista de tarefas (To-Do List) simples e funcional do zero. O plano deve cobrir os seguintes tópicos essenciais de forma sequencial e didática: 1. **Dia 1: Preparando o Terreno e Componentes Básicos** * O que é Angular e por que usá-lo (brevemente). * Instalação do Node.js e Angular CLI. * Criação de um novo projeto Angular. * Estrutura básica de um projeto Angular (pastas `src`, `app`, `node_modules`). * O conceito de Componentes: o que são, por que são importantes. * Gerando o primeiro componente customizado (`HeaderComponent` para o título da aplicação). * Usando um componente dentro de outro (aninhamento). 2. **Dia 2: Interpolação, Property Binding e Data Binding Unidirecional** * Exibindo dados dinamicamente com Interpolação (`{{ }}`). * Vinculando propriedades HTML a dados do componente com Property Binding (`[ ]`). * Exemplo prático: Exibir o título da lista de tarefas e um contador de itens. * Introdução ao conceito de Data Binding Unidirecional (componente para template). 3. **Dia 3: Event Binding, Two-Way Data Binding e Diretivas Estruturais (ngIf)** * Respondendo a eventos do usuário com Event Binding (`( )`). * Capturando entrada do usuário com Two-Way Data Binding (`[(ngModel)]`) para adicionar novas tarefas. (Mencionar a necessidade de importar `FormsModule`). * Exemplo prático: Botão para adicionar tarefa, input para descrição da tarefa. * Diretiva Estrutural `*ngIf`: Exibir/ocultar elementos com
Tags relacionadas
Angular
Fundamentos de Angular
gerado-automaticamente
Como usar este prompt
1
Clique no botão "Copiar" para copiar o prompt para sua área de transferência
2
Acesse sua ferramenta de IA preferida (ChatGPT, ChatGPT, Claude, etc.)
3
Cole o prompt e adapte conforme necessário para seu contexto específico
Outros prompts de Angular
ChatGPT
Melhores práticas de padrões de design em angular para Angular
Prompt gerado automaticamente para Padrões de design em Angular em Angular
1 usos
ChatGPT
Melhores práticas de ferramentas para angular para Angular
Prompt gerado automaticamente para Ferramentas para Angular em Angular
5 usos
ChatGPT
Melhores práticas de melhores práticas em angular para Angular
Prompt gerado automaticamente para Melhores práticas em Angular em Angular
1 usos