Se você trabalhou com Angular em algum momento, muito provavelmente já se deparou com o comando ng new hello-world, certo? A ideia desse artigo é mostrar com exemplos práticos como utilizar diversos comandos escondidos (nem tanto) da ferramenta Angular CLI para turbinar aquelas tarefas chatas do dia a dia.
Bora?
Só para revisar: o que é Angular CLI?
Só para garantir que estamos na mesma página, quero conceituar o que é o Angular CLI. Essa ferramenta open source foi criada pelo próprio time de desenvolvimento do Angular que acelera a criação de itens importantes para os nossos projetos, como componentes, classes e muito mais.
Lembrando que CLI significa command-line interface, ou Interface de Linha de Comando em português.
Começando a instalação
O mais importante agora é instalar a ferramenta que o Angular disponibiliza para acelerar o processo de desenvolvimento: o Angular CLI.
Para instalar o Angular CLI é bem simples, basta abrir um prompt de comando (CMD) e executar o comando abaixo:
npm install -g @angular/cliApós alguns minutos a ferramenta de linha de comando do Angular estará pronta para ser usada.
O comando mais importante do Angular CLI
ng new hello-world
Por que esse comando é tão importante? É por ele que tudo começa!
Qualquer projeto que usa Angular como base de um jeito ou de outro, usará esse comando. E o melhor é que podemos fazer várias coisas com esse comando principal.
Confere aí. 🙂
Comandos matadores com o Angular CLI
Agora vamos ver comandos matadores para usar com o ng new hello-world no Angular CLI.
–routing
ng new hello-world --routing
Esse comando “parametrozinho” a mais que você coloca na linha de comando, já cria um arquivo de rotas. Dá pra ter uma ideia de como padronizar a nomenclatura e estrutura de arquivos de rotas que você irá desenvolver para a sua aplicação.
–prefix
ng new hello-world --prefix lib
Todo projeto Angular tem como prefixo padrão a palavra ‘app’. Se você criar qualquer coisa no Angular na mão e não configurar o prefixo, o validador de códigos irá dizer que você não está seguindo o padrão de codificação.
O comando acima é muito interessante quando você está trabalhando em alguma biblioteca. Utilizar o prefixo padrão ‘app’ em uma biblioteca, deixa tudo muito genérico, e pra quem utiliza fica confuso a mistura de funcionalidade com biblioteca.
–style
ng new hello-world --style scss
Uma das grandes vantagens do Angular é poder escolher como você vai usar o CSS. Pode usar ele puro e com outros preprocessadores. A ideia do parâmetro –style é poder configurar já na criação do projeto qual “tipo” de CSS você vai poder utilizar. Alguém aí gosta de trabalhar com SCSS? Deixa nos comentários!
–skip-git
ng new hello-world --skip-git=true
Se por motivos de necessidade (ou insanidade) o projeto não utilizar GIT para controle de fontes, é possível pular a inicialização do repositório GIT:) Aí é um arquivo a menos pra você pensar na cagada que está fazendo escolhendo outra ferramenta pra controle de fontes.
–skip-install
ng new hello-world --skip-install=true
Uma sugestão muito prática pra testar todos esses comandos de criação é utilizar o comando “–skip-install”. Com isso, é possível testar vários comandos, ver estrutura dos projetos em menos tempo, pois a máquina só vai se encarregar de criar os arquivos do projeto e não vai instalar todos aqueles pacotes pesados de JavaScript que o Angular precisa pra funcionar.
–verbose
ng new hello-world --verbose=true
Mas se por algum motivo um comando simplesmente dá um erro maluco (bastante raro), o comando –verbose ajuda a enxergar onde está o projeto, ou seja, dar um log mais detalhado da criação do projeto.
–minimal
ng new hello-world --minimal=true
Algumas vezes a intenção é testar alguma super hiper mini MINI implementação. Por padrão a criação de um projeto Angular, cria e instala um monte de script relacionado a testes, que não é necessário para essas provas de conceitos rápidos. O papel desse comando é agilizar a criação do projeto. Simples assim!
Angular CLI: uma ferramenta com muitos recursos para agilizar o desenvolvimento
A minha intenção aqui não foi mostrar todos os comandos e parâmetros, já que isso conseguimos encontrar facilmente na documentação do Angular, que é ótima.
A ideia foi mostrar o que eu aprendi e tentar abrir um pouco as possibilidades para alguns cenários no dia a dia.
E aí, tem algum comando que você gostaria de compartilhar para criação de projetos? Deixe sua opinião nos comentários! Lembre-se: somos uma comunidade e é assim que crescemos 🙂
Aproveita pra assinar nossa newsletter de tecnologia e receber em primeira mão nossos conteúdos.
