image

Acesse bootcamps ilimitados e +650 cursos pra sempre

60
%OFF
Article image
Edson Gallo
Edson Gallo05/09/2021 14:26
Compartilhe

Por que o Angular é um framework tão poderoso?

  • #Angular
  • #HTML
  • #TypeScript

Você já ouviu falar em Angular? Essa plataforma é voltada para a construção da interface de aplicações, usando HTML, CSS e, principalmente, JavaScript. Seu foco é em aplicações web de código-fonte aberto e front-end, baseadas em TypeScript.

O TypeScript, por sua vez, é uma linguagem que permite escrever seu código JavaScript, fazendo programações orientadas a objetos sem perder suas vantagens. Para conhecer mais sobre os elementos e funcionalidades dessa modalidade de desenvolvimento, continue a leitura do artigo que preparamos para você!

Elementos do Angular

Ao compilar um código TypeScript, é gerado um código JavaScript, e esse código é o que será executado no browser. Dentre os principais elementos básicos que tornam essa construção interessante, podemos destacar:

  • Templates;
  • Componentes;
  • Roteamento;
  • Diretivas;
  • Módulos;
  • Serviços;
  • Injeção de dependências,
  • Ferramentas de infraestrutura.

Outro ponto que merece destaque é o fato de que a plataforma é open source e conta com uma grande comunidade, com diversas organizações se utilizando do sistema e com bastante material de consulta disponível, para aqueles que querem se aperfeiçoar e aprender mais.

framework Angular, portanto, ajuda na criação de Single-Page Applications, com nível de produtividade e qualidade acima da média.

Qual a função do Angular?

O Angular otimiza o desenvolvimento das aplicações front-end de páginas web. O HTML permite a criação de páginas estáticas, porém, para uma aplicação web, é necessário mais do que isso.

O Angular adapta e estende o HTML tradicional para uma experiência otimizada, com conteúdo dinâmico e ligação direta dos dados, conhecida como two-way data-binding, que abre a possibilidade para sincronização automática de modelos e visualizações.

plataforma Angular provê recursos para o desenvolvimento de Single Page Applications (SPA). Ou seja, uma única página web, com o objetivo de fornecer a experiência ao usuário parecida com a de um aplicativo de desktop, onde o código é carregado na página única, de forma dinâmica.

A produtividade também aumenta, permitindo ao desenvolvedor quebrar o código em partes, utilizando componentes, módulos e outras funcionalidades. Essa estrutura torna o ambiente de desenvolvimento mais organizado, e é chamado de diagrama de aplicação Angular. Conheça mais sobre essas funcionalidades a seguir:

Componentes

O conceito de componentes é fundamental quando falamos de framework para front-end. Praticamente tudo se baseia neles, que são responsáveis por permitirem a criação de códigos, que podem ser reutilizados e testados sem o risco de colisões.

Uma aplicação Angular é iniciada por um componente principal, o AppComponent. A partir dele, conecta-se uma hierarquia de outros componentes ao modelo de objeto de documento de página (DOM).

Módulos

Com a utilização do Angular, um aplicativo é definido por uma junção de módulos. Se imaginarmos os módulos como blocos que podem ser utilizados para construir coisas, no Angular, essa ação se traduziria em agrupar, exportar e esconder componentes, diretivas, pipes e serviços relacionados.

Esses módulos servem para formar uma aplicação e são chamados de NgModules. Cada aplicação é composta por pelo menos uma categoria dessa classificação, que é o módulo root da aplicação.

  • Imports: são arranjos com outros módulos, necessários para utilizar componentes declarados dentro da aplicação;
  • Declarations: recebe um arranjo de componentes, diretivas e pipes, que fazem parte do módulo;
  • Exports: Define o conjunto de componentes e pipes, disponíveis para outros módulos,
  • Providers: Faz a declaração dos serviços, onde, se um módulo for root, eles estarão disponíveis para toda a aplicação.

Two-way data binding

Essa é uma das principais características do framework. O termo pode ser definido como uma associação de dados bidirecional, onde a informação entra através da visualização ou template, passando instantaneamente para uma propriedade da classe do componente. O dado em questão já é exibido automaticamente em um elemento do DOM (Document Object Model) no template do componente.

