greatbody
/
freeCodeCamp
mirror of https://github.com/freeCodeCamp/freeCodeCamp.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity
freeCodeCamp/guide/portuguese/angular/command-line-interface/index.md

8.6 KiB
Raw Blame History

title localeTitle
Command-line Interface Interface da Linha de comando

Interface da Linha de comando

Motivação

Angular está intimamente associado à sua interface de linha de comando (CLI). O CLI simplifica a geração do sistema de arquivos Angular. Ele lida com a maioria da configuração nos bastidores para que os desenvolvedores possam começar a codificação. A CLI também tem uma curva de aprendizado baixa, recomendável para qualquer novato que queira pular para a direita. Heck, até mesmo desenvolvedores experientes da Angular confiam na CLI!

Instalação

A CLI Angular requer o Node.js e o Node Packet Manager (NPM) . Você pode verificar esses programas com o comando terminal: node -v; npm -v . Uma vez instalado, abra um terminal e instale o CLI Angular com este comando: npm install -g @angular/cli . Isso pode ser executado em qualquer lugar no seu sistema. A CLI é configurada para uso global com o sinalizador -g .

Verifique se o CLI está lá com o comando: ng -v . Isso gera várias linhas de informação. Uma dessas linhas indica a versão da CLI instalada.

Reconheça que ng é o bloco de construção básico da CLI. Todos os seus comandos começarão com ng . Hora de dar uma olhada em quatro dos comandos mais comuns prefixados com ng .

Comandos Principais

  • ng novo

  • ng servir

  • ng gerar

  • ng construir

  • ng update

Os termos-chave para cada um deles são bastante reveladores. Juntos, eles compõem o que você precisa para começar a trabalhar com o Angular. Claro, existem muitos mais. Todos os comandos são descritos na documentação do GitHub da CLI 1 . Você provavelmente descobrirá que os comandos listados acima cobrirão as bases necessárias.

ng novo

ng new cria um novo sistema de arquivos Angular. Este é um processo surreal. Por favor, navegue para um local de arquivo desejável para a nova geração de aplicativos. Digite este comando da seguinte maneira, substituindo [name-of-app] pelo que você quiser: ng new [name-of-app] .

Um sistema de arquivos sob a pasta [name-of-app] deve aparecer. Sinta-se livre para explorar o que está dentro. Tente não fazer alterações ainda. Tudo o que você precisa para executar seu primeiro aplicativo Angular vem empacotado juntos nesse sistema de arquivos gerado.

ng servir

Para obter o aplicativo em execução, o comando ng serve deve ser executado na pasta [name-of-app] . Qualquer lugar dentro da pasta serve. A CLI Angular deve reconhecer que está dentro de um ambiente gerado com ng new . Ele será executado desde esta condição. Vá em frente e tente: ng serve .

O aplicativo é executado na porta 4200 por padrão. Você pode visualizar o aplicativo Angular navegando para localhost:4200 em qualquer navegador da web. Angular funciona em todos os navegadores. A menos que você esteja usando uma versão antiga do Internet Explorer, o aplicativo será exibido. Ele exibe o logotipo Angular oficial ao lado de uma lista de links úteis.

Ok, o aplicativo é executado. Espero que funcione, mas você precisa saber o que está acontecendo sob o capô. Consulte novamente o sistema de arquivos [name-of-app] . Navegue pelo [name-of-app] -> src -> app . Aí reside os arquivos responsáveis ​​pelo que você viu no localhost:4200 .

ng gerar

Os arquivos .component definem um componente Angular incluindo sua lógica ( .ts ), estilo ( .css ), layout ( .html ) e teste ( .spec.ts ). O app.module.ts se destaca particularmente. Juntos, esses dois grupos de arquivos trabalham juntos como component e module . O component e o module são dois exemplos separados de esquemas angulares. Os esquemas classificam os diferentes blocos de código gerados por finalidade ng generate .

