Perdendo o preconceito com o novo Angular \| TreinaWeb Promoção no ar Matricule-se agora e garanta **54% de desconto** Termina em Tempo restante da oferta: 16 Horas 44 Min 41 Seg Tempo restante da oferta: 16 44 41 [Assinar →](https://www.treinaweb.com.br/checkout/pagamento/plano/anual?cupom=TW-SCLIENTE26) [ ](https://www.treinaweb.com.br) Explorar [ Quanto custa? ](#assinatura) [ FAQ ](https://www.treinaweb.com.br#faq) [Matricule-se](#assinatura) [ Entrar ](https://www.treinaweb.com.br/login) [ Início ](https://www.treinaweb.com.br) [ Artigos ](https://www.treinaweb.com.br/blog) Perdendo o preconceito com o novo Angular [ Javascript ](https://www.treinaweb.com.br/blog/categoria/javascript) # Perdendo o preconceito com o novo Angular Vou citar alguns itens que me desanimavam sobre o novo Angular e o motivo de eu ter mudado de ideia. Quem sabe você considere utilizá-lo em seu próximo projeto? [ Akira Hanashiro ](https://www.treinaweb.com.br/blog/autor/akira-hanashiro) 10 anos atrás ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2021/05/ang_ignore-1.png) Olá, Web Developers! Quem aqui também já desanimou com tantas notícias sobre a nova versão do Angular? (Eu mesmo já tinha desanimado). Com tantas pessoas mais experientes que eu listando coisas boas e ruins, eu realmente desanimei. Mesmo assim, por saber da demanda no mercado, eu continuei seguindo a evolução dele, pensando que as coisas iriam melhorar. Muitas coisas que vejo ainda me desanimam, mas mudei alguns pensamentos e até vejo o novo Angular como um aliado. Vou listar aqui alguns itens que me desanimavam e o motivo de eu ter mudado de ideia. Quem sabe você se inspire e considere utilizá-lo para o seu próximo projeto? É sempre bom manter a mente aberta, não? ;) [ ![Nest.js - Fundamentos](https://d2knvm16wkt3ia.cloudfront.net/assets/svg-icon/nest-js.svg) Curso Nest.js - Fundamentos Conhecer o curso ](https://www.treinaweb.com.br/curso/nestjs-fundamentos) ## Major version a cada 6 meses O novo Angular não tem nada a ver com o Angular 1. Ele foi criado do zero. No final de 2016 foi anunciado que uma nova versão seria lançada a cada 6 meses, ou seja, logo logo teremos o Angular 4. Por causa desse versionamento “agressivo”, não há mais razão para chamarmos de Angular 2. O recomendado é chamar o antigo de **AngularJS** e o novo simplesmente de **Angular**. Você pode entender melhor a razão lendo [esse post](http://angularjs.blogspot.com.br/2016/12/ok-let-me-explain-its-going-to-be.html). O medo de muitas pessoas é: *“Major Versions a cada 6 meses? Meu deus, muita coisa vai quebrar!”* Lembro do AngularJS em sua versão 1.2. Após um tempo eu precisei muito de algumas funcionalidades lançadas no 1.4, mas isso quebrou muitas coisas de bibliotecas de terceiros. Tive que me contentar com algumas coisas que já haviam na 1.3 mesmo. Até mesmo quem quis sair na frente e escreveu livros e criou cursos na fase alpha ou na fase de lançamento do novo Angular teve que arrumar muita coisa. Várias coisas mudaram de um dia para o outro. Estão dizendo que agora todas as versões serão compatíveis com versões mais antigas. Já ouvi essa história antes no AngularJS, e não aconteceu. Mas eu aceitei, porque realmente há momentos em que temos que evoluir algumas funcionalidades, e outras acabam se tornando obsoletas. Faz parte do desenvolvimento e, com o tempo, algumas funcionalidades acabam sendo removidas. Seria muito pior uma ferramenta que não evolui ou que fica carregando código legado o “resto da vida”. Será que o seu sistema realmente vai precisar ficar migrando para cada versão nova que sair? Se for o caso, será que você escolheu bem a ferramenta ou modo de desenvolver? ## Sintaxe completamente diferente Se tanta gente já estava acostumada com o modo de desenvolver do AngularJS, por que criar uma sintaxe tão diferente? **AngularJS:** ```html ``` **Angular:** ```html ``` Esse foi um tapa na cara de quem veio do AngularJS e achou que poderia reaproveitar algumas coisas no Angular. Mesmo as partes mais simples e conhecidas do AngularJS são bem diferentes das do Angular, como podemos ver no exemplo acima, ao utilizar o famoso `ng-model`, fazer loopings ou chamar eventos. Quem conhece o novo Angular sabe o motivo por trás da sintaxe `[()]`, conhecida como “banana in a box”, ou o `*` do `*ngFor`. Mas dava muito bem para tentar deixar algumas coisas com a sintaxe igual, né? Facilitaria muito, pois aprenderíamos intuitivamente, só de lembrar da sintaxe do AngularJS, sem ter que procurar como fazer algo. Hoje eu tenho outra opinião. Por ser uma ferramenta totalmente diferente, funcionar diferente, é importante que saibamos conscientemente o que estamos fazendo. > Trabalhar com um serrote levando em conta a sua experiência com um martelo pode fazer com que você não faça um bom códigão. > > Hanashiro, Akira A mudança até nos detalhes que já conhecíamos nos força a estudar do zero. O nome da ferramenta pesou bastante por seu legado. Por ser algo feito do zero, talvez teria sido bom (ou essencial) criar um novo nome. Chamar de `Angular 2` foi puro marketing. **Lembre-se:** Angular é uma ferramenta totalmente diferente do AngularJS. ## Início de projeto muito complicado Nossa, essa no começo era indiscutível. Tínhamos que configurar o transpilador para o TypeScript, pegar as dependências do Angular como o zone.js, pegar o SystemJS, angular2-polyfills, etc. Depois o arquivo principal. Tem que saber o que importar. Tem coisas que vêm do `@angular/core`, outras do `@angular/forms`, `@angular/platform-browser`, etc. Com o tempo você se acostuma. E então criamos uma classe e passamos algumas (muitas!) informações para a anottation `@ngModule`. Várias das coisas que importamos temos que passar para a `anottations`. E isso, após um tempo, começa a cansar, concorda? E depois de várias linhas, estamos prontos para nosso primeiro `Hello World`! Para quem está iniciando na profissão, a sensação é tipo essa: ![Este aqui não é para principiantes](http://i63.tinypic.com/aw4ap1.png) Sendo que no AngularJS, bastava importar o código, colocar um `ng-app` no container da aplicação e pronto! Até mesmo o React, que necessita transpilar o JSX, o que nos faz ir em busca de ferramentas como Babel, é bem mais simples para quem está iniciando. Hoje em dia podemos iniciar facilmente uma aplicação com o `@ang/cli`, ferramenta feita em cima do `ember-cli`, que serve para estruturar a aplicação automaticamente a partir de comandos. Até os `imports` são colocados automaticamente. Eu não gosto muito de ferramentas assim, pois muitas vezes produzem muito código que não iremos utilizar, e se precisarmos apagar alguma coisa, teremos que conhecer bem o que foi criado, pois teremos que apagar na mão. Outros podem dizer: *“Estruturar automaticamente sem nem saber o que está acontecendo? Isso é loucura. Não dá certo!”*. Bem, já foi provado que aprendemos mais rápido se formos logo de “cabeça” em algo ao invés de ficar estudando a teoria primeiro. É como dizem: “Aprendemos a andar caindo, não observando.” Muitos cursos modernos de línguas estimulam a prática do idioma já no início, ao invés de ficar primeiro te ensinando pronomes, depois verbos, e só depois formar frases. Esse é um dos motivos por trás do sucesso de aplicativos como o `Duolingo`, que para muitos é só uma brincadeira mas para outros é uma ferramenta muito bem elaborada. Tenho que admitir que depois que parei de me preocupar com o que cada linha fazia, e mergulhei de cabeça na criação de código, aprendi mais rápido. Agora que já conheço melhor a ferramenta, entender o que cada uma daquelas linhas faziam ficou mais fácil. Mais uma vez: É uma ferramenta diferente e com propósitos diferentes. Esteja aberto à mudanças ao invés de ignorá-las e ficar comparando com outras soluções. ## TypeScript Muita gente reclama do TypeScript, mas eu sou neutro neste item. Realmente não me incomoda. Muitas das funcionalidades que utilizamos no Angular faz parte da nova versão do EcmaScript. Fora isso, o que o TypeScript tem de diferente mesmo é a tipagem, mas você pode muito bem continuar declarando variáveis sem declarar o tipo. ## Complica o que o React facilita Criar componentes no AngularJS era chatinho. Tinha muita coisa que não era tão simples ou intuitiva, e tentar explicar para os outros da equipe só fazia eles desejarem não chegar mais perto do front-end. Não há como negar que criar componentes no Angular agora é mais simples, mas nem tão simples quanto no React. Há muitas reclamações contra o React e sobre o uso do JSX, mas também há reclamações do Angular por termos que importar os módulos e declararmos mais umas duas vezes no `@decorator` . Tem gente que defenderia o Angular simplesmente por dizer que código no React fica feio por “misturar HTML e JS”. Não adianta dizer: *“É JSX! Você pode escrever JS se quiser!”* para os outros. Essas pessoas não estão abertas a testar algo novo só porque já foi considerado ruim há muitos anos. Só digo que é pouco JSX que vai nos componentes. Se você tem muito código no seu componente, pode ser que você esteja fazendo errado, pois, praticamente você está criando uma View. Saindo do React, outros podem acabar dizendo: *O `Aurelia` faz o mesmo de maneira bem mais simples!* Sim! Quem já testou o Aurelia vai concordar que nem parece que temos um framework lá. Escrevemos um HTML no arquivo HTML e no arquivo JavaScript criamos uma classe comum, tornando tudo muito intuitivo! Fim. Para quem tem seguido a evolução do Angular, muitas funcionalidades têm sido simplificadas. Quem sabe esse monte de código que repetimos uma hora saia? Não sei como defender esse ponto. Só decidi aceitar que é uma ferramenta diferente e torço para que as partes ruins sejam melhoradas o quanto antes. ## Documentação ruim Não tem desculpa. Se formos comparar a qualidade da documentação do Angular com outras, como React ou Vue.js, ela é bem complicada para quem está começando. Quando decidi estudar Vue.js, apenas umas 2 horas lendo a documentação já foi suficiente para aprender como trabalhar com ele, discutir com minha equipe sobre as vantagens e desvantagens e porque deveríamos considerá-lo para nosso próximo projeto. Uma das razões que me desanimavam no Angular é que no começo a documentação era nossa única fonte de estudo, quando ele ainda estava em fase alpha. Hoje em dia isso não me incomoda mais, pois já temos muitos cursos, livros e posts sobre o assunto (esse foi fácil defender :p). ## Concluindo Bom, a ideia desse post não foi falar mal ou bem de Angular, Vue, React, Ember, Aurelia, etc. Foi mais para apontar os principais motivos de eu (e várias pessoas) evitarmos tanto ele e a razão de eu ter dado mais uma chance. Como eu disse muitas vezes, é uma ferramenta nova com ideias novas para projetos novos. Pense bem nas suas necessidades, estude ferramentas diferentes, analise a melhor para a necessidade do seu projeto, pois não existe ferramenta perfeita que se encaixa em tudo, e mesmo se existir, um dia ficará ultrapassada. Somos maduros e profissionais o bastante para experimentar coisas novas, e não crianças discutindo o que é melhor: Pokémon ou Digimon. Espero que este texto tenha te inspirado a refletir sobre o assunto, não só sobre Angular, mas também sobre outras ferramentas. E você, o que acha do front-end moderno e sua enorme quantidade de ferramentas? Compartilhe com a gente aí nos comentários! Ah, aqui no [TreinaWeb](https://www.treinaweb.com.br/) temos cursos sobre AngularJS, React e Vue. [ ![AngularJS - Criação de interfaces web](https://d2knvm16wkt3ia.cloudfront.net/assets/svg-icon/angularjs.svg) Curso AngularJS - Criação de interfaces web Conhecer o curso ](https://www.treinaweb.com.br/curso/angularjs-completo) [ ![Webpack - Empacotando aplicações](https://d2knvm16wkt3ia.cloudfront.net/assets/svg-icon/webpack.svg) Curso Webpack - Empacotando aplicações Conhecer o curso ](https://www.treinaweb.com.br/curso/webpack-empacotando-aplicacoes) [ ![Java - Fundamentos para Web](https://d2knvm16wkt3ia.cloudfront.net/assets/svg-icon/java.svg) Curso Java - Fundamentos para Web Conhecer o curso ](https://www.treinaweb.com.br/curso/java-fundamentos-para-web) Em breve lançaremos os cursos de Angular 2 e Aurelia. o/ - [ #Desenvolvimento ](https://www.treinaweb.com.br/blog/tag/desenvolvimento) - [ #Front-end ](https://www.treinaweb.com.br/blog/tag/front-end) - [ #Angular ](https://www.treinaweb.com.br/blog/tag/angular) - [ #ReactJS ](https://www.treinaweb.com.br/blog/tag/reactjs) - [ #Vue.js ](https://www.treinaweb.com.br/blog/tag/vue-js) Autor ![Akira Hanashiro](//secure.gravatar.com/avatar/d107ca73135bc62770a67ebbfe4cf80d?d=mm) ## Akira Hanashiro Graduado em Análise e Desenvolvimento de Sistemas, Pós-graduado em Projetos e Desenvolvimento de Aplicações Web e MBA em Machine Learning. Especializado em Front End e curte desenvolvimento de jogos. [Todos os artigos](https://www.treinaweb.com.br/blog/autor/akira-hanashiro) ## Continue estudando Transforme leitura em prática com os cursos e formações da TreinaWeb. [Ver cursos](https://www.treinaweb.com.br/cursos) Continue lendo ## Artigos relacionados - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2018/10/25180534/capa-rotina-estudos1-400x280.png) [ Estudos ](https://www.treinaweb.com.br/blog/categoria/estudos) 8 anos atrás ## [ Como manter uma rotina nos meus estudos? ](https://www.treinaweb.com.br/blog/como-manter-uma-rotina-nos-meus-estudos) Falta de tempo? Perda de interesse? Veja como ter uma rotina de estudos e conseguir mantê-la. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2019/11/02215124/CHAT-ONLINE-1-400x280.png) [ Tecnologia ](https://www.treinaweb.com.br/blog/categoria/tecnologia) 7 anos atrás ## [ Porquê instalar um chat online pronto vale a pena ](https://www.treinaweb.com.br/blog/porque-instalar-um-chat-online-pronto-vale-a-pena) Confira neste artigo as vantagens de instalar um chat online. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2018/11/05145555/3335-400x280.png) [ Desenvolvimento de Jogos ](https://www.treinaweb.com.br/blog/categoria/desenvolvimento-de-jogos) 8 anos atrás ## [ Principais tipos de jogos hiper casuais ](https://www.treinaweb.com.br/blog/principais-tipos-de-jogos-hiper-casuais) Conheça alguns dos principais tipos de jogos hiper casuais. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2018/01/17113117/IMG-MARYLENE-1-400x280.png) [ Carreira ](https://www.treinaweb.com.br/blog/categoria/carreira) 9 anos atrás ## [ 5 linguagens de programação promissoras para se estudar em 2018 ](https://www.treinaweb.com.br/blog/5-linguagens-de-programacao-promissoras-para-se-estudar-em-2018) Cinco linguagens de programação de muito potencial no mercado de trabalho em 2018. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2024/01/como-lidar-sobrecarga-informacoes-400x280.png) [ Carreira ](https://www.treinaweb.com.br/blog/categoria/carreira) 3 anos atrás ## [ Como lidar com a sobrecarga de informações no mundo da tecnologia? ](https://www.treinaweb.com.br/blog/como-lidar-com-a-sobrecarga-de-informacoes-no-mundo-da-tecnologia) Confira nesse artigo algumas dicas para que você não tenha uma sobrecarga de informações e consiga extrair o que realmente é necessário. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2022/03/o-que-e-fastapi-400x280.png) [ Desenvolvimento Back-end ](https://www.treinaweb.com.br/blog/categoria/desenvolvimento-back-end) 5 anos atrás ## [ O que é FastAPI? ](https://www.treinaweb.com.br/blog/o-que-e-fastapi) Neste artigo vamos falar um pouco sobre o funcionamento, história e quais as principais características do framework web FastAPI. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2019/10/20234042/capa-dart-400x280.png) [ Dart ](https://www.treinaweb.com.br/blog/categoria/dart) 5 anos atrás ## [ Como utilizar generics no Dart ](https://www.treinaweb.com.br/blog/como-utilizar-generics-no-dart) Neste artigo vamos aprender sobre os Generics na linguagem Dart e como eles podem nos auxiliar em garantir que os tipos dos objetos sejam o que esperamos que eles sejam. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2020/12/motivos-que-podem-te-fazer-desanimar-desistir-da-programacao-como-evita-los-400x280.png) [ Carreira ](https://www.treinaweb.com.br/blog/categoria/carreira) 6 anos atrás ## [ Motivos que podem te fazer desanimar/desistir da programação: como evitá-los? ](https://www.treinaweb.com.br/blog/motivos-que-podem-te-fazer-desanimar-desistir-da-programacao-como-evita-los) Porque algumas pessoas começam a programar, mas acabam desistindo no meio do caminho? Veremos neste artigo algumas causas que podem te levar a desistência. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2020/10/5-motivos-para-estudar-react-400x280.png) [ Desenvolvimento Front-end ](https://www.treinaweb.com.br/blog/categoria/desenvolvimento-front-end) 6 anos atrás ## [ 5 motivos para estudar React ](https://www.treinaweb.com.br/blog/5-motivos-para-estudar-react) Confira neste artigo cinco motivos para você aprender a biblioteca JavaScript mais famosa da atualidade: o React. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2020/04/27230008/HONEYPOT-400x280.png) [ Segurança da Informação ](https://www.treinaweb.com.br/blog/categoria/seguranca-da-informacao) 7 anos atrás ## [ Termos comuns de segurança: Honeypot ](https://www.treinaweb.com.br/blog/termos-comuns-de-seguranca-honeypot) Nesta série de artigos sobre termos comuns de segurança, conheça o honeypot, uma armadilha destinada a atrair invasores. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2019/09/13110246/documentacao-software-400x280.png) [ Engenharia de Software ](https://www.treinaweb.com.br/blog/categoria/engenharia-de-software) 7 anos atrás ## [ A importância da documentação para desenvolvedores de software ](https://www.treinaweb.com.br/blog/a-importancia-da-documentacao-para-desenvolvedores-de-software) Confira neste artigo a importância da documentação de um software. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2019/06/11140050/sockets-redes-tcp-udp-400x280.png) [ Rede de computadores ](https://www.treinaweb.com.br/blog/categoria/rede-de-computadores) 8 anos atrás ## [ Uma introdução a TCP, UDP e Sockets ](https://www.treinaweb.com.br/blog/uma-introducao-a-tcp-udp-e-sockets) Uma introdução (base teórica) para TCP, UDP e Sockets, principalmente para desenvolvedores que desejam programar com Sockets. Ler artigo ## Um ano de acesso total para você viver de programação. Todos os cursos e formações da TreinaWeb numa única assinatura, com professores que atuam no mercado, suporte direto e certificados. Do primeiro `console.log` ao mercado de trabalho. - **1 ano** de acesso a **todos os cursos** - Cursos novos **toda semana** - Suporte **direto com professores** - Plano de carreira **personalizado** - **Certificados digitais** inclusos - **Aplicativos** para Android e iOS, com **acesso offline** **Garantia incondicional de satisfação** Teste por 7 dias e, se não fizer sentido para você, devolvemos seu dinheiro. ### Acesso completo a todos os cursos e dezenas de Formações. 12 meses Economize R$ 840,00 54% OFF de 12x R$ 129,00 por apenas 12x R$ 59,00 sem juros no cartão de crédito ou R$ 599,00 à vista Oferta termina em **16h 44min 41s** - Acesso imediato e ilimitado durante 1 ano. - Plano de carreira personalizado. - Suporte direto com professores. - E muito mais! [Matricule-se agora](https://www.treinaweb.com.br/checkout/pagamento/plano/anual?cupom=TW-SCLIENTE26) [ ](https://www.treinaweb.com.br) Escola online de programação, tecnologia e IA. - [ ](https://www.facebook.com/TreinaWeb/) - [ ](https://www.instagram.com/treinaweb/) - [ ](https://www.youtube.com/user/TreinaWeb) - [ ](https://twitter.com/treinaweb) - [ ](https://www.linkedin.com/company/treinaweb) - [ ](https://github.com/treinaweb) ## Inscreva-se em nossa newsletter Receba lançamentos, promoções e novidades. Seu nome Seu WhatsApp Seu melhor e-mail Inscrever-se ## Cursos - [ Base para Devs ](https://www.treinaweb.com.br/categoria/base-para-devs) - [ Front-end ](https://www.treinaweb.com.br/categoria/desenvolvimento-front-end) - [ Back-end ](https://www.treinaweb.com.br/categoria/desenvolvimento-back-end) - [ Mobile ](https://www.treinaweb.com.br/categoria/desenvolvimento-mobile) - [ Bancos de Dados ](https://www.treinaweb.com.br/categoria/bancos-de-dados) - [ Cloud ](https://www.treinaweb.com.br/categoria/cloud-computing) - [ IA ](https://www.treinaweb.com.br/categoria/ia) - [ E mais ](https://www.treinaweb.com.br/categoria/e-mais) - [ Ver todos os cursos ](https://www.treinaweb.com.br/cursos) ## Conteúdo - [ Formações ](https://www.treinaweb.com.br/formacoes) - [ Projetos práticos ](https://www.treinaweb.com.br/projetos-praticos) - [ Direto ao ponto ](https://www.treinaweb.com.br/direto-ao-ponto) - [ Planos ](https://www.treinaweb.com.br#assinatura) - [ Depoimentos ](https://www.treinaweb.com.br#depoimentos) - [ Comunidade ](https://www.treinaweb.com.br#comunidade) - [ Corpo docente ](https://www.treinaweb.com.br#docente) ## A empresa - [ Sobre a TreinaWeb ](https://www.treinaweb.com.br#sobre) - [ Perguntas frequentes ](https://www.treinaweb.com.br#faq) - [ Vantagens de estudar na TreinaWeb ](https://www.treinaweb.com.br/vantagens-de-estudar-na-treinaweb) - [ Cursos para empresas ](https://www.treinaweb.com.br/empresas) - [ Sugira um novo curso ](https://www.treinaweb.com.br/sugerir-curso) - [ Trabalhe conosco ](https://www.treinaweb.com.br/trabalhe-conosco) - [ Artigos ](https://www.treinaweb.com.br/blog) - [ Desenvolvedores e agentes ](https://www.treinaweb.com.br/developers) - [ Contato ](https://www.treinaweb.com.br/contato) - [ Política de privacidade ](https://www.treinaweb.com.br/politica-de-privacidade) - [ Termos de uso ](https://www.treinaweb.com.br/termos-de-uso) ## Baixe nosso aplicativo [ Disponível na **App Store** ](https://apps.apple.com/us/app/treinaweb/id1322729447) [ Disponível no **Google Play** ](https://play.google.com/store/apps/details?id=br.com.treinaweb.mobile) Av. Paulista, 1765, Conj 71 e 72 · Bela Vista · São Paulo · SP · 01311-200 © 2004 – 2026 TreinaWeb Tecnologia LTDA · CNPJ 06.156.637/0001-58