O Framework Angular possui alguns conceitos básicos que orientam o desenvolvimento de aplicações a partir dele.
Esses conceitos são utilizados desde a primeira versão, porém, com o avanço do desenvolvimento, eles precisaram ser melhorados.
O primeiro a ser falado é o propósito do Framework: Single Page Applications, ou aplicações de páginas simples, o melhor traduzido, únicas. Esse modelo, desenrola toda a interação da aplicação a partir de uma página central que funciona como um “hub”, provendo acesso via links e fluxos naturais das ações, a todos os outros pedaços da aplicação. Isso é muito importante, porque tudo vem para atender a esse propósito, E se você não está interessado em fazer aplicações SPA, talvez não seja tão interessante trabalhar com o Angular.
Esse objetivo era muito claro na primeira versão, pois, o código tinha uma tendência de evidenciar essas características. Na segunda versão em diante Angular ganhou uma base tecnológica de suporte muito ampla. Temos npm, node.js, typescript, isso deu uma dimensão muito maior ao potencial do framework, que agora está muito mais robusto e cheio de ferramental do que antes.
Vamos começar a falar de alguns dos conceitos mais importantes do Angular. Para fins de listagem, os conceitos que iremos falar aqui são: módulo, componente, serviço e rotas.
Começando pelos módulos que sempre existiram desde a primeira versão do Angular. Eles representam as peças modulares de uma aplicação web. Por peças modulares devemos entender blocos inteiros de funcionalidades que estão conectadas por um contexto semântico. Imagine uma aplicação que vai fazer a gestão da folha de pagamento: uma grande parte dessa aplicação será a gestão dos seus usuários, que para ser realizada vai precisar de diversos elementos do Angular construídos para resolver esse problema, o que caracteriza um módulo de uma aplicação Angular. Por outro lado, no mesmo código faz sentido termos um conjunto fechado de funcionalidades que serão responsáveis pelos cálculos de tributação, e isso ficará separado em um módulo para ser reutilizado sempre que for preciso, nesta ou em outra aplicação.
Módulos vão ajudar a separar os grupos de funcionalidades comuns, e favorecer o reuso. É importante que se diga que o design do Angular é projetado para favorecer reuso em diversos aspectos.
Por conta dessa característica forte de reuso, os módulos serão os grandes containers de outros elementos do framework, Tais quais componentes, diretivas, serviços, pipes, rotas, e também podem utilizar para suas funções, referências a elementos de outros módulos.
Toda aplicação feita dessa maneira precisa ter um único módulo raiz. outras funcionalidades e bibliotecas importadas para funcionar em conjunto com essa arquitetura terão de ser módulos importados e configurados normalmente no módulo raiz que representa a aplicação inteira como um todo.
Como informação final, não deve ser confundido com os módulos de JavaScript que tem uma intenção completamente diferente. estes são para separar os blocos reusáveis de código puro JavaScript, e como iremos ver nos próximos elementos, módulo angular tem bem mais do que código JavaScript/TypeScript
Esse modelo trouxe um cenário de escalabilidade fora do comum para o cenário da época, pois o frontend se responsabiliza por toda o processamento de telas, deixando o backend livre para procurar resolver os problemas de negócios, concentrando nele somente a camada Model do MVC.
Esses conceitos são utilizados desde a primeira versão, porém, com o avanço do desenvolvimento, eles precisaram ser melhorados.
O primeiro a ser falado é o propósito do Framework: Single Page Applications, ou aplicações de páginas simples, o melhor traduzido, únicas. Esse modelo, desenrola toda a interação da aplicação a partir de uma página central que funciona como um “hub”, provendo acesso via links e fluxos naturais das ações, a todos os outros pedaços da aplicação. Isso é muito importante, porque tudo vem para atender a esse propósito, E se você não está interessado em fazer aplicações SPA, talvez não seja tão interessante trabalhar com o Angular.
Esse objetivo era muito claro na primeira versão, pois, o código tinha uma tendência de evidenciar essas características. Na segunda versão em diante Angular ganhou uma base tecnológica de suporte muito ampla. Temos npm, node.js, typescript, isso deu uma dimensão muito maior ao potencial do framework, que agora está muito mais robusto e cheio de ferramental do que antes.
Vamos começar a falar de alguns dos conceitos mais importantes do Angular. Para fins de listagem, os conceitos que iremos falar aqui são: módulo, componente, serviço e rotas.
Módulos
Começando pelos módulos que sempre existiram desde a primeira versão do Angular. Eles representam as peças modulares de uma aplicação web. Por peças modulares devemos entender blocos inteiros de funcionalidades que estão conectadas por um contexto semântico. Imagine uma aplicação que vai fazer a gestão da folha de pagamento: uma grande parte dessa aplicação será a gestão dos seus usuários, que para ser realizada vai precisar de diversos elementos do Angular construídos para resolver esse problema, o que caracteriza um módulo de uma aplicação Angular. Por outro lado, no mesmo código faz sentido termos um conjunto fechado de funcionalidades que serão responsáveis pelos cálculos de tributação, e isso ficará separado em um módulo para ser reutilizado sempre que for preciso, nesta ou em outra aplicação.
Módulos vão ajudar a separar os grupos de funcionalidades comuns, e favorecer o reuso. É importante que se diga que o design do Angular é projetado para favorecer reuso em diversos aspectos.
Por conta dessa característica forte de reuso, os módulos serão os grandes containers de outros elementos do framework, Tais quais componentes, diretivas, serviços, pipes, rotas, e também podem utilizar para suas funções, referências a elementos de outros módulos.
Toda aplicação feita dessa maneira precisa ter um único módulo raiz. outras funcionalidades e bibliotecas importadas para funcionar em conjunto com essa arquitetura terão de ser módulos importados e configurados normalmente no módulo raiz que representa a aplicação inteira como um todo.
Como informação final, não deve ser confundido com os módulos de JavaScript que tem uma intenção completamente diferente. estes são para separar os blocos reusáveis de código puro JavaScript, e como iremos ver nos próximos elementos, módulo angular tem bem mais do que código JavaScript/TypeScript
Componentes
Quando no Angular 1, havia o conceito de controller. Lá, um objeto JavaScript realiza a lógica da interface, e a comunicação com um backend via serviços REST. Isso já mostrava um conceito inovador pro momento, tornando o código frontend JavaScript como o controller da tua aplicação (Controller no conceito de MVC clássico, como foi cunhado na época do Smalltalk, quando ele responsabiliza-se por verificar o que vem do Model para a View e transmitir corretamente as mensagens da View para o Model).Esse modelo trouxe um cenário de escalabilidade fora do comum para o cenário da época, pois o frontend se responsabiliza por toda o processamento de telas, deixando o backend livre para procurar resolver os problemas de negócios, concentrando nele somente a camada Model do MVC.
Por si só, isso já é bem interessante, mas a Web evoluiu, e surgiram os Web Components, que são um aglomerado de HTML CSS e JS que tem uma função específica na tela da aplicação. Quando da evolução da versão, o framework agregou a idéia de componentes aos controllers do Angular1 e agora temos os Components, que são objetos TypeScript que concentram as duas funções explicadas: criar um componente de tela que concentra sua lógica de apresentação e comunicação com o backend, atuando como o C do MVC.
Componentes podem (devem) ser reutilizados, mas agregam-se a módulos. Todo módulo tem um componente raiz que é o início da renderização dele. Cada componente é composto por um arquivo HTML, outro CSS, outro TS (TypeScript) que serão (quando transpilados) fundidos em prol da renderização e processamento de elementos visíveis na aplicação.
Serviços
Componentes tem muitas responsabilidades, o que faz com que ele tenha a tendência de agregar muito código fonte. Isso não é bom para o reuso, e por isso, uma parte dessas responsabilidades precisa ser modularizada. É nesse contexto em que os serviços entram em cena.
Serviços serão classes TypeScript que possuem algum trabalho específico, e que são carregadas nos componentes via injeção de dependência (by the way, isso dá mais uma conversa bem grande, pra outro post).
Suponha que você tem de desenvolver um componente que lê um arquivo XML, converte-o para JSON e depois monta um objeto em um formato específico para facilitar a sua manipulação. Esse trabalho faz todo o sentido de ser posto em um serviço, tendo no componente somente as chamadas aos métodos desse serviço.
Rotas
Foi falado que o Angular teve em mente a construção de SPA’s. Para atingir esse objetivo, uma página principal é montada, e uma região dela tem seu conteúdo trocado pelo conteúdo de outra página, que está associada a outro Componente (controller, no caso do Angular1). Essa sequência de caminhos para páginas que serão carregadas e seus elementos JavaScript/TypeScript que os gerenciam é a composição básica de uma rota.
Serviços serão classes TypeScript que possuem algum trabalho específico, e que são carregadas nos componentes via injeção de dependência (by the way, isso dá mais uma conversa bem grande, pra outro post).
Suponha que você tem de desenvolver um componente que lê um arquivo XML, converte-o para JSON e depois monta um objeto em um formato específico para facilitar a sua manipulação. Esse trabalho faz todo o sentido de ser posto em um serviço, tendo no componente somente as chamadas aos métodos desse serviço.
Rotas
Foi falado que o Angular teve em mente a construção de SPA’s. Para atingir esse objetivo, uma página principal é montada, e uma região dela tem seu conteúdo trocado pelo conteúdo de outra página, que está associada a outro Componente (controller, no caso do Angular1). Essa sequência de caminhos para páginas que serão carregadas e seus elementos JavaScript/TypeScript que os gerenciam é a composição básica de uma rota.
