Se ha denunciado esta presentación.
Utilizamos tu perfil de LinkedIn y tus datos de actividad para personalizar los anuncios y mostrarte publicidad más relevante. Puedes cambiar tus preferencias de publicidad en cualquier momento.
Próxima SlideShare
What to Upload to SlideShare
Siguiente
Descargar para leer sin conexión y ver en pantalla completa.

1

Compartir

Descargar para leer sin conexión

Aprendendo Angular com a CLI

Descargar para leer sin conexión

Como a ferramenta de linha de comando (CLI) do Angular pode nos ensinar começar um projeto e Angular? Vamos aprender nesta palestra como começar um projeto do zero usando a CLI e saber as opções que existem para as pessoas desenvolvedoras.

Audiolibros relacionados

Gratis con una prueba de 30 días de Scribd

Ver todo

Aprendendo Angular com a CLI

  1. 1. Aprendendo Angular com a CLI Vanessa Me Tonini 09.06.18
  2. 2. @vanessametonini
 Instrutora @ Caelum Frontend Dev Agile Coach Voluntária @ Marialab
  3. 3. 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
  4. 4. 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.
  5. 5. 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
  6. 6. 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
  7. 7. 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.
  8. 8. 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
  9. 9. 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
  10. 10. Requisitos node -v npm -v pra cego ver: imagem do terminal do computador executando os comandos node -v, e depois npm -v
  11. 11. Instalação npm install -g @angular/cli
  12. 12. 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
  13. 13. ng o comando do angular ou melhor… da CLI
  14. 14. 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
  15. 15. novo projeto angular
  16. 16. ng new braziljs Este comando irá criar uma pasta chamada braziljs e nela será criado todos arquivos e estrutura do projeto, que já funciona.
  17. 17. 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
  18. 18. 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
  19. 19. 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)
  20. 20. 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
  21. 21. "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 ^ ˜&
  22. 22. Agora vamos analisar a estrutura do angular.json Estrutura básica projeto Angular
  23. 23. 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
  24. 24. 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)
  25. 25. 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.
  26. 26. Estrutura básica projeto Angular
  27. 27. 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.
  28. 28. 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.
  29. 29. 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.
  30. 30. A propriedade index, indica qual é o arquivo principal deste projeto, por padrão seu valo é “src/index.html”
  31. 31. a propriedade main, indica o arquivo typescript principal, no caso “src/main.ts”
  32. 32. A propriedade assets recebe um array com os caminhos dos arquivos estáticos, como favicon e a própria pasta assets
  33. 33. 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.
  34. 34. 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
  35. 35. executando o projeto
  36. 36. ng serve execute este comando no terminal na raiz do projeto Angular
  37. 37. 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
  38. 38. 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)
  39. 39. 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.
  40. 40. pra cego ver: imagem da aplicação Angular recém criada, no navegador. “Welcome to app”
  41. 41. trabalhando com dependências
  42. 42. ng add algumalib !
  43. 43. 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.
  44. 44. ng add @angular/material
  45. 45. npm install continua funcionando também
  46. 46. atualizando a versão do projeto
  47. 47. pra cego ver: imagem do site que guia como atualizar a versão do seu projeto Angular update.angular.io Angular Update Guide
  48. 48. ng update 
 @angular/core execute este comando em seu projeto para atualizar a versão do Angular
  49. 49. e os testes?
  50. 50. ng test executam os testes de unidade
  51. 51. pra cego ver: imagem dos testes de unidade sendo executados pelo terminal, e falhando.
  52. 52. 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
  53. 53. ng e2e executam os testes end to end
  54. 54. pra cego ver: imagem dos testes de e2e sendo executados no terminal e passando com sucesso.
  55. 55. Enviando seu código para produção
  56. 56. ng build execute este comando no terminal e “voilà”
  57. 57. 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
  58. 58. ng build --prod este comando com a flag —prod é otimizado para produção diminuindo a quantidade de arquivos gerados
  59. 59. 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
  60. 60. 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
  61. 61. 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
  • sa_vini

    Jun. 22, 2018

Como a ferramenta de linha de comando (CLI) do Angular pode nos ensinar começar um projeto e Angular? Vamos aprender nesta palestra como começar um projeto do zero usando a CLI e saber as opções que existem para as pessoas desenvolvedoras.

Vistas

Total de vistas

783

En Slideshare

0

De embebidos

0

Número de embebidos

26

Acciones

Descargas

12

Compartidos

0

Comentarios

0

Me gusta

1

×