Bem-vindo ao mundo emocionante do Angular! Este tutorial foi criado especialmente para iniciantes que desejam dar os primeiros passos nesta poderosa estrutura de desenvolvimento da web.
O Angular é um framework de desenvolvimento de aplicativos web desenvolvido pelo Google. Ele é usado para criar aplicativos web dinâmicos e interativos, e é baseado na linguagem de programação TypeScript.
Neste tutorial, vamos abordar os conceitos básicos do Angular, como configurar um ambiente de desenvolvimento, criar um projeto Angular, entender os componentes, módulos, serviços e rotas, e por fim, construir um aplicativo web simples.
Vamos começar!
Passo 1: Configurando o Ambiente de Desenvolvimento
Antes de começar a trabalhar com o Angular, você precisará configurar o ambiente de desenvolvimento. Para isso, você precisará do Node.js e do npm instalados em seu sistema. Você pode baixar e instalar o Node.js em https://nodejs.org/. O npm é instalado automaticamente junto com o Node.js.
Para verificar se o Node.js e o npm estão instalados corretamente, abra o terminal e execute os seguintes comandos:
node -v
npm -vSe você vir as versões do Node.js e do npm, significa que foram instalados corretamente.
Passo 2: Criando um Projeto Angular
Agora que você configurou o ambiente de desenvolvimento, é hora de criar um novo projeto Angular. Para fazer isso, você precisará instalar o Angular CLI (Interface de Linha de Comando). Execute o seguinte comando no terminal:
npm install -g @angular/cliDepois de instalar o Angular CLI, crie um novo projeto Angular executando o seguinte comando:
ng new meu-projeto-angularIsso criará um novo projeto Angular com o nome "meu-projeto-angular". Para navegar até o diretório do projeto recém-criado, execute o seguinte comando:
cd meu-projeto-angularPasso 3: Entendendo Componentes, Módulos e Serviços
No Angular, os componentes são os blocos de construção fundamentais de um aplicativo. Eles são responsáveis por definir a estrutura e o comportamento de partes específicas do aplicativo. Os módulos são pacotes de funcionalidades relacionadas, enquanto os serviços são classes que contêm métodos que fornecem funcionalidades específicas para vários componentes.
Para criar um novo componente, use o seguinte comando:
ng generate component nome-do-componentePara criar um novo módulo, use o seguinte comando:
ng generate module nome-do-moduloE para criar um novo serviço, use o seguinte comando:
ng generate service nome-do-servicoPasso 4: Configurando Rotas
As rotas no Angular são usadas para navegar de uma página para outra em um aplicativo web. Para configurar as rotas em seu aplicativo, primeiro importe o RouterModule e defina as rotas em um arquivo de rotas. Em seguida, adicione um componente ao roteador e defina as rotas no arquivo app-routing.module.ts.
Passo 5: Construindo um Aplicativo Web Simples
Agora que você entendeu os conceitos básicos do Angular, é hora de construir um aplicativo web simples. Para isso, você pode criar um novo componente usando o comando ng generate component e adicionar algum HTML e CSS básico a ele. Em seguida, adicione o novo componente ao módulo principal do aplicativo e defina as rotas necessárias para navegá-lo.
Por fim, inicie o servidor de desenvolvimento Angular executando o seguinte comando:
ng serveIsso iniciará o servidor de desenvolvimento e você poderá visualizar o aplicativo em seu navegador acessando http://localhost:4200.
Parabéns! Você deu os primeiros passos no mundo do Angular. Continue praticando e explorando mais recursos e funcionalidades do Angular para se tornar um desenvolvedor web Angular experiente. Divirta-se codificando!
📚Treinamentos indicados para sua carreira:
🔥Se você quer aprender a criar aplicativos:
https://hotm.art/curso-completo-de-android
🔥Se você quer aprender Java do Zero ao avançado
https://hotm.art/java-completo
🔥Curso Desenvolvedor Full Stack Turbo:
https://hotm.art/full-stack-turbo
💻Mais conteúdos sobre Programação e desenvolvimento:
https://areatechbrasil.com.br
Cara vc é mto bom!! Feliz por ter conhecido o canal
Adorei tua abordagem. Estou procurando projetos Angular para seguir e aprender. Vai lançar um projeto Angular do zero aqui no canal?
Parabéns cara, muito bom.
Boa noite. Quais cursos de angular vc fez ou recomenda?
Quem dera todo conteúdo fosse assim objetivo e organizado. Vim aqui pesquisar justamente por estar fazendo um curso 'recente' onde utilizaram uma versão antiga e você inclusive falou sobre isso. Muito grato!
Parabéns! Muito bem explicado e principalmente numa velocidade ágil, sem enrolação!
Gente eu consigo achar nada atualizado de como navegar em várias páginas e isso não entra na cabeça com o angular, por exemplo a tela home que vai ter entrar cadastrar essas coisas como que faz para mecher nessas telas e Ir visualizando
Por favor faz mais, continue ensinando, desejo muito aprender.
Moço que thoppppp
Muito obrigado cara , esse foi o unico video que me ajudou a começar do zero , nao sei nada de angular e tenho que fazer um projeto na faculdade. ganhou um inscriro🙂
Que aula fenomenal, muito bom !!
Ajudou bastante! Estou começando a estudar o Angular na faculdade, mas os professores são péssimos na didática. Parabéns pelo vídeo!
Então é possível customizar um componente e adicionar novas características ao componente se necessário?
meu ( ng g c teste ) não funciona . o prompt diz que a execução de scripts foi desabilitada
não sou de comentar em vídeos, mas sua didática é excelente. Explicou melhor que o meu professor na faculdade!! obrigado.
Show hein… adorei
Obrigado pelo vídeo!
Uma coisa, percebi que ao explicar como fazer para o componente "app" enxergar o componente "teste", faltou mencionar que no arquivo app.component.ts, na linha 8, é preciso adicionar o TesteComponent nos imports desse arquivo e também dentro da array de imports, ficando dessa forma:
——————
import { Component } from '@angular/core';
import { RouterOutlet } from '@angular/router';
import { TesteComponent } from './teste/teste.component';
@Component({
selector: 'app-root',
standalone: true,
imports: [RouterOutlet, TesteComponent],
templateUrl: './app.component.html',
styleUrl: './app.component.css'
})
export class AppComponent {
title = 'areatechbr';
}
——————
Originalmente a linha imports era:
imports: [RouterOutlet],
——————
Caso não seja feita essa alteração, o app dá um erro no Terminal onde está rodando o ng serve:
——————
X [ERROR] NG8001: 'app-teste' is not a known element:
1. If 'app-teste' is an Angular component, then verify that it is included in the '@Component.imports' of this component.
2. If 'app-teste' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@Component.schemas' of this component to suppress this message. [plugin angular-compiler]
src/app/app.component.html:0:0:
0 │
╵ ^
Error occurs in the template of component AppComponent.
src/app/app.component.ts:8:15:
8 │ templateUrl: './app.component.html',
——————
Espero que isso possa ajudar a galera que pode estar com essa dificuldade, como eu estava. Se essa não for a melhor solução, por favor adicionem aqui como resposta ao meu comentário! Isso ajudará todo mundo.
Obrigado novamente! 🙂
O meu não da certo de jeito nenhum. Criei igual o vídeo, gerou a pasta teste normal, porém ele da um erro no <app-teste></app-teste> parece que ele não está reconhecendo o componente
E quando tento usar o ctrl + no vs code ele só da zoom na tela msm kkkkkkk
no cli do angular 17 aparece Do you want to enable Server-Side Rendering (SSR) and Static Site Generation
(SSG/Prerendering)? eu marco sim ou nao?