{"id":17403,"date":"2019-11-29T11:12:53","date_gmt":"2019-11-29T13:12:53","guid":{"rendered":"https:\/\/blog.hostinger.io\/br-tutoriais\/?p=17403"},"modified":"2024-12-17T11:45:16","modified_gmt":"2024-12-17T14:45:16","slug":"o-que-e-angular","status":"publish","type":"post","link":"\/br\/tutoriais\/o-que-e-angular","title":{"rendered":"O que \u00e9 Angular: o framework que transformar\u00e1 seu c\u00f3digo"},"content":{"rendered":"<p>Se voc&ecirc; curte desenvolvimento de software, provavelmente j&aacute; ouviu falar sobre o <strong>Angular<\/strong>. Ele &eacute; um dos frameworks <strong>JavaScript<\/strong> mais populares entre os desenvolvedores que usam a ferramenta para desenvolver e construir sites din&acirc;micos. Neste artigo, voc&ecirc; vai aprender sobre <strong>o que &eacute; Angular<\/strong>, como ele surgiu e as vantagens de us&aacute;-lo no seu dia a dia.<\/p><p class=\"has-text-align-center\"><a href=\"https:\/\/assets.hostinger.com\/content\/BR-Web-Development-Glossary-for-Beginners.pdf\" target=\"_blank\" rel=\"noreferrer noopener\">Baixar Gloss&aacute;rio Completo de Desenvolvimento Web<\/a><\/p><p>\n\n\n\n\n\n\n<\/p><h2 class=\"wp-block-heading\" id=\"h-o-que-e-angularjs\"><strong>O Que &eacute; AngularJS?<\/strong><\/h2><p>O AngularJS &eacute; um <em>framework<\/em> de c&oacute;digo aberto usado para construir aplicativos para web baseados em uma &uacute;nica p&aacute;gina din&acirc;mica. Os desenvolvedores tamb&eacute;m usam essa ferramenta para criar menus animados para p&aacute;ginas de internet baseadas em <a href=\"\/br\/tutoriais\/o-que-e-html-conceitos-basicos\">HTML<\/a>.&nbsp;&nbsp;&nbsp;&nbsp;<\/p><p>O <em>framework <\/em>&eacute; um conceito de Misko Hevery e Adam Abrons, engenheiros da <a href=\"https:\/\/www.google.com.br\/\" target=\"_blank\" rel=\"noopener\">Google<\/a>. A empresa lan&ccedil;ou a primeira vers&atilde;o do AngularJS em 2012 e tem mantido o servi&ccedil;o ativo desde ent&atilde;o com atualiza&ccedil;&otilde;es e melhorias.&nbsp;<\/p><p>Antes do AngularJS aparecer, at&eacute; existiam outras formas de criar p&aacute;ginas din&acirc;micas. Por&eacute;m, elas n&atilde;o eram t&atilde;o convenientes quanto usar o <em>framework<\/em>.&nbsp;<\/p><p>O AngularJS usa a arquitetura <a href=\"https:\/\/pt.wikipedia.org\/wiki\/MVC\" target=\"_blank\" rel=\"noopener\">Model-View-Controller<\/a> (MCV), que &eacute; usado no desenvolvimento de apps para a internet. Esse tipo de arquitetura consiste em:<\/p><ul class=\"wp-block-list\">\n<li><strong>Model <\/strong>(Modelo) &ndash; a estrutura de dados que gerencia a informa&ccedil;&atilde;o e recebe comandos do controle.<\/li>\n\n\n\n<li><strong>View <\/strong>(Vis&atilde;o) &ndash; a representa&ccedil;&atilde;o da informa&ccedil;&atilde;o.<\/li>\n\n\n\n<li><strong>Controller <\/strong>(Controle) &ndash; responde aos comandos e interage com o modelo.<\/li>\n<\/ul><p>No contexto do AngularJS, o modelo &eacute; o <em>framework<\/em>, enquanto a vis&atilde;o &eacute; o HTML e o controle &eacute; o JavaScript. Assim, o AngularJS tamb&eacute;m pode ser chamado de framework Angular ou Angular Java.&nbsp;<\/p><p>Descomplicando as coisas:<\/p><ul class=\"wp-block-list\">\n<li>O AngularJS combina JavaScript e HTML;<\/li>\n\n\n\n<li>O JavaScript aceita o comando do usu&aacute;rio e o envia para o AngularJS;<\/li>\n\n\n\n<li>O AngularJS usa o comando recebido para modificar o HTML.<\/li>\n<\/ul><p>Com o framework combinando JavaScript e HTML, o c&oacute;digo (a programa&ccedil;&atilde;o) entre eles &eacute; sincronizado.&nbsp;<\/p><p>Esse mecanismo torna o trabalho dos desenvolvedores mais f&aacute;cil porque ele reduz a quantidade de c&oacute;digo necess&aacute;ria para escrever uma sintaxe e criar as p&aacute;ginas din&acirc;micas.&nbsp;<\/p><h2 class=\"wp-block-heading\" id=\"h-as-vantagens-do-angularjs\"><strong>As Vantagens do AngularJS<\/strong><\/h2><p>O AngularJS &eacute; o queridinho dos desenvolvedores por algumas raz&otilde;es. S&atilde;o elas:<\/p><ul class=\"rich-text editor-rich-text__editable block-editor-rich-text__editable is-selected\" role=\"textbox\" aria-label=\"Escrever lista...\">\n<li><strong data-rich-text-format-boundary=\"true\">Combina&ccedil;&atilde;o de Dados Bidirecional<\/strong> &ndash; Como a arquitetura do AngularJS combina JavaScript e HTML, os c&oacute;digos de ambos j&aacute; est&atilde;o sincronizados. Por isso, o framework poupa muito tempo dos desenvolvedores na hora da cria&ccedil;&atilde;o de aplica&ccedil;&otilde;es e sites.<\/li>\n<li><strong>Diretivas<\/strong> &ndash; O <em>framework<\/em> estende as funcionalidades do HTML com diretivas. Para ativar essas diretivas, os desenvolvedores adicionam o prefixo <strong>ng-<\/strong> nos atributos do HTML. Voc&ecirc; pode acompanhar uma listagem de diretivas <a href=\"https:\/\/www.w3schools.com\/angular\/angular_ref_directives.asp\" target=\"_blank\" rel=\"noopener\">aqui<\/a>. Abaixo est&aacute; um exemplo do uso de diretivas.<br data-rich-text-line-break=\"true\">\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"null\">&lt;!DOCTYPE html&gt;\n&lt;html&gt;\n&lt;script src=\"https:\/\/ajax.googleapis.com\/ajax\/libs\/angularjs\/1.6.9\/angular.min.js\"&gt;&lt;\/script&gt;\n&lt;body&gt;\n&lt;div ng-app=\"\" ng-init=\"age='20'\"&gt;\n&lt;p&gt;Input your age:&lt;\/p&gt;\n&lt;p&gt;Age: &lt;input type=\"text\" ng-model=\"age\"&gt;&lt;\/p&gt;\n&lt;p&gt;You wrote: {{ age }}&lt;\/p&gt;\n&lt;\/div&gt;\n&lt;\/body&gt;\n&lt;\/html&gt;\n&lt;!DOCTYPE html&gt;\n&lt;html&gt;\n&lt;script src=\"https:\/\/ajax.googleapis.com\/ajax\/libs\/angularjs\/1.6.9\/angular.min.js\"&gt;&lt;\/script&gt;\n&lt;body&gt;\n&lt;div ng-app=\"\" ng-init=\"age='20'\"&gt;\n&lt;p&gt;Input your age:&lt;\/p&gt;\n&lt;p&gt;Age: &lt;input type=\"text\" ng-model=\"age\"&gt;&lt;\/p&gt;\n&lt;p&gt;You wrote: {{ age }}&lt;\/p&gt;\n&lt;\/div&gt;\n&lt;\/body&gt;\n&lt;\/html&gt;&nbsp; <\/pre>\n<\/li>\n<li><strong>Estrutura do C&oacute;digo<\/strong> &ndash; O AngularJS oferece c&oacute;digos com templates, permitindo que voc&ecirc; produza apps com c&oacute;digos limpos. Isso n&atilde;o apenas economiza tempo, mas tamb&eacute;m torna mais f&aacute;cil fazer qualquer modifica&ccedil;&atilde;o ou at&eacute; mesmo corrigir uma aplica&ccedil;&atilde;o.<\/li>\n<li><strong>Ambiente de Testes<\/strong> &ndash; O <em>framework<\/em> tem suporte a Unit e testes integrados.&nbsp;<\/li>\n<li><strong>Compatibilidade com Desktop e <em>Mobile<\/em><\/strong> &ndash; O AngularJS pode ser executado na maioria dos navegadores. E n&atilde;o apenas em computadores pessoais, mas tamb&eacute;m em dispositivos m&oacute;veis. Flexibilidade e versatilidade s&atilde;o grandes caracter&iacute;sticas da ferramenta.&nbsp;<\/li>\n<li><strong>Futuro Promissor <\/strong>&ndash; O futuro do AngularJS &eacute; brilhante por conta da sua popularidade e funcionalidade. Sua base de usu&aacute;rios s&oacute; est&aacute; crescendo e ele tem ganhado cada vez mais documentos com tutoriais, que tamb&eacute;m t&ecirc;m recebido atualiza&ccedil;&otilde;es e ajudam novatos a se familiarizar com ele.&nbsp;&nbsp;<\/li>\n<\/ul><h2 class=\"wp-block-heading\" id=\"h-antes-de-aprender-sobre-angularjs\"><strong>Antes de Aprender Sobre AngularJS<\/strong><\/h2><p>Antes de tudo, voc&ecirc; precisa lembrar que o AnglarJS &eacute; um <em>framework <\/em>JavaScript. Consequentemente, &eacute; essencial saber o b&aacute;sico de programa&ccedil;&atilde;o da linguagem JavaScript antes de aprender qualquer coisa e a usar o AngularJS.<\/p><p>O mesmo se aplica a outras linguagens de programa&ccedil;&atilde;o, como HTML, <a href=\"https:\/\/www.hostinger.com\/br\/tutoriais\/o-que-e-css-guia-basico-de-css\/\">CSS<\/a> e Ajax. Conhecer a base do JavaScript antes de aprender sobre AngularJS permite que voc&ecirc;:<\/p><ul class=\"wp-block-list\">\n<li>Se adapte ao r&aacute;pido padr&atilde;o de desenvolvimento do Angular;<\/li>\n\n\n\n<li>Saiba quando usar o <em>framework<\/em>;<\/li>\n\n\n\n<li>Se torne um desenvolvedor flex&iacute;vel e inovador.<\/li>\n<\/ul><figure class=\"wp-block-image size-large\"><a href=\"\/br\/\" target=\"_blank\" rel=\"noreferrer noopener\"><img decoding=\"async\" width=\"1024\" height=\"300\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2023\/02\/BR-Web-hosting_in-text-banner.png\/public\" alt=\"\" class=\"wp-image-32927\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2023\/02\/BR-Web-hosting_in-text-banner.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2023\/02\/BR-Web-hosting_in-text-banner.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2023\/02\/BR-Web-hosting_in-text-banner.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2023\/02\/BR-Web-hosting_in-text-banner.png\/w=768,fit=scale-down 768w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2023\/02\/BR-Web-hosting_in-text-banner.png\/w=1536,fit=scale-down 1536w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure><h2 class=\"wp-block-heading\" id=\"h-conclusao\"><strong>Conclus&atilde;o<\/strong><\/h2><p>O AngularJS &eacute; um <em>framework <\/em>JavaScript que os <a href=\"https:\/\/www.hostinger.com\/br\/tutoriais\/como-ser-um-desenvolvedor-web\/\">desenvolvedores<\/a> usam para criar aplica&ccedil;&otilde;es de p&aacute;ginas &uacute;nicas para a internet. Por conta da sua estrutura MCV, voc&ecirc; n&atilde;o precisa escrever o mesmo c&oacute;digo para o HTML e o JavaScript.&nbsp;<\/p><p>Fora isso, o <em>framework <\/em>oferece &oacute;timos benef&iacute;cios:<\/p><ul class=\"wp-block-list\">\n<li>Templates prontos de c&oacute;digos;<\/li>\n\n\n\n<li>Documenta&ccedil;&atilde;o extensa;<\/li>\n\n\n\n<li>Testes;<\/li>\n\n\n\n<li>Compatibilidade com computadores e tamb&eacute;m mobile.<\/li>\n<\/ul><p>E, se voc&ecirc; tiver qualquer pergunta, &eacute; s&oacute; deixar um coment&aacute;rio abaixo!<br><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Se voc&ecirc; curte desenvolvimento de software, provavelmente j&aacute; ouviu falar sobre o Angular. Ele &eacute; um dos frameworks JavaScript mais populares entre os desenvolvedores que usam a ferramenta para desenvolver e construir sites din&acirc;micos. Neste artigo, voc&ecirc; vai aprender sobre o que &eacute; Angular, como ele surgiu e as vantagens de us&aacute;-lo no seu dia [&#8230;]<\/p>\n<p><a class=\"btn btn-secondary understrap-read-more-link\" href=\"\/br\/tutoriais\/o-que-e-angular\">Read More&#8230;<\/a><\/p>\n","protected":false},"author":92,"featured_media":17412,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"rank_math_title":"%title%","rank_math_description":"Um framework JavaScript para criar p\u00e1ginas de apps e sites din\u00e2micos. Saiba o que \u00e9 Angular e como ele ajuda no desenvolvimento web!","rank_math_focus_keyword":"o que \u00e9 angular","footnotes":""},"categories":[5602],"tags":[6995,6994,6993,6989],"class_list":["post-17403","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-glossario","tag-angular-java","tag-framework-angular","tag-o-que-e-angular","tag-o-que-e-angularjs"],"hreflangs":[{"locale":"pt-BR","link":"https:\/\/www.hostinger.com\/br\/tutoriais\/o-que-e-angular","default":1},{"locale":"pt-PT","link":"https:\/\/www.hostinger.com\/pt\/tutoriais\/o-que-e-angular","default":0}],"acf":[],"_links":{"self":[{"href":"https:\/\/www.hostinger.com\/br\/tutoriais\/wp-json\/wp\/v2\/posts\/17403","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.hostinger.com\/br\/tutoriais\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.hostinger.com\/br\/tutoriais\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.hostinger.com\/br\/tutoriais\/wp-json\/wp\/v2\/users\/92"}],"replies":[{"embeddable":true,"href":"https:\/\/www.hostinger.com\/br\/tutoriais\/wp-json\/wp\/v2\/comments?post=17403"}],"version-history":[{"count":9,"href":"https:\/\/www.hostinger.com\/br\/tutoriais\/wp-json\/wp\/v2\/posts\/17403\/revisions"}],"predecessor-version":[{"id":47390,"href":"https:\/\/www.hostinger.com\/br\/tutoriais\/wp-json\/wp\/v2\/posts\/17403\/revisions\/47390"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.hostinger.com\/br\/tutoriais\/wp-json\/wp\/v2\/media\/17412"}],"wp:attachment":[{"href":"https:\/\/www.hostinger.com\/br\/tutoriais\/wp-json\/wp\/v2\/media?parent=17403"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hostinger.com\/br\/tutoriais\/wp-json\/wp\/v2\/categories?post=17403"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hostinger.com\/br\/tutoriais\/wp-json\/wp\/v2\/tags?post=17403"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}