Aprendendo Angular com a CLI

Aprendendo Angular
com a CLI
Vanessa Me Tonini
09.06.18

@vanessametonini 
Instrutora @ Caelum
Frontend Dev
Agile Coach
Voluntária @ Marialab

Afinal não é a toa que todo dia nasce um novo framework JS - se
este dia ainda não chegou para você... aguarde…
pra cego ver: meme, foto de uma cerveja em uma mesa
e ao fundo um bebê flagrado num momento em que parecia
bêbado entregando um copo de cerveja
eu to indo aprender um novo framework javascript
segura minha cerveja

Eu digo que é um momento peculiar porque creio que para a maioria das
pessoas, isso vem na hora de criar um novo projeto e decidir quais
tecnologias utilizar, ou até mesmo na hora de substituir o jquery do atual
projeto para algo um pouco melhor.
pra cego ver: imagem do Patrick (um personagem do desenho
animado Bob Esponja, que é bem atrapalhado) em frente a uma
mesa e um serrote na mesa, segurando um martelo, e com uma
cara de que tem algo errado, está uma tábua pregada em
sua testa.

E esse momento surgiu de uma maneira um pouco peculiar, porém
não por acaso. Como vocês já sabem eu sou instrutora de frontend na
Caelum e chegou o pedido até a mim para atualizar a apostila do
curso de AngularJS para o Angular2 (na época). 
pra cego ver: imagem da página do curso de Angular
no site da Caelum
caelum.com.br

Foi aí que eu comecei a estudar pela Alura - que é o portal
de cursos online de tecnologia do Grupo Caelum - o curso
de Angular. Isso foi em meados de fevereiro do ano
passado.
pra cego ver: imagem da página principal do site da Alura
alura.com.br

Package.json, index.html, systemjs.config.js, tsconfig.json, typings.json
Confesso que foi um choque e tanto entrar nesse mundo dos frameworks
JS para Single Page Applications (SPAa) - aplicações de página única.
Afinal muitos arquivos para baixar e fazer o projeto funcionar, junto com o
paradigma de web components …
pra cego ver: imagens de cinco arquivos acima.

entender como todos eles se conectavam de alguma forma 
 
pra cego ver:
Imagem no estilo quadrinho
de um personagem que precisa
ultrapassar um cenário muito difícil
(subir em uma escada velha, espelhos
no chão, subir uma corda rompendo,
e no fim enfrentar um mostro)
eu aprendendo um novo framework
você consegue fazer isto
você já fez isto antes

Chegou março e a feliz notícia aconteceu de que foi lançada
oficialmente uma nova ferramenta para ajudar quem
desenvolvia projetos Angular e também para ajudar novos
projetos e para a manutenção destes projetos. 
 
pra cego ver: imagem da página principal da ferramenta
Angular CLI. Seguido do meme da Chloe e sua famosa
expressão de desconfiança. cli.angular.io

Requisitos
node -v
npm -v
pra cego ver: imagem do terminal do computador executando os comandos node -v, e depois npm -v

Instalação
npm install -g @angular/cli

A CLI do Angular, é uma ferramenta de linha de comando - command line interface,
que tem o propósito de fazer exatamente o que eu disse, além de que é muito fácil
instalar, entender como funcionar e usar. 
pra cego ver: imagem do terminal executando o comando de instalação da Angular
CLI

ng
o comando do angular
ou melhor… da CLI

Após a instalação, você pode testar no
terminal se realmente foi instalado,
digitando o comando ng -v. Após digitar
isso e apertar enter, vai retornar a
apresentação da Angular CLI, e exibir a
versão dela. entre outros detalhes.
pra cego ver: imagem do terminal após
digitar ng -v
ng -v

ng new braziljs
Este comando irá criar uma pasta chamada braziljs e nela será criado
todos arquivos e estrutura do projeto, que já funciona.

Agora que você já tem o projeto criado, você precisa abrir ele para poder trabalhar.
Para isso recomendo você utilizar o editor de texto Visual Studio Code, que tem
uma boa integração com projetos Angular, ajudando na produtividade.
pra cego ver: imagem do site oficial do Visual Studio Code.
code.visualstudio.com

