Blog Tecnológico

Criando nosso primeiro projeto em Angular

Renato Probst • 20 jun 2018

 

1.1 Instalando o Angular 4

 

Guia digital: https://angular.io/guide/quickstart

 

1.2 Criando o primeiro projeto

 

Abra o terminal de comando do Windows ou Mac na pasta onde deseja criar o projeto e utilize o comando:

 

ng new estrutura

 

Isto criará um novo projeto Angular dentro de uma pasta chamada estrutura

 

1.3 Servindo a aplicação

 

As aplicações Angular já vem com um servidor Node Js integrado, através dele é possível rodar o projeto utilizando os comandos:

 

cd estrutura 

Para entrar dentro da pasta do projeto e:

ng serve –open 

 

Para iniciar o servidor Node JS.

 

Angular-1

 

Isto iniciará o servidor da aplicação Angular. É interessante notar que o próprio servidor node JS busca as atualizações nos arquivos do projeto e atualiza a página no navegador sem que você tenha que utilizar o F5.

 

1.4 Two way Binding e editando seu primeiro componente

 

O CLI (comandos utilizados no terminal) criou o seu primeiro componente para você. Este é o componente root (de entrada) da sua aplicação, ele se chama app-root. Você pode encontra-lo em ./src/app/app.component.ts

 

./src/app/app.component.ts

export class AppComponent {
  

    title = 'app';

 

}  

 

 

Se abrirmos o arquivo ./src/app/app.component.html veremos que a variável title está sendo impressa através da notação {{ title }}:

 

./src/app/app.component.html

 

<div style="text-align:center">
  <h1>
    Welcome to {{ title }}!
  </h1>
  <img width="300" alt="Angular Logo" src="data: ">
</div>

 

Se  alterarmos a variável title no arquivo app.component.ts o navegador será atualizado automaticamente, e veremos o novo valor no lugar do antigo:

 

./src/app/app.component.ts

 

export class AppComponent {
  

    title = 'Meu primeiro aplicativo';
  

}  

 

 

angular1-1

 

Portanto,  sempre que quisermos criar uma variável e exibi-la no layout html, devemos criá-la como propriedade da classe componente no arquivo nomeDoComponente.ts,  e então imprimi-la no arquivo nomeDoComponente.html utilizando a notação {{NomeDaVariavel}}. 

 

Esta funcionalidade que permite o compartilhamento de dados entre arquivos Typescript e arquivos html é chamada de two way binding. 

Com o Two way, também, podemos alterar a variável title em tempo real:

 

1.5 Trabalhando com funções

 

Vamos criar uma função chamada changeTitle() no arquivo 

 

./src/app/app.component.ts:

 

export  class  AppComponent  {
      

    title  =  'Meu primeiro aplicativo';

      

    changeTitle()  {
          

        this.title  =  'Alterando o nome em tempo real';
      

    }
  

}  

 

Para acionarmos esta função via html, mudaremos o código do ./src/app/app.component.html para:

 

./src/app/app.component.html

 

<div style="text-align:center">
  <h1>
    Welcome to {{ title }}!
  </h1>
  <button (click)="changeTitle()">Alterar título</button>
</div>

 

Ao clicar no botão “Alterar título”, veremos a seguinte alteração no navegador:

 

angular-3

 

1.6 Exibindo objetos complexos

 

No exemplo acima, exibimos uma variável simples, do tipo String, chamada Title. Mas, e se quisermos exibir uma variável mais complexa, com propriedades compostas, como um usuário ou uma venda?

 

./src/app/app.component.ts:

 

export   class   AppComponent   {
            

    title   =   'Meu primeiro aplicativo';
            

    user   =     {
                    

        name:     "Renato",

                            
surName:     "Probst"            

    }

            

    changeTitle()   {
                    

        this.title   =   'Alterando o nome em tempo real';
            

    }
    

}    

 

./src/app/app.component.html

 

<div style="text-align:center">
  <h1>
    Welcome {{user.name}} {{user.surName}}!
  </h1>
  <button (click)="changeTitle()">Alterar título</button>
</div>

 

Resultado:

 

angular-3

 

 

1.7 Trabalhando com CSS

 

Sempre que criarmos um componente serão criados 4 arquivos:

nomeDoComponente.component.ts

nomeDoComponente.component.spec.ts

nomeDoComponente.component.html

nomeDoComponente.component.css

 

Já falamos dos arquivos .ts e .html. O arquivo .spec.ts é utilizado para testes unitários e não abordaremos agora. Temos também o arquivo .css, que é o arquivo de folha de estilos do componente, cada componente que criamos tem um arquivo css próprio, o que permite que o css de um componente não entre em conflito com o css de outro componente (mesmo que eles possuam as mesmas classes) e garante também que o código fique mais modular, pois ao invez de criarmos um único arquivo .css para todo o sistema, separamos o css por tela (cara componente pode ser considerado uma tela).

 

Vamos abrir o arquivo app.component.css e atualizar o css do nosso app.component.html.

 

app.component.css

 

h1 {
 
font-size: 2.5rem;
 
color: gold;
}

 

Então nosso navegador será atualizado com a seguinte tela:

 

angular-4

 

1.8 Utilizando Sass

 

 O Angular permite que trabalhemos com arquivos css ou sass. A vantagem do sass é que ele permite a utilização de funções e variáveis dentro do código css, além de oferecer funcionalidades de importação de arquivos css dentro de outros e uma estrutura composta de classes.

 

Para criar um projeto com suporte a sass devemos utilizar a flag --style=scss ao criar o projeto com o comando ng new:

ng new estrutura --style=scss

 

Se abrirmos a pasta estrutura/src/app veremos que foi gerado um arquivo app.component.scss.

 

 

2 Conclusão

 

Como vimos o Angular permite a rápida prototipação de telas através da tecnologia Two Way Binding que permite o compartilhamento de códigos Typescrip/Javascript com código HTML e vice versa.

Concluímos assim a criação do nosso primeiro projeto em Angular 6. 

Renato Probst

Renato Policeno Probst – Formado em Sistemas para Internet, com especialização em Aplicativos Móveis e Computação em Nuvem. Experiência com diversas linguagens de programação voltadas para desenvolvimento mobile (Android, Swift, Cordova, Ionic, SQLite) e desenvolvimento web (PHP, HTML5, CSS, Javascript, mySQL, RESTful).

Possui em seu portfólio mais de 12 aplicativos publicados, entre eles aplicativos para venda e classificado de veículos, CRMs, aplicativos para streaming de áudio, jogos, POS, guia de serviços, entre outros.

Também possui em seu portfólio sites e apis em tecnologia RESTful. Atua atualmente como instrutor na ENG, onde ministra cursos de desenvolvimento mobile, já tendo ministrado cursos para empresas como Grupo RPC, Prodesp, Banco do Brasil, SENAI e TRE, além de dezeas de alunos nos laboratórios da ENG SP, PR e DF.

CONTATO