Blog Tecnológico

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.

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';
  

• }  

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ítulobutton>
div>

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

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ítulobutton>
div>

Resultado:

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:

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.

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.