Para adquirir este entendimento \u00e9 necess\u00e1rio ter uma vis\u00e3o geral <\/strong>da arquitetura dessa tecnologia.<\/p>\r\n\r\n\r\n\r\n Pensando nisso, vamos demonstrar neste artigo uma vis\u00e3o geral da arquitetura do Angular<\/strong> e, assim, possibilitar aos leitores a oportunidade de entender melhor como funciona este fant\u00e1stico framework<\/em><\/a><\/strong>.<\/p>\r\n\r\n\r\n\r\n D\u00e1 uma olhada no que voc\u00ea vai ler hoje:<\/p>\r\n\r\n\r\n\r\n Angular <\/strong>\u00e9 um framework<\/em> para desenvolver aplica\u00e7\u00f5es em diversas plataformas, mantido e desenvolvido pela Google<\/strong>.<\/p>\r\n\r\n\r\n\r\n Voc\u00ea pode reutilizar o c\u00f3digo escrito para web, web mobile, mobile native e desktop native!<\/p>\r\n\r\n\r\n\r\n Ele vem com um conjunto de bibliotecas<\/strong> poderosas que podemos importar, possibilitando construir aplica\u00e7\u00f5es com uma qualidade e produtividade surpreendente.<\/p>\r\n\r\n\r\n\r\n Al\u00e9m disso, o Angular coloca voc\u00ea no controle da escalabilidade,\u00a0atendendo aos enormes requisitos de dados construindo modelos em RxJS, Immutable.js ou outro push-model.<\/p>\r\n\r\n\r\n\r\n Ele \u00e9 uma reescritura completa do antigo Angular<\/em>JS e foi escrito em TypeScript<\/a><\/strong>.<\/p>\r\n\r\n\r\n\r\n Veja quais s\u00e3o os Frameworks e Bibliotecas de Javascript<\/a> mais importantes!<\/p>\r\n<\/blockquote>\r\n\r\n\r\n\r\n Para in\u00edcio de conversa, o AngularJS \u00e9 um framework<\/strong> a parte. Lan\u00e7ado em 2009, ele \u00e9 a vers\u00e3o 1.0 do conceito que vemos hoje.<\/p>\r\n\r\n\r\n\r\n Com o passar dos anos e a evolu\u00e7\u00e3o das tecnologias Web, houve a necessidade de evoluir o AngularJS como era conhecido.<\/p>\r\n\r\n\r\n\r\n Por n\u00e3o conseguir mais acompanhar com performance as novidades como Javascript 2015, HTML 5, o CSS 3, etc., surgiu a necessidade de reescrever (criar outro) framework por completo.<\/p>\r\n\r\n\r\n\r\n Em 2016, saiu o Angular V2, um outro framework<\/strong> totalmente reescrito e adaptado. O Typescript foi escolhido por ser um superset de Javascript, implementando mais possibilidades para a linguagem.<\/p>\r\n\r\n\r\n\r\n Esse \u00e9 o Angular que estamos falando aqui.<\/p>\r\n\r\n\r\n\r\n As diferen\u00e7as mais not\u00e1veis s\u00e3o:<\/strong><\/p>\r\n\r\n\r\n\r\n A arquitetura do Angular<\/strong> permite organizar a aplica\u00e7\u00e3o por m\u00f3dulos atrav\u00e9s dos NgModules,<\/em> que fornecem um contexto para os componentes serem compilados.<\/p>\r\n\r\n\r\n\r\n Uma aplica\u00e7\u00e3o sempre tem ao menos um m\u00f3dulo raiz<\/strong> que habilita a inicializa\u00e7\u00e3o e, normalmente, possui outros m\u00f3dulos de bibliotecas.\u00a0<\/p>\r\n\r\n\r\n\r\n Os componentes deliberam as visualiza\u00e7\u00f5es \u2014 que s\u00e3o conglomerados de elementos e funcionalidades de tela \u2014 que o Angular modifica de acordo com a l\u00f3gica e os dados da aplica\u00e7\u00e3o.<\/p>\r\n\r\n\r\n\r\n Esses componentes usam servi\u00e7os que fornecem funcionalidades espec\u00edficas e que s\u00e3o indiretamente relacionadas a essas visualiza\u00e7\u00f5es.<\/p>\r\n\r\n\r\n\r\n Os provedores de servi\u00e7os<\/strong> podem ser injetados nos componentes como depend\u00eancias, tornando seu c\u00f3digo modular e reutiliz\u00e1vel.<\/p>\r\n\r\n\r\n\r\n Servi\u00e7os e componentes s\u00e3o simples classes com decoradores, que definem o tipo e fornecem metadados para informar o Angular como us\u00e1-los.<\/p>\r\n\r\n\r\n\r\n Tem como objetivo declarar e agrupar tudo que criamos no Angular. Existem duas estrutura principais, que s\u00e3o: declarations<\/em> e o providers. <\/em><\/p>\r\n\r\n\r\n\r\n Declarations<\/strong> \u00e9 onde declaramos os itens que iremos utilizar nesse m\u00f3dulo, como por exemplo componentes e diretivas, j\u00e1 nos Providers<\/strong> informamos os servi\u00e7os.<\/p>\r\n\r\n\r\n\r\n Assim como m\u00f3dulos JavaScript<\/a><\/strong>, o NgModules<\/em> tamb\u00e9m pode importar funcionalidades de outros NgModules<\/em> e permitir que suas pr\u00f3prias funcionalidades tamb\u00e9m sejam exportadas.<\/p>\r\n\r\n\r\n\r\n Um exemplo claro disso \u00e9 que para usar o servi\u00e7o de roteador no seu app<\/em> basta importar o RouterNgModule<\/em>.<\/p>\r\n\r\n\r\n\r\n React vs Vue vs Angular<\/a>: qual escolher?<\/p>\r\n<\/blockquote>\r\n\r\n\r\n\r\n A maior parte do desenvolvimento quando se utiliza o framework Angular<\/em> \u00e9 feito nos componentes.<\/p>\r\n\r\n\r\n\r\n Cada componente define uma classe<\/strong>, que cont\u00e9m dados e l\u00f3gicas do aplicativo e est\u00e1 sempre associada a um template HTML<\/em>, onde s\u00e3o definidas as visualiza\u00e7\u00f5es deste componente.<\/p>\r\n\r\n\r\n\r\n O decorator @Component() <\/em>identifica a classe imediatamente como um componente e oferece o modelo e os metadados espec\u00edficos dele.<\/p>\r\n\r\n\r\n\r\n Os metadados configuram, por exemplo, como o componente pode ser referenciado no HTML<\/strong> e tamb\u00e9m quais os servi\u00e7os devem ser utilizados.<\/p>\r\n\r\n\r\n\r\n As diretivas s\u00e3o como marcadores no elemento DOM que comunicam ao Angular<\/strong> para incluir um comportamento espec\u00edfico.<\/p>\r\n\r\n\r\n\r\n Existem tr\u00eas tipo de diretivas no Angular, que s\u00e3o: Diretivas de atributos, Diretivas estruturais e\u00a0Componentes.<\/p>\r\n\r\n\r\n\r\n Diretivas de atributos<\/strong>: Alteram a apar\u00eancia ou o comportamento de um elemento, componente ou outra diretiva, como por exemplo, NgClass e NgStyle<\/em>.<\/p>\r\n\r\n\r\n\r\n Diretivas estruturais<\/strong>: Modificam o layout<\/em> adicionando ou removendo elementos do DOM, como por exemplo, NgIf <\/em>e NgFor.<\/em><\/p>\r\n\r\n\r\n\r\n Componentes<\/strong>: S\u00e3o diretivas com um modelo.<\/p>\r\n\r\n\r\n\r\n A interpola\u00e7\u00e3o \u00e9 usada para exibir uma propriedade do componente<\/strong> no HTML.<\/p>\r\n\r\n\r\n\r\n Sua sintaxe s\u00e3o chaves duplas e podemos exibir qualquer tipo de dados, por exemplo, n\u00fameros, datas, arrays<\/em> e etc…<\/p>\r\n\r\n\r\n\r\n O DI \u00e9 conectado \u00e0 estrutura Angular<\/strong> e usado em todos os lugares para fornecer aos componentes os servi\u00e7os (ou outras coisas) que eles precisam.<\/p>\r\n\r\n\r\n\r\n Componentes consomem servi\u00e7os. Isto \u00e9, voc\u00ea pode injetar<\/em> um servi\u00e7o em um componente, dando acesso ao componente para essa classe de servi\u00e7o.<\/p>\r\n\r\n\r\n\r\n Para realizar isso, usamos o providedIn<\/em>, que \u00e9 uma propriedade do decorador @Injectable<\/em>.<\/p>\r\n\r\n\r\n\r\n A CLI Angular<\/a><\/strong> \u00e9 uma ferramenta de interface da linha de comandos que voc\u00ea usa para inicializar, desenvolver e manter aplicativos Angular<\/strong>.<\/p>\r\n\r\n\r\n\r\n Nesse sentido, ela \u00e9 a forma mais f\u00e1cil, r\u00e1pida e recomendada de se iniciar a sua aplica\u00e7\u00e3o em Angular, al\u00e9m de fazer a manuten\u00e7\u00e3o em projetos que recebe.<\/p>\r\n\r\n\r\n\r\n Para voc\u00ea ter no\u00e7\u00e3o, alguns exemplos de comandos abaixo deixam claro como o uso de Angular CLI facilita a vida do programador:<\/p>\r\n\r\n\r\n\r\n Voc\u00ea pode usar a ferramenta diretamente em um shell<\/em> de comando ou indiretamente por meio de uma interface do usu\u00e1rio interativa, como o Angular Console<\/strong>.<\/p>\r\n\r\n\r\n\r\nO que \u00e9 o framework Angular?<\/strong><\/h2>\r\n\r\n\r\n\r\n
![\"tela](\"https:\/\/geekblogti.wpengine.com\/wp-content\/uploads\/2019\/10\/o-que-e-o-angular-1024x576.jpg\")
<\/figure>\r\n\r\n\r\n\r\n\r\n
Qual a diferen\u00e7a entre Angular e AngularJS?<\/h2>\r\n\r\n\r\n\r\n
\r\n
![\"\"](\"https:\/\/geekblogti.wpengine.com\/wp-content\/uploads\/2021\/02\/cta3-angular.png\")
<\/a><\/figure>\r\n\r\n\r\n\r\nA arquitetura do framework Angular<\/h2>\r\n\r\n\r\n\r\n
![\"tela](\"https:\/\/geekblogti.wpengine.com\/wp-content\/uploads\/2019\/10\/arquitetura-do-angular-1024x576.jpg\")
<\/figure>\r\n\r\n\r\n\r\n![\"grafico\"](\"https:\/\/geekblogti.wpengine.com\/wp-content\/uploads\/2019\/10\/arquitetura-angular.jpg\")
<\/figure>\r\n\r\n\r\n\r\nNgModules<\/strong><\/h3>\r\n\r\n\r\n\r\n
@NgModule({<\/em>\r\n\u00a0\u00a0declarations: [ AppComponent],<\/em>\r\n\u00a0providers: [ AuthClientService\u00a0 ],<\/em>\r\n})<\/em><\/pre>\r\n\r\n\r\n\r\n @NgModule({<\/em>\r\n\u00a0\u00a0declarations: [ AppComponent ],<\/em>\r\n\u00a0\u00a0imports: [ AppRoutingModule ],<\/em>\r\n\u00a0\u00a0})<\/em><\/pre>\r\n\r\n\r\n\r\n\r\n
Components<\/strong><\/h3>\r\n\r\n\r\n\r\n
@Component({<\/em>\r\n\u00a0\u00a0selector: 'app-root',<\/em>\r\n\u00a0\u00a0templateUrl: '.\/app.component.html',<\/em>\r\n\u00a0\u00a0styleUrls: ['.\/app.component.css'],<\/em>\r\n\u00a0\u00a0providers: [ HeroService ]<\/em>\r\n})<\/em> <\/pre>\r\n\r\n\r\n\r\nDirectives<\/strong><\/h3>\r\n\r\n\r\n\r\n
![\"\"](\"https:\/\/geekblogti.wpengine.com\/wp-content\/uploads\/2021\/02\/cta1-angular.png\")
<\/a><\/figure>\r\n\r\n\r\n\r\nInterpolation<\/strong><\/h3>\r\n\r\n\r\n\r\n
Componente<\/strong><\/h4>\r\n\r\n\r\n\r\n
export class AppComponent {<\/em>\r\n\u00a0\u00a0propriedade = \"Hello!!!\"<\/em>\r\n}<\/em><\/pre>\r\n\r\n\r\n\r\nHtml<\/strong><\/h4>\r\n\r\n\r\n\r\n
<h1>{{propriedade}}<\/h1><\/em> <\/pre>\r\n\r\n\r\n\r\nDependency injection (DI)<\/strong><\/h3>\r\n\r\n\r\n\r\n
@Injetable({<\/em>\r\n providedIn: SomeModule<\/em>\r\n})<\/em>\r\n<\/pre>\r\n\r\n\r\n\r\nAngular CLI<\/strong><\/h2>\r\n\r\n\r\n\r\n
\r\n\r\n
\r\n ng build<\/strong><\/td>\r\n Compila um aplicativo Angular em um diret\u00f3rio de sa\u00edda.<\/td>\r\n<\/tr>\r\n \r\n ng serve<\/strong><\/td>\r\n Cria um servidor local HTTP para testar seu aplicativo, reconstruindo as altera\u00e7\u00f5es do arquivo.<\/td>\r\n<\/tr>\r\n \r\n ng generate<\/strong><\/td>\r\n Gera ou modifica arquivos com base em um esquema.<\/td>\r\n<\/tr>\r\n \r\n ng test<\/strong><\/td>\r\n Executa testes de unidade em um determinado projeto.<\/td>\r\n<\/tr>\r\n \r\n ng e2e<\/strong><\/td>\r\n Constr\u00f3i e fornece um aplicativo Angular e, em seguida, executa testes de ponta a ponta.<\/td>\r\n<\/tr>\r\n<\/tbody>\r\n<\/table>\r\n<\/figure>\r\n\r\n\r\n\r\n \r\n
![\"tela](\"https:\/\/geekblogti.wpengine.com\/wp-content\/uploads\/2019\/10\/consideracoes-finais-1024x576.jpg\")
<\/figure>\r\n\r\n\r\n\r\n