Para o propósito deste artigo, entenda que um module exporta e importa ativos para e de uma árvore de componentes subjacente. Um component preocupa com uma seção da interface do usuário. A lógica, o estilo, o layout e o teste dessa unidade permanecem encapsulados nos vários arquivos .component .

Quanto ao ng generate , este comando pode gerar esqueletos para cada um dos esquemas angulares disponíveis 2 . Navegue para [name-of-app -> src -> app] . Tente gerar um novo component executando: ng generate component [name-of-component] . Substitua [name-of-component] pelo que você quiser. Um novo arquivo [name-of-component] será exibido junto com seus arquivos component necessários.

Você pode ver que o ng generate agiliza o código padrão do Angular. ng generate também liga as coisas. Os esquemas criados no contexto de um sistema de arquivos Angular conectam-se ao módulo raiz do sistema. Nesse caso, seria o arquivo app.module.ts dentro de [name-of-app -> src -> app] .

ng construir

Angular é uma ferramenta de front end. O CLI realiza suas operações em nome do front end. ng serve cuida da configuração do servidor de backend. Isso mantém o desenvolvimento inteiramente focado no front end. Dito isto, conectar seu próprio back-end ao aplicativo Angular também deve ser possível.

ng build preenche essa necessidade. Antes de experimentá-lo dentro do sistema de arquivos. Navegue para [name-of-app] -> angular.json . Procure por esta única linha de código: "outputPath": "dist/my-app" .

Essa linha de configuração determina onde o ng build despeja seus resultados. Os resultados sendo todo o aplicativo Angular compilado em uma pasta dist/my-app . Dentro dessa pasta, existe index.html . Todo o aplicativo Angular pode ser executado com index.html . Nenhum ng serve é necessário a partir daqui. Com este arquivo, você pode facilmente conectar seu back-end.

Dê uma chance: ng build . Novamente, isso deve ser executado no sistema de arquivos Angular. Com base no valor-chave de “outputPath:” em angular.json . Um arquivo irá gerar onde o aplicativo original é totalmente compilado. Se você mantiver “outputPath:” o mesmo, o aplicativo compilado estará em: [name-of-app] -> dist -> [name-of-app] .

ng update

Na atualização de cliques angulares, faça a atualização automática em todos os pacotes angulares e npm para as versões mais recentes.

Aqui está a sintaxe e as opções podem ser usadas com ng update .

ng update [package]

Opções

  • funcionamento a seco --dry-run (alias: -d)

    Percorra sem fazer alterações.

  • força --force

    Se for false, irá cometer erros se os pacotes instalados forem incompatíveis com a atualização.

  • todos --all

    Se deseja atualizar todos os pacotes em package.json.

  • Próximo --next

    Use a versão maior, incluindo beta e RCs.

  • migrar apenas --migrate-only

    Apenas execute uma migração, não atualize a versão instalada.

  • a partir de --from

    Versão da qual migrar. Disponível apenas com um único pacote sendo atualizado e apenas na migração.

  • para --to

    Versão até a qual aplicar migrações. Disponível apenas com um único pacote sendo atualizado e somente em migrações. Requer de ser especificado. Padrão para a versão instalada detectada.

  • registro --registry

    O registro do NPM a ser usado.

Conclusão

Esses comandos cumprem o básico. A CLI do Angular é uma conveniência incrível que acelera a geração, configuração e expansão de aplicativos. Ele faz tudo isso enquanto mantém a flexibilidade, permitindo que o desenvolvedor faça as alterações necessárias.

Por favor, verifique os links no localhost:4200 se você não tiver já. Não se esqueça de executar o ng serve antes de abri-lo. Com uma melhor compreensão do CLI, você está pronto para aprender mais sobre o que é gerado pelos seus comandos mais essenciais.

Fontes

  1. Google. “Angular / angular-cli / wiki # comandos adicionais.” GitHub.

  2. Google. “Angular / angular-cli / wiki / gerar # esquemas disponíveis.” GitHub.

Recursos