A principal proposta do two-way data binding é automatizar a circulação de dados, facilitando a vida do desenvolvedor ao não exigir a criação de handlers para atualizar a visualização.

Dessa forma, quando um valor de um componente mudar, o próprio framework realizará a atualização na página. A ligação de dados bidirecional combina a entrada e saída em um único processo.

Por que aprender Angular?

Uns dos maiores atrativos do Angular são a praticidade no desenvolvimento e organização dos arquivos dentro do projeto. Os códigos são organizados em uma estrutura de simples entendimento e manutenção, já que as funcionalidades disponíveis permitem modularidade e quebram o código em pedaços.

O tempo economizado também é um diferencial, pois, no Angular, você não precisa utilizar editores de texto e criar códigos de configuração extensos dentro da aplicação.

Outro ponto interessante é a atualização da página em tempo real. Fazer alterações no código e observar as mudanças praticamente de modo instantâneo é um ponto positivo. O Angular permite isso, rodando todas as alterações do código ao mesmo tempo em que são atualizadas na página.

Lembrando que existem módulos Lazy-Load, indicados para grandes aplicações, devido à diminuição no tempo de inicialização.

Angular Ivy

Se você costuma acompanhar as evoluções do mercado de desenvolvimento e inovação, já deve ter ouvido falar em Angular Ivy. O Ivy se trata de uma nova geração de compilador e renderizador de componentes da plataforma de framework.

Ele é ideal para aplicações menores e mais rápidas, fazendo uma compilação mais ágil e inteligente. Aplicações em Angular podem demorar um tempo (vários segundos, às vezes) para ser compilada ser compilada. Com o Ivy, porém, isso é diferente.

Essa atualização trabalha com a ideia de localization. Ou seja, o Ivy vai compilar apenas os componentes que tiverem edições e forem necessários. Seguindo essa lógica, não será necessário realizar uma nova compilação da aplicação a todo momento. Dessa forma, o dia-a-dia de desenvolvimento fica muito mais facilitado.

O Angular Ivy é indicado até em aplicações grandes. Antes do dele, quanto maior a aplicação mais tempo era demandado. Com a nova atualização esse processo leva o tempo correspondente ao tamanho do componente que estiver sendo editado.

Neste conteúdo, explicamos um pouco sobre um framework poderoso. Para aqueles que nunca tiveram contato com a ferramenta, falamos sobre suas características e algumas especificações.

Para os que desejam aprender mais, discutimos a relevância do Angular, por que se aprofundar nele e suas principais funções, como módulos e componentes, onde ficou claro seu potencial e capacidade de desenvolvimento.

Artigo original escrito pela Totvs (https://www.totvs.com/blog/developers/angular/). Ele apresenta um overview muito bom dessa framework poderosa escrita pela Google e Microsoft para facilitar o desenvolvimento front-end. Ela é muito forte no mercado, principalmente, presente em muito bancos.

Compartilhe
Comentários (7)

MS

Marcia Silva - 26/06/2022 08:09

Excelente artigo! Parabéns por facilitar q compreensão deste conhecimento.

Estou começando meus estudos com Angular, e na verdade tinha outra ideia do que seria.


Contudo, ainda tenho lacunas de aprendizado. Alguém teria mais material sobre o que seria um código dinâmico e orientação a objetos?

Carlos Antonio
Carlos Antonio - 05/09/2021 19:09

Edson Gallo,


Muito bom seu artigo, e bem estruturado.

Qual sua visão em relação ao uso do React em relação ao Angular? Faz um artigo sobre esses dois FW, seria um bom tema.


Muito obrigado.

Thyago
Thyago - 25/06/2022 09:58

Lido.

Ester
Ester - 24/06/2022 16:02

Aprendendo bastante aqui obrigada

Igor Santos
Igor Santos - 14/06/2022 16:20

Edson Gallo,

parabéns pelo artigo bem gostos de ser ler, para quem esta começando em angular, parabéns pela didática passada

Ivan Cruz
Ivan Cruz - 17/09/2021 15:47

Parabéns Edson seu artigo ficou muito bom e justamente no momento que estou estudando Angular me ajudou muito ais uma vez parabéns!

🏂⚡️Eros M.Lima
🏂⚡️Eros M.Lima - 06/09/2021 09:48

Muito bom, parabéns!