Introdução
Angular é uma plataforma de desenvolvimento robusta para criação de aplicativos moveis e desktop conhecidos como SPA - Single-Page Application, aplicativos de uma única página.
Angular é construído em TypeScript. TypeScript é um superset de JavaScript com suporte em design-time seguro e fortemente tipado. O que significa que TypeScript é transpilado para JavaScript para serem executados pelos navegadores.
Em resumo, Angular é um framework JavaScript para construir aplicativos do lado do cliente, ou seja, os aplicativos são executados inteiramente no navegador do usuário.
Angular como framework é baseado em components e possui uma variedade de bibliotecas integradas com recursos de roteamento, Forms, Templates, Services, Dependency Injection.
NOTA: Por favor, me permita usar alguns termos em inglês neste artigo. Aqui eles estão em formato itálico para facilitar sua identificação. Acredito que muitos deles já são de uso diário na vida de um desenvolvedor. Caso contrário esta é uma excelente oportunidade para que você possa se familiarizar com termos usados na documentação oficial do Angular.
Angular é uma excelente opção se você está procurando uma plataforma de desenvolvimento para construir aplicativos pequenos, médios e grandes.
Angular se beneficia pela contribuição de mais de 1,7 milhão de desenvolvedores com atualizações frequentes e simples de serem executadas, desta forma, você desenvolvedor, mantem suas aplicações sempre atualizadas e seguras.
Seu framework é baseado em components que permiti construir aplicativos web escaláveis, promovendo assim a modularidade e o reaproveitamento.
Back to TopConceitos Principais Angular
Compreender os conceitos principais do Angular tem como objetivo fornecer entendimento básico que irá guia-lo da melhor maneira de como construir aplicativos Angular.
Entender conceitos como: Components, Templates, Services e Dependency Injection são fundamentais para que você aproveite ao máximo os recursos que este framework possui e tenha, assim, sucesso na construção de aplicativos escaláveis e de alta performance.
Estes conceitos estão fortemente relacionados a Design Patterns como:
- Single Responsibility Principle - SRP;
- Don't repeat yourself - DRY;
- Singleton Services.
Components
Components são blocos de construção básicos do framework Angular para construir aplicativos. Um aplicativo pode conter vários components.
Pense em uma tela de cadastro de produto onde você tem, no centro da tela, o forms para criar um novo produto e ao lado da tela o sidebar que você usa para navegar pelo seu aplicativo.
Então, o forms para criar um novo o produto é um component, o sidebar e outro component e cada item de navegação do sidebar são outros components,. Isso vai ficar mais claro na demo que faremos na seção Projetos, onde vamos construir nossso primeiro Aplicativo em Angular.
Um component possui:
- 1 - Uma classe TypeScript que possui o decorator @Component(). E é justamente este decorator que define a classe como um component que cuida essencialmente do comportamento;
- 2 - Um template HTML que renderiza no browser a página/tela que você visualiza;
- 3 - Um selector CSS que define o estilo da página/tela que você visualiza;
Em resumo, para simplificar seu entendimento por hora, um component possui 3 arquivos separados, cada um com responsabilidade única e especifica: comportamento, template e estilo.
Essa separação de responsabilidades esta alinha ao princípio da responsabilidade única defina pelo Design Patterns como Single Responsibility Principle – SRP.
Templates
Cada component possui um template associado. Este template é escrito em HTML.
Angular estende a sintaxe HTML com objetivo de fornecer novas funcionalidades como: vinculação e formatação de dados, compartilhar dados e manipulação de eventos.
Muitas dessas funcionalidades são adicionadas ao Template através de Directives. As directives tem a capacidade de modificar dinamicamente a estrutura do DOM.
NOTA: Directives são classes Angular que adicionam comportamento adicional e personalizado a elementos no DOM.
Services
Services em Angular são classes com propósito estreito e bem definido que deve fazer algo especifico e fazê-lo bem.
Mais uma vez, o framework Angular recomenda o uso Design Patterns, SRP - Single Responsibility Principle – SRP em suas Service Class quando define que um service deve ter uma responsabilidade única e específica.
Services englobam uma ampla categoria de funcionalidades como buscar dados do produto no servidor back-end e validar as credenciais do usuário no momento do Login entre outras funcionalidades.
Service Class é uma excelente opção quando precisamos criar funcionalidades que devem ser independentes dos Components. Estas funcionalidades não devem ser confundidas com as responsabilidades dos Components.
Angular recomenda que idealmente a responsabilidade do Component é cuidar da experiência do usuário, ou seja, deve ser responsável pela exibição de “dados e a lógica do aplicativo”.
Assim podemos concluir que Angular recomenda que Service Class implementam funcionalidades que não são responsabilidades dos Components.
Ao seguir estas especificações, Angular reforça o conceito de modularidade onde cada parte de um todo tem sua responsabilidade especifica e esta não se confunde com outra.
Outro benefício que ao distinguir components de services podemos, com isso, reutilizar estes services em outros components.
Em resumo quando um component precisa realizar uma tarefa de buscar dados do produto no servidor back-end o mesmo faz uso de uma Service Class através da Dependency Injection.
Para que uma Service Class esteja disponível para ser injetada como Dependency Injection em um ou mais components ela precisa conter o decorator @Injectable()
Dependency Injection
Dependency Injection é um Design Pattern que faz parte do framework Angular.
NOTA: Reconheço que este tópico pode ser um pouco confuso, principalmente se você está iniciando em programação ou se esse é seu primeiro contato com o conceito Dependency Injection - Design Pattern. Isso é normal. Não desista, siga em frente!
Angular cria um injetor em todo aplicativo durante a inicialização do aplicativo de forma que quando uma Service Class e injetada em um component ele pode fazer uso das funcionalidades deste Service Class, sem criar uma dependência direta com a Service Class.
Na seção Projeto vamos construir nosso primeiro aplicativo Angular onde vamos ter um component responsável pela criação de um novo produto e nossa Service Class responsável em fazer a comunicação com nosso back-end e acessar o banco de dados para salvar os dados deste novo produto.
Lembre-se, nosso component tem uma única responsabilidade, cuidar para que sua experiência como usuário do sistema seja impecável. Para que isso aconteça a exibição da tela que contém o forms onde você inclui os dados para criar um novo produto deve ser agradável, intuitiva e funcional.
Agora nossa Service Class tem uma única responsabilidade, acessar o banco de dados para salvar os dados deste novo produto, conforme veremos em nosso aplicativo de exemplo na seção Projetos.
Nossa Service Class é injetada por dependência em nosso component no constructor.
Desta forma podemos fazer uso da funcionalidade Create de nossa Service Class para criar um novo produto.
A mágica da Dependency Injection acontece justamente ai nosso component faz uso da funcionalidade Create de nossa Service Class sem depender diretamente de nossa Service Class.
Ao usarmos os recursos da Dependency Injection Dependency Injection podemos seguir boas práticas recomendadas pelo Angular, ou seja, criar e manter components e services em classes separadas.
Seguir estas recomendações nos permite escrever um código mais claro, testável, flexível e sua manutenção será muito tranquila e sem surpresas.
Angular CLI
Angular CLI é uma ferramenta de interface por linha de comando que podemos fazer uso para inicializar, desenvolver e manter aplicativos Angular.
A documentção oficial do Angular recomenda fortemente o uso do Angular Cli para criação e manutenção de aplicativos Angular. Com Angular CLI, podemos criar nossos Components, Services, Directives de maneira rápida e segura.
Em nosso aplicativo de exemplo na seção Projetos vamos usar o Angular CLI para criação, manutenção e execução do aplicativo.
Libraries
Angular é um poderoso framework e possui diversas Libraries que facilita o trabalho dos desenvolvedores na criação de aplicaivos Angular.
Algumas destas são: Angular Router, Angular Forms, Angular HttpClient, Angular Animations
As Libraries Angular expandem a funcionalidade no desenvolvimento dos aplicativos.
Referência
Siga a documentação oficial do Angular Angular IO
Próximos Passos
Muito bom que você chegou até aqui, fico feliz que tenha gostado do artigo. Sugiro como próximo passo que siga o link Como criar um App Angular e acompanhe passo a passo como criar seu primeiro aplicativo em Angular.