pra cego ver: imagem da árvore de
arquivos no Visual Studio Code.
Pasta braziljs, dentro dela:
pastas:
E2E,
node_modules,
SRC.
Arquivos:
.editorconfig
.gitignore
angular.json
package-lock.json
package.json
readme.json
tsconfig.json
tslint.json
Os arquivos que eu considero mais
importante par aprendermos são:
package.json e angular.json e vamos dar
uma olhada neles a seguir.
Estrutura básica
projeto Angular

vamos analisar este arquivo, a primeira
parte que podemos nos atentar é a de
scripts. com a estrutura: 
 
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e"
},
package.json (48 linhas)

Logo as dependências do projeto. Estas o código
vai para o pacote de produção.
"dependencies": {
"@angular/animations":
"^6.0.3",
"@angular/common": "^6.0.3",
"@angular/compiler":
"^6.0.3",
"@angular/core": "^6.0.3",
"@angular/forms": "^6.0.3",
"@angular/http": "^6.0.3",
"@angular/platform-browser":
"^6.0.3",
"@angular/platform-browser-
dynamic": "^6.0.3",
"@angular/router": "^6.0.3",
"core-js": "^2.5.4",
dependências no package.json

"devDependencies": {
"@angular/compiler-cli": "^6.0.3",
"@angular-devkit/build-angular": "~0.6.8",
"typescript": "~2.7.2",
"@angular/cli": "~6.0.8",
"@angular/language-service": "^6.0.3",
"@types/jasmine": "~2.8.6",
"@types/jasminewd2": "~2.0.3",
"@types/node": "~8.9.4",
"codelyzer": "~4.2.1",
"jasmine-core": "~2.99.1",
"jasmine-spec-reporter": "~4.2.1",
"karma": "~1.7.1",
"karma-chrome-launcher": "~2.2.0",
"karma-coverage-istanbul-reporter": "~2.0.0",
"karma-jasmine": "~1.1.1",
dependências de
desenvolvimento
no package.json
dependências com
^ ˜&

Agora vamos analisar a estrutura do angular.json
Estrutura básica
projeto Angular

Este arquivo segue o conceito de workspaces
angular.json (127 linhas)
Cada workspace tem projetos,
cada projeto tem targets,
e cada target tem configurações
CLI Workspaces

A estrutura básica do angular.json é composta de
5 propriedades: $schema, version, newProjectRoot,
projects e defaultProject.
A propriedade projects recebe outro objeto,
composto de propriedades com o nome dos projetos
, que recebem um outro objeto com configurações
destes projetos.
Vamos dar uma olhada nas configurações do
projeto que geramos, braziljs.
angular.json (127 linhas)

Um projeto pode ser iniciado
com as seguintes propriedades
de configurações: root,
sourceRoot, projectType, prefix,
schematics, architect.
 
Na propriedade sourceRoot, é
citada o diretório do código fonte
desta aplicação.

Estrutura básica
projeto Angular

A propriedade prefix, serve para
definir o prefixo dos seletores
dos componentes criados no
projeto, por padrão vem
preenchida com o valor “app”, e
pode ser modificado com um
prefixo que faça sentido para sua
aplicação. Isto é bem importante
para não confundir seus
componentes com de outras
bibliotecas de componentes que
você poderá adicionar em seu
projeto.

A propriedade architect recebe
um objeto com 5 propriedades:
build, serve, extract-i18n, test e
lint.
A que mais nos interessa para o
início de um projeto é a
propriedade build.

No objeto recebido pela
propriedade build, tem como
uma das propriedades a
"options", que recebe um objeto
com as opções de build.
Como o outputPath, que é o
caminho do diretório que vai
contém o pacote de código-fonte
gerado no build.

A propriedade index, indica qual
é o arquivo principal deste
projeto, por padrão seu valo é
“src/index.html”

a propriedade main, indica o
arquivo typescript principal, no
caso “src/main.ts”

A propriedade assets recebe um
array com os caminhos dos
arquivos estáticos, como favicon
e a própria pasta assets

a propriedade styles e scripts
também recebem um array com
o caminhos dos arquivos de
CSS, e javascript. Todos os
arquivos de javascript e CSS
devem ser informados aqui, pois
o Angular que gerencia a
inserção destes arquivos na
aplicação.

Pela documentação do Angular
CLI conseguimos descobrir todas
as possibilidades da ferramenta
com maiores detalhes. Portanto
reforço o convite de passar por
ela:
https://github.com/angular/angular-cli/wiki

ng serve
execute este comando no
terminal na raiz do projeto
Angular

Imagem do terminal executando o comando ng serve, onde na
mensagem inicial indica que um servidor local para
desenvolvimento foi iniciado e que é possível acessar a
aplicação através da url http://localhost:4200 
pra cego ver: imagem do terminal após executar o comando ng
serve, apresentando a mensagem de projeto compila do com
sucesso.
http://localhost:4200 em 9091ms

ng serve -o --aot
este comando abrirá a janela do navegador automaticamente com a
aplicação após o build, e também fará a compilação do tipo ahead of
time (que é um pouco mais rápida que a padrão JIT - just in time)

http://localhost:4200 em 7322ms
pra cego ver: imagem do terminal com a execução o comando com
sucesso, e exibindo a diferença no tempo ao usar a flag —aot,
economiza alguns segundos no tempo para compilação do projeto.

pra cego ver: imagem da aplicação Angular
recém criada, no navegador. “Welcome to
app”

O ng add, por baixo dos panos executa um npm install, porém é
verificado se a biblioteca a ser baixada tem suporte ao schematics
do Angular, que é o padrão utilizado para as dependências e a CLI
pode adicionar de maneira que ela já pode ser utilizada, sem
precisar adicionar “na mão" os arquivos da biblioteca baixada no
código projeto, pois com o schematics a CLI faz isto para você.
pra cego ver: imagem do terminal executando o comando “ng add
bootstrap” e aparecendo o alerta dizendo que o Bootstrap é uma
biblioteca que não tem suporte aos schematics. Assim a CLI
apenas baixa os arquivos da biblioteca na pasta node_modules e
salva ela como dependência do projeto no arquivo package.json.

npm install
continua funcionando também

atualizando a
versão do
projeto

pra cego ver: imagem do site que guia como
atualizar a versão do seu projeto Angular
update.angular.io
Angular
Update Guide

ng update  
@angular/core
execute este comando em seu projeto para atualizar a versão do
Angular

ng test
executam os testes de unidade

pra cego ver: imagem dos testes de unidade sendo executados pelo
terminal, e falhando.

pra cego ver: imagem da aplicação que mostra o relatório dos testes
de unidade, num cenário onde todos os testes passam
localhost:9876

ng e2e
executam os testes end to end

pra cego ver: imagem dos testes de e2e sendo executados no terminal
e passando com sucesso.

Enviando seu
código para
produção

ng build
execute este comando no terminal e “voilà”

pra cego ver: imagem do terminal executando o ng build e fazendo log
dos arquivos gerados na pasta “dist/braziljs”.
São 13 arquivos:
3rdpartylicenses.txt
index.html
main.js.map
polyfills.js.map
runtime.js.map
styles.js.map
vendor.js.map
favicon.ico
main.js
polyfills.js
runtime.js
styles.js
vendor.js
ng build

ng build --prod
este comando com a flag —prod é otimizado para produção diminuindo
a quantidade de arquivos gerados

pra cego ver: imagem dos 7 arquivos gerados: 
3rdpartylicenses.txt
index.html
polyfills.2f4a59095805af02bd79.js
styles.34c57ab7888ec1573f9c.css
favicon.ico
main.d1678bd49b75ed9d238b.js
runtime.a66f828dca56eeb90e02.js 
ng build --prod

Recomendações
Visualizar e testar projetos Angular: https://stackblitz.com/
Blog do Angular :) https://blog.angular.io/
Angular Extreme Performance. Gustavo Costa. slideshare.net/gustavocostaw/
angular-extreme-performance
Desenvolvendo com Angular CLI. https://www.youtube.com/watch?v=03-
LYh7FQUw

pra cego ver: uma pequena recordação feliz, a
foto de encerramento da primeira edição da
BrazilJS em 2012 em Porto Alegre. Na foto um
grupo de cerca de 30 pessoas, eu incluída,
palestrantes e organizadores do evento, e
Brendan Eich, o criador do javascript que foi
Keynote nesta edição.
Obrigada!
vanessametonini
@
twitter
gitlab & github
gmail
#tbt
BrazilJS2012

Aprendendo Angular com a CLI

Mais conteúdo relacionado

Mais procurados

Semelhante a Aprendendo Angular com a CLI

Mais de Vanessa Me Tonini

Aprendendo Angular com a CLI