Atualizando o exemplo de AngularJS – parte 1

exemploAngular-1_abertura

Há quase quatro anos publiquei aqui dois exemplos bem simples em AngularJS (na época, a versão 1.4.x) que produziam páginas web de conteúdo dinâmico que cujo conteúdo HTML eram atualizados/modificados diretamente utilizando JavaScript. Algum tempo depois, em setembro de 2016, o AngularJS foi totalmente reescrito originando o Angular (começando na versão 2.x).

A ideia aqui é atualizar o segundo exemplo de AngularJS para o Angular, mantendo sua funcionalidade — só relembrando que o programa recebe um arquivo JSON externo, realiza algumas operações e formata as informações em uma tabela — e apontando as mudanças no código.

E para não ficar extenso, nesta primeira parte, está a instalação e criação de uma nova aplicação em Angular.

O que mudou entre AngularJS e Angular?

Sendo bem sucinto: enquanto o AngularJS funcionava como uma ferramenta auxiliar para a criação páginas web dinâmicas em JavaScript, o Angular é um framework completo para o desenvolvimento de aplicações web utilizando TypeScript.

Instalando o Angular

Com o node.js e o npm já instalados no computador, crie um diretório para armazenar a aplicação.

$ mkdir ~/projetos/node

Como a versão do npm pode estar defasada, é bom aproveitar para atualizá-la localmente…

$ npm --local install npm
npm WARN saveError ENOENT: no such file or directory, open '/../packa
ge.json'
npm notice created a lockfile as package-lock.json. You should commit
 this file.
npm WARN enoent ENOENT: no such file or directory, open '/../package.
json'
npm WARN node No description
npm WARN node No repository field.
npm WARN node No README data
npm WARN node No license field.

Isto criará o diretório “node_modules” contendo os módulos instalados localmente e para queles eles fiquem acessíveis é necessário adcioná-lo ao PATH do sistema:

export PATH="$( npm bin ):$PATH"

Agora é possível instalar o Angular…

$ npm --local install @angular/cli
(...)
+ @angular/cli@7.3.5
added 295 packages from 180 contributors and audited 29510 packages i
n 14.522s
found 0 vulnerabilities

Daí é esperar o download e a instalação dos pacotes finalizar.

Criando uma aplicação

Diferente do exemplo anterior em que bastava carregar as rotinas dentro do arquivo HTML, aqui necessitaremos criar toda a estrutura da aplicação (ou projeto se preferir).

$ ng new exemploAngular
? Would you like to add Angular routing? (y/N) No

Como não há necessidade, não usarei o sistema de rotas e…

... 
? Which stylesheet format would you like to use? (Use arrow keys)
❯ CSS (.css ) 
Sass (.scss) [ http://sass-lang.com ] 
Less (.less) [ http://lesscss.org ] 
Stylus (.styl) [ http://stylus-lang.com ]

…para não complicar, ficarei com o CSS padrão mesmo.

? Would you like to add Angular routing? No
? Which stylesheet format would you like to use? CSS (.css )
CREATE exemploAngular/README.md (1031 bytes)
CREATE exemploAngular/.editorconfig (246 bytes)
CREATE exemploAngular/.gitignore (629 bytes)
CREATE exemploAngular/angular.json (3879 bytes)
(...)
added 1070 packages from 1028 contributors and audited 42607 package
s in 24.815s
found 0 vulnerabilities

    Successfully initialized git

A aplicação é criada e o repositório git devidamente inicializado.

$ git status
No ramo master
nothing to commit, working tree clean

Então, hora de se certificar de que tudo está funcionando corretamente…

$ cd exemploAngular
$ ng serve --open
** Angular Live Development Server is listening on localhost:4200, op
en your browser on http://localhost:4200/ **
(...)                                                                     
i 「wdm」: Compiled successfully.

Diferente do AngularJS, o Angular tem também seu próprio servidor HTTP para desenvolvimento. Ele compilará o projeto e após alguns segundos a janela do navegador web aparecerá exibindo a página de exemplo.

Fim, por enquanto…

E por enquanto é isto, na próxima parte será a vez de importar os demais componentes da página web e também trazer o resto do código.

Até!

Anúncios

Um comentário sobre “Atualizando o exemplo de AngularJS – parte 1

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

Os comentários estão desativados.