{"id":124,"date":"2023-09-04T18:07:32","date_gmt":"2023-09-04T21:07:32","guid":{"rendered":"https:\/\/difusao.tech\/blog\/?p=124"},"modified":"2023-09-04T22:36:00","modified_gmt":"2023-09-05T01:36:00","slug":"hello-world-em-angular-crie-o-seu-primeiro-projeto-em-angular","status":"publish","type":"post","link":"https:\/\/difusao.tech\/blog\/hello-world-em-angular-crie-o-seu-primeiro-projeto-em-angular\/","title":{"rendered":"&#8220;Hello world&#8221; em Angular &#8211; Crie o seu primeiro projeto em Angular."},"content":{"rendered":"\n<p>Neste artigo vamos ver o passo a passo para ter o nosso primeiro projeto em Angular.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"601\" height=\"182\" src=\"https:\/\/difusao.tech\/blog\/wp-content\/uploads\/2023\/09\/image-8.png\" alt=\"\" class=\"wp-image-134\" srcset=\"https:\/\/difusao.tech\/blog\/wp-content\/uploads\/2023\/09\/image-8.png 601w, https:\/\/difusao.tech\/blog\/wp-content\/uploads\/2023\/09\/image-8-300x91.png 300w\" sizes=\"auto, (max-width: 601px) 100vw, 601px\" \/><\/figure>\n\n\n\n<p>&#8220;Angular \u00e9 uma plataforma de aplica\u00e7\u00f5es web de c\u00f3digo-fonte aberto e front-end baseado em TypeScript liderado pela Equipe Angular do Google e por uma comunidade de indiv\u00edduos e corpora\u00e7\u00f5es. Angular \u00e9 uma reescrita completa do AngularJS, feito pela mesma equipe que o construiu.&#8221; <br>Fonte: wikipedia<\/p>\n\n\n\n<p>Agora vamos aos requisitos para um ambiente completo de desenvolvimento:<\/p>\n\n\n\n<p><mark style=\"background-color:#abb8c3\" class=\"has-inline-color\">Git<\/mark><br>Caso n\u00e3o tenha instalado acesse o site: https:\/\/git-scm.com<\/p>\n\n\n\n<p><mark style=\"background-color:#abb8c3\" class=\"has-inline-color\">NodeJS<\/mark><br>Baixe a vers\u00e3o LTS no site: https:\/\/nodejs.org<\/p>\n\n\n\n<p><mark style=\"background-color:#abb8c3\" class=\"has-inline-color\">Visual Studio Code<\/mark> ou qualquer editor de c\u00f3digo de sua prefer\u00eancia.<br>Se voc\u00ea for utilizar o Visual Studio Code, instale a extes\u00e3o <mark style=\"background-color:#abb8c3\" class=\"has-inline-color\">Angular Language Service<\/mark> ela vai ajudar na hora de codificar.<\/p>\n\n\n\n<p>Todos os programas necess\u00e1rios instalados, vamos as verifica\u00e7\u00f5es.<\/p>\n\n\n\n<p>Abra o Visual Studio Code e vamos abrir uma pasta de trabalho para o nosso projeto com a tecla de atalho <mark style=\"background-color:#abb8c3\" class=\"has-inline-color\">CTRL + K + O<\/mark>, essa pasta vai ser a pasta do nosso projeto.<\/p>\n\n\n\n<p>Abra o terminal dentro do VS Code com o atalho <mark style=\"background-color:#abb8c3\" class=\"has-inline-color\">CTRL + &#8220;<\/mark> (Control + Aspas) e mude para o Git Bash.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"432\" src=\"https:\/\/difusao.tech\/blog\/wp-content\/uploads\/2023\/09\/vsgitbash-1024x432.gif\" alt=\"\" class=\"wp-image-126\" srcset=\"https:\/\/difusao.tech\/blog\/wp-content\/uploads\/2023\/09\/vsgitbash-1024x432.gif 1024w, https:\/\/difusao.tech\/blog\/wp-content\/uploads\/2023\/09\/vsgitbash-300x127.gif 300w, https:\/\/difusao.tech\/blog\/wp-content\/uploads\/2023\/09\/vsgitbash-768x324.gif 768w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>No terminal vamos verificar se o node e o npm foram instalados corretamente com os comandos <mark style=\"background-color:#abb8c3\" class=\"has-inline-color\">node -v<\/mark> e depois <mark style=\"background-color:#abb8c3\" class=\"has-inline-color\">npm -v<\/mark>.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"361\" height=\"238\" src=\"https:\/\/difusao.tech\/blog\/wp-content\/uploads\/2023\/09\/image-1.png\" alt=\"\" class=\"wp-image-127\" srcset=\"https:\/\/difusao.tech\/blog\/wp-content\/uploads\/2023\/09\/image-1.png 361w, https:\/\/difusao.tech\/blog\/wp-content\/uploads\/2023\/09\/image-1-300x198.png 300w\" sizes=\"auto, (max-width: 361px) 100vw, 361px\" \/><\/figure>\n\n\n\n<p>Vamos instalar o angular com o comando <mark style=\"background-color:#abb8c3\" class=\"has-inline-color\">npm i g @angular\/cli<\/mark><\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"536\" height=\"236\" src=\"https:\/\/difusao.tech\/blog\/wp-content\/uploads\/2023\/09\/image-2.png\" alt=\"\" class=\"wp-image-128\" srcset=\"https:\/\/difusao.tech\/blog\/wp-content\/uploads\/2023\/09\/image-2.png 536w, https:\/\/difusao.tech\/blog\/wp-content\/uploads\/2023\/09\/image-2-300x132.png 300w\" sizes=\"auto, (max-width: 536px) 100vw, 536px\" \/><\/figure>\n\n\n\n<p>Feche o VS Code e abra novamente e vamos checar se a instala\u00e7\u00e3o foi feita com sucesso com o comando <mark style=\"background-color:#abb8c3\" class=\"has-inline-color\">ng version<\/mark><\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"579\" height=\"255\" src=\"https:\/\/difusao.tech\/blog\/wp-content\/uploads\/2023\/09\/image-3.png\" alt=\"\" class=\"wp-image-129\" srcset=\"https:\/\/difusao.tech\/blog\/wp-content\/uploads\/2023\/09\/image-3.png 579w, https:\/\/difusao.tech\/blog\/wp-content\/uploads\/2023\/09\/image-3-300x132.png 300w\" sizes=\"auto, (max-width: 579px) 100vw, 579px\" \/><\/figure>\n\n\n\n<p>Agora vamos criar o nosso projeto com o comando <mark style=\"background-color:#abb8c3\" class=\"has-inline-color\">ng new projetoUm<\/mark><br>Onde projetoUm \u00e9 o nome do nosso projeto, mude de acordo com o nome do seu projeto.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"501\" height=\"230\" src=\"https:\/\/difusao.tech\/blog\/wp-content\/uploads\/2023\/09\/image-4.png\" alt=\"\" class=\"wp-image-130\" srcset=\"https:\/\/difusao.tech\/blog\/wp-content\/uploads\/2023\/09\/image-4.png 501w, https:\/\/difusao.tech\/blog\/wp-content\/uploads\/2023\/09\/image-4-300x138.png 300w\" sizes=\"auto, (max-width: 501px) 100vw, 501px\" \/><\/figure>\n\n\n\n<p>Foram feitas duas perguntas uma sobre rotas e outra sobre estiliza\u00e7\u00e3o.<br>Caso o seu projeto tenha mais de uma p\u00e1gina, escolha sim na op\u00e7\u00e3o de rodas, ela ser\u00e1 utilizada mais para frente.<br>A estiliza\u00e7\u00e3o escolha de acordo, no nosso caso vamos usar o CSS.<\/p>\n\n\n\n<p>Foi criado uma pasta com o nome do nosso projeto, use o comando <mark style=\"background-color:#abb8c3\" class=\"has-inline-color\">cd projetoUm<\/mark> para entrar na pasta e depois <mark style=\"background-color:#abb8c3\" class=\"has-inline-color\">ng serv<\/mark>e para inicializar o nosso projeto.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"953\" height=\"597\" src=\"https:\/\/difusao.tech\/blog\/wp-content\/uploads\/2023\/09\/image-5.png\" alt=\"\" class=\"wp-image-131\" srcset=\"https:\/\/difusao.tech\/blog\/wp-content\/uploads\/2023\/09\/image-5.png 953w, https:\/\/difusao.tech\/blog\/wp-content\/uploads\/2023\/09\/image-5-300x188.png 300w, https:\/\/difusao.tech\/blog\/wp-content\/uploads\/2023\/09\/image-5-768x481.png 768w\" sizes=\"auto, (max-width: 953px) 100vw, 953px\" \/><\/figure>\n\n\n\n<p>Nosso projeto esta rodando, agora acesse pelo navegador localhost:4200.<br>Ele esta rodando no localhost, nosso computador, na porta padr\u00e3o que \u00e9 a 4200.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"578\" src=\"https:\/\/difusao.tech\/blog\/wp-content\/uploads\/2023\/09\/image-6-1024x578.png\" alt=\"\" class=\"wp-image-132\" srcset=\"https:\/\/difusao.tech\/blog\/wp-content\/uploads\/2023\/09\/image-6-1024x578.png 1024w, https:\/\/difusao.tech\/blog\/wp-content\/uploads\/2023\/09\/image-6-300x169.png 300w, https:\/\/difusao.tech\/blog\/wp-content\/uploads\/2023\/09\/image-6-768x433.png 768w, https:\/\/difusao.tech\/blog\/wp-content\/uploads\/2023\/09\/image-6.png 1223w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>Estamos visualizando a nossa p\u00e1gina de &#8220;Hello World&#8221;, para come\u00e7ar a alterar este template padr\u00e3o e come\u00e7ar a colocar o projeto do seu jeito, edite o arquivo <mark style=\"background-color:#abb8c3\" class=\"has-inline-color\">app.component.html<\/mark> e o seu arquivo de estilo o <mark style=\"background-color:#abb8c3\" class=\"has-inline-color\">app.component.css<\/mark> na pasta <mark style=\"background-color:#abb8c3\" class=\"has-inline-color\">src\/app<\/mark>.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"594\" src=\"https:\/\/difusao.tech\/blog\/wp-content\/uploads\/2023\/09\/image-7-1024x594.png\" alt=\"\" class=\"wp-image-133\" srcset=\"https:\/\/difusao.tech\/blog\/wp-content\/uploads\/2023\/09\/image-7-1024x594.png 1024w, https:\/\/difusao.tech\/blog\/wp-content\/uploads\/2023\/09\/image-7-300x174.png 300w, https:\/\/difusao.tech\/blog\/wp-content\/uploads\/2023\/09\/image-7-768x445.png 768w, https:\/\/difusao.tech\/blog\/wp-content\/uploads\/2023\/09\/image-7.png 1152w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>obs.: N\u00e3o edite o arquivo index.html, nele contem um seletor que ser\u00e1 utilizado para rendenrizar nossa aplica\u00e7\u00e3o.<\/p>\n\n\n\n<p>Se voc\u00ea chegou at\u00e9 aqui, parab\u00e9ns, vc criou sua primeira aplica\u00e7\u00e3o web utilizando o framework Angular.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Neste artigo vamos ver o passo a passo para ter o nosso primeiro projeto em Angular. &#8220;Angular \u00e9<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[19,176,30],"tags":[177,179,178],"class_list":["post-124","post","type-post","status-publish","format-standard","hentry","category-angular","category-frontend","category-programacao-e-desenvolvimento","tag-angular","tag-desenvolvimento","tag-frontend"],"_links":{"self":[{"href":"https:\/\/difusao.tech\/blog\/wp-json\/wp\/v2\/posts\/124","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/difusao.tech\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/difusao.tech\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/difusao.tech\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/difusao.tech\/blog\/wp-json\/wp\/v2\/comments?post=124"}],"version-history":[{"count":2,"href":"https:\/\/difusao.tech\/blog\/wp-json\/wp\/v2\/posts\/124\/revisions"}],"predecessor-version":[{"id":139,"href":"https:\/\/difusao.tech\/blog\/wp-json\/wp\/v2\/posts\/124\/revisions\/139"}],"wp:attachment":[{"href":"https:\/\/difusao.tech\/blog\/wp-json\/wp\/v2\/media?parent=124"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/difusao.tech\/blog\/wp-json\/wp\/v2\/categories?post=124"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/difusao.tech\/blog\/wp-json\/wp\/v2\/tags?post=124"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}