Atualizando o exemplo de AngularJS – parte 2

exemploAngular-2_abertura

Prosseguindo com a atualização do exemplo do AngularJS — versão 1.6.1 — para o Angular — na versão 7.2.x no momento em que escrevo. A parte anterior cuidou da instalação da ferramenta e dependências através do npm e também criar uma nova aplicação.

Nesta parte a conversão propriamente dita do exemplo trazendo HTML, CSS e também o JavaScript (sendo devidamente para TypeScript no caminho).

Iniciando o servidor HTTP

Antes de começar, faça…

$ cd ~/projetos/node
$ export PATH="$( npm bin ):$PATH"
$ cd exemploAngular
$ ng serve --open
** Angular Live Development Server is listening on localhost:4200, op
en your browser on http://localhost:4200/ **
...

Para iniciar o servidor HTTP do Angular.

Customizando a página principal

exemploAngular-2_css

Como é um projeto de conversão de alguma coisa que já existe e não a criação de algo novo, posso “dar ao luxo” de começar pelo CSS.

Então, a primeira coisa a fazer é justamente editar o arquivo “./src/index.html” e acrescentar no começo dele as linhas para a carga do Bootstrap e também da fonte customizada¹.

...
  ❮link rel="icon" type="image/x-icon" href="favicon.ico"❯
  ❮link rel='stylesheet' type='text/css'
    href="http://fonts.googleapis.com/css?family=Titillium Web"❯
  ❮link rel="stylesheet"
    href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
    crossorigin="anonymous"❯
❮/head❯
...

E no final dele as linhas para o carregamento dos componentes em JavaScript necessárias para que o Bootstrap funcione corretamente.

...
  ❮script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
  crossorigin="anonymous"❯❮/script❯
  ❮script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
  crossorigin="anonymous"❯❮/script❯
  ❮script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
  crossorigin="anonymous"❯❮/script❯
❮/body❯
❮/html❯

Ainda uma pequena inclusão dentro do arquivo “./src/style.css”.

body {
  font-family:'Titillium Web',Sans;
}

As outras definições ficarão no CSS da aplicação mas neste ponto é possível ver que a página de exemplo já reflete as mudanças feitas no CSS.

(¹) Para evitar que o WordPress interprete as tags HTML, substituí os símbolos de maior e de menor que por caracteres parecidos… 🙂

Alterando a página da aplicação

exemploAngular-2_app

A página principal da aplicação está em “./src/app/app.component.html” e receberá tanto o cabeçalho como o rodapé do exemplo original escrito em AngularJS.

Assim, o conteúdo original do arquivo é removido e substituído por este aqui…

❮div class="container"❯
  ❮h4❯Um exemplo simples em Angular❮/h4❯
  ❮div class="jumbotron text-center jumbotron-title"❯
    ❮h1❯Sem as mãos!❮/h1❯
    ❮p❯Baseado n'Outro exemplo simples com AngularJS❮/p❯
  ❮/div❯
  ❮hr/❯
  ❮div class="container"❯
    ❮p❯©2019, Giovanni Nunes❮/p❯
    ❮p❯Para maiores informações ou contato, acesse meu blog em
      ❮a href="https://giovannireisnunes.wordpress.com"
      target="_BLANK"❯giovannireisnunes.wordpress.com❮/a❯❮/p❯
  ❮/div❯
❮/div❯

Outra alteração ficará no arquivo “./src/app/app.component.css”, recebendo os estilos usados no cabeçalho da página.

.jumbotron-title {
  background-image:url('...');
  background-position:center;
  background-repeat: no-repeat;
  background-size: cover;
  color: #fff;
  font-weight: bold;
  text-shadow: 0 0 10px #000;
}

.jumbotron-title p {
  font-size:125%
}

Aliás, aproveitei para simplificar um pouco o CSS desta vez e a URL da imagem foi removida para evitar que o WordPress a inserisse aqui… 🙂

Adicionando um componente

Optei por criar um componente na aplicação, o “Grade”, para acomodar a tabela contendo as notas. Isto nãoseriaé obrigatório mas torna o projeto mais flexível pois tanto o componente pode ser reaproveitado em outra aplicação como também a aplicação pode receber novas funcionalidades sem muitas alterações em seus arquivos.

Assim…

$ ng generate component Grade
CREATE src/app/grade/grade.component.css (0 bytes)
CREATE src/app/grade/grade.component.html (24 bytes)
CREATE src/app/grade/grade.component.spec.ts (621 bytes)
CREATE src/app/grade/grade.component.ts (265 bytes)
UPDATE src/app/app.module.ts (392 bytes)

Os arquivos do novo componente são criados e anexados automaticamente à aplicação (o “UPDATE” na última linha se encarrega desta parte).

Finalmente algum trecho de código, dentro do arquivo “./src/app/grade/grade.component.ts”…

...
export class GradeComponent implements OnInit {

  tempoAgora = Date.now()
  bimestres = [1, 2, 3, 4]
  alunos = [
    {nome:"Adão Nogueira", notas:[9.89, 8.75, 6.34, 8.05]},
    {nome:"Bruno Tavares", notas:[6.32, 8.25, 7.67, 7.97]},
    {nome:"João da Silva", notas:[5.1, 5.22, 7.33, 8]},
    {nome: "José Queiroz", notas:[9.31, 7.9, 8, 8.832]}
  ]

  constructor() {}
  ngOnInit() {}

  getAverage(gradeList) {
    let items=gradeList.length
    let sum=0
    for (let i=0; i<items; i++){
      sum += gradeList[i]
    }
      return sum/items
  }
}

A função que calcula a média aritmética é literalmente a mesma, apenas recebeu uma pequena atualização nos nomes das variáveis e na declaração destas.

O objeto “alunos” foi colocado temporariamente para testar o resto da conversão, só lembrando que no exemplo original os dados eram carregados por AJAX de um arquivo JSON externo.

O modelo HTML da tabela, em “./src/app/grade/grade.component.html”, é virtualmente idêntico sendo ao trecho da versão em AngularJS e as diferenças estão na substituição do comando ng-repeat pelo ngFor e a sintaxe do filtro para números que mudou de “number:2” para “number:’1.2-2′”, então não irei colocá-lo aqui.

E salvando todos arquivos será possível ver a aplicação em funcionamento!

Fim, por enquanto…

Para facilitar, os arquivos desta aplicação foram colocadas em seu próprio repositório git no GitHub. Para a última parte, a conclusão com o carregamento dos dados sendo feito de forma externa, via AJAX, tal qual como no exemplo anterior.

Até!

Anúncios

2 comentários sobre “Atualizando o exemplo de AngularJS – parte 2

  1. Pingback: Atualizando o exemplo de AngularJS – parte 3 | giovannireisnunes

  2. Pingback: Um outro exemplo de AngularJS | giovannireisnunes

Os comentários estão desativados.