Criando minha primeira app com Angular 5

Javascript

Continuando a série de posts sobre frameworks e/ou bibliotecas (lib) para front-end, no post anterior Criando minha primeira app com React expliquei como criar sua primeira app com React e fezer um Hello World.

Nesse post irei explicar como fazer o mesmo processo, ou seja, criar sua primeira app e fazer um Hello World, porém, utilizando o Angular.

Conhecendo o Angular

O Angular é um framework para construção de app tanto para web quanto para mobile, com ele focamos apenas na construção e desenvolvimento de nossos projetos, trazendo uma enorme facilidade e produtividade.

Dando os primeiros passos

Para podermos começar a trabalhar com o Angular a forma mais fácil é através do seu cli (client), com ele conseguímos criar app's, subir servidores, criar componentes, entre outros recursos...

Podemos realizar a instalação do Angular Cli de duas maneiras, sendo elas: com yarn ou npm:

Instalando com Yarn

Podemos realizar a instalação através do Yarn gerenciador de pacotes criado pelo Facebook.

yarn global add @angular/cli

Instalando com Npm

Ou podemos instalá-lo pelo Npm, gerenciador de pacotes do NodeJS.

npm install -g @angular/cli

ou

npm i -g @angular/cli

Para verificar se tudo deu certo, podemos digitar ng em nosso console e verificar se a saída do comando foi um help com uma lista de possibilidades que podemos executar com o mesmo.

Obs: Como pode ter notado, é através do ng que iremos utilizar os comandos do Angular Cli

Criando nossa primeira app

Podemos criar nosso primeiro projeto (app) de duas maneiras: criando uma nova pasta com o nome do projeto ou utilizando uma pasta já existente.

Criando uma nova pasta

Para criar o projeto (app) e uma nova pasta com o seu nome podemos utilizar o comando new passando como parâmetro (argumento) o nome do projeto:

ng new minha-primeira-app

Aguarde todo o processo de download e configuração finalizar, após a finalização do comando, uma pasta com o nome minha-primeira-app deve ter sido criada a partir da pasta onde o comando foi rodado.

Criando em uma pasta já existente

Para criar o projeto (app) em uma pasta já existente podemos utilizar o mesmo comando, ou seja, new, porém, ao invés de passarmos um nome como argumento, precisamos passar uma opção -dir informando um ..

ng new minha-primeira-app -dir .

Veja que passamos a opção dir, que serve para informarmos o nome da pasta onde o projeto deverá ser criado, no caso, passamos o . que é referente a pasta atual.

Obs: Certifique-se de estar dentro da pasta (pelo terminal, cmd ou qualquer outro jeito que esteja utiizando para rodar o comando) onde o projeto deverá ser criado.

Com o projeto (app) criado e configurado, podemos agorar subir um servidor para começarmos a trabalhar no desenvolvimento de nosso Hello Wolrd, mas, como podemos fazer isso? Isso que veremos no próximo tópico.

Subindo a app

Para subir um servidor e rodar nossa app precisamos primeiro navegador (cd minha-primeira-app) até pasta que acabamos de criar, ou seja, a pasta do nosso projeto e utilizar o comando ng serve para subir o servidor.

cd minha-primeira-app
ng serve

Veja que ao término do comando temos a seguinte mensagem: webpack: Compiled successfully.

Isso significa que o Webpack compilou nossa aplicação com sucesso, mas, como podemos acessá-la? Se você foi esperto e reparou que no começo da execução do comando foi mostrada a seguinte mensagem:

NG Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/

Traduzindo para o portugues, algo relacionado com: Servidor rodando em localhost na porta 4200, sendo assim, podemos acessar o seguinte endereço em nosso navegador: http://localhost:4200/

Gif acessando app em Angular

Como pode ver, o Angular por padrão (default) deixa uma página principal para nós.

Hello World com Angular

Agora que tudo está pronto, ou seja, já baixamos o Cli do Angular e criamos nosso projeto (app), vamos finalmente executar nosso Hello World).

Para trocaros o layout padrão (default) do Angular vamos precisar mexer no seguinte arquivo: src/app/app.component.html (nesse primeiro momento, ignore os outros arquivos e pastas), vamos alterar o seu conteúdo para:

<h1>Hello World</h1>

Voltando ao navegador onde havíamos aberto a aplicação, devemos ter o seguinte resultado:

Hello World com Angular

Obs: Não foi necessário recarregar a página, pois, o Angular por padrão já vem com um Live Reloading configurado.

E maravilha, tudo funcionando como o esperado, nosso Hello World está feito.

Gif comemorando fim do post

Em meu canal gravei um vídeo explicando o mesmo exemplo, porém, utilizando a versão 6 do Angular:

E aí gostou? Não deixe de comentar e se inscrever na newsletter para receber novos conteúdos por email.

Matheus Castiglioni

Matheus Castiglioni

Apaixonado pelo mundo dos códigos e um eterno estudante, gosto de aprender e saber um pouco de tudo, aquela curiosidade de saber como tudo funciona, tento compartilhar o máximo de conhecimentos adquiridos e ajudar todos aqueles que sou capaz.

Post's Relacionados

Visualize outros post's relacionados ao mesmo assunto:

Trabalhando com eventos no JavaScript

Javascript
Continuando a série de posts sobre frameworks e/ou bibliotecas (lib) para front-end, no post anterior Criando minha primeira app com React expliquei como criar sua primeira app com React e fezer um Hello World. Nesse post irei explicar como fazer o mesmo...
Continuar lendo

Referenciando componentes no React

Javascript
Continuando a série de posts sobre frameworks e/ou bibliotecas (lib) para front-end, no post anterior Criando minha primeira app com React expliquei como criar sua primeira app com React e fezer um Hello World. Nesse post irei explicar como fazer o mesmo...
Continuar lendo

Atualizando estado dos componentes no React

Javascript
Continuando a série de posts sobre frameworks e/ou bibliotecas (lib) para front-end, no post anterior Criando minha primeira app com React expliquei como criar sua primeira app com React e fezer um Hello World. Nesse post irei explicar como fazer o mesmo...
Continuar lendo

Mantendo estados de componentes no React com state

Javascript
Continuando a série de posts sobre frameworks e/ou bibliotecas (lib) para front-end, no post anterior Criando minha primeira app com React expliquei como criar sua primeira app com React e fezer um Hello World. Nesse post irei explicar como fazer o mesmo...
Continuar lendo

String em JavaScript com aspas simples ou duplas?

Javascript
Continuando a série de posts sobre frameworks e/ou bibliotecas (lib) para front-end, no post anterior Criando minha primeira app com React expliquei como criar sua primeira app com React e fezer um Hello World. Nesse post irei explicar como fazer o mesmo...
Continuar lendo