Criando Componentes e Rotas em Angular
#Parte 2
Olá pessoal, hoje vou fazer um passo a passo de como criar um componente com rotas e módulos usando comandos no terminal do VS Code.
Para começarmos, iremos retomar o primeiro artigo onde criamos um projeto em angular: https://medium.com/angularbr/criando-projeto-em-angular-8f2b7aca7bb7
Após criar o projeto em Angular, iremos excluir o html do app component e deixar apenas <router-outlet></router-outlet>:
Vamos começar criando uma pasta chamada “pages” para ajudar na organização do nosso código.
Em cima da pasta app clique com o botão direito do mouse e selecione a opção nova pasta e a nomeie como “pages”
Pelo terminal vamos fazer o caminho para chegar nessa pasta “pages” cd .\src\app\pages + enter:
Agora vamos fazer os seguintes comandos:
- ng g c home: este irá criar 4 componentes, HTML, SCSS, SPEC, TS.
2. ng g m home — routing: Este criará o modulo e a rota do nosso component
Nosso projeto ficará assim:
Agora vamos configurar a rota. Primeiro iremos no nosso app-routing.module.ts e digitaremos o seguinte código abaixo:
Agora vamos no nosso home-routing.module.ts adicionar o código abaixo:
Após feito os passos acima, vamos para o nosso localhost ver como ficou:
E assim terminamos de fazer a rota do nosso componente home. No próximo artigo vou adicionar o “Bootstrap” ao nosso projeto.
