{"id":3212,"date":"2014-12-01T13:16:54","date_gmt":"2014-12-01T15:16:54","guid":{"rendered":"https:\/\/www.kadunew.com\/blog\/?p=3212"},"modified":"2014-12-01T13:16:54","modified_gmt":"2014-12-01T15:16:54","slug":"o-basico-para-iniciar-no-angular-js","status":"publish","type":"post","link":"https:\/\/www.kadunew.com\/blog\/jquery\/o-basico-para-iniciar-no-angular-js","title":{"rendered":"O B\u00e1sico para iniciar no Angular JS"},"content":{"rendered":"<p>O Angular \u00e9 um <strong>framawork de JavaScript patrocinado pelo Google<\/strong> com base no modelo de arquitetura MVC ( principal conceito por tr\u00e1s do framework) que oferece uma estrutura consistente e escal\u00e1vel, facilitando desenvolver aplica\u00e7\u00f5es complexas e de grande porte.<\/p>\n<p>A estrutura do AngularJS veio para garantir mais velocidade no desenvolvimento, facilidade de manuten\u00e7\u00e3o a longo prazo e separa\u00e7\u00e3o de responsabilidades no projeto.<\/p>\n<div class=\"obs\">\nO projeto \u00e9 open source e est\u00e1 hospedado no GitHub <a href=\"https:\/\/github.com\/angular\/angular.js\" title=\"Projeto AngularJS no Github\" target=\"_blank\">https:\/\/github.com\/angular\/angular.js<\/a><br \/>\n<strong>Site oficial<\/strong>: <a href=\"https:\/\/angularjs.org\" title=\"Site oficial Angular JS\" target=\"_blank\">https:\/\/angularjs.org<\/a>\n<\/div>\n<h2>AngularJS e MVC<\/h2>\n<p>Separar as responsabilidades da sua aplica\u00e7\u00e3o \u00e9 uma de suas filosofias. O framework adota um padr\u00e3o bem parecido com o MVC (Model-View-Controller ou Modelo-Vis\u00e3o-Controlador) para estruturar a aplica\u00e7\u00e3o. Se olharmos bem, temos realmente tr\u00eas camadas na nossa aplica\u00e7\u00e3o com Angular:<\/p>\n<ul>\n<li>Temos as informa\u00e7\u00f5es que ser\u00e3o mostradas aos usu\u00e1rios ou coletadas dos usu\u00e1rios. Isso seria o nosso modelo (Model).<\/li>\n<li>Temos tamb\u00e9m a interface, que no nosso caso \u00e9 a linguagem HTML. \u00c9 a camada de visualiza\u00e7\u00e3o, onde o usu\u00e1rio interage. Ou seja \u00e9 nossa  Vis\u00e3o (View).<\/li>\n<li>Nossa \u00faltima camada \u00e9 onde fica as regras de neg\u00f3cio, l\u00f3gica de neg\u00f3cio. \u00c9 a camada que acessa os dados do modelo (Model) e envia para a camada de vis\u00e3o (View). Nela que \u00e9 feita as valida\u00e7\u00f5es por exemplo. Ou seja, tudo que for referente a l\u00f3gica de neg\u00f3cio est\u00e1 aqui.<\/li>\n<\/ul>\n<h2>Vantagens do AngularJS<\/h2>\n<ul>\n<li>Menos linhas de c\u00f3digo, at\u00e9 mesmo que jQuery, para realizar uma tarefa, assim ter\u00e1 um c\u00f3digo mais limpo, j\u00e1 que toda l\u00f3gica ficar\u00e1 contida em componentes que podem ser reutilizados.<\/li>\n<li>Seguindo o padr\u00e3o MVC, a maioria do seu c\u00f3digo est\u00e1 focado na regra do neg\u00f3cio, nas funcionalidades de sua aplica\u00e7\u00e3o, e n\u00e3o focada em c\u00f3digos redundantes, por exemplo.\n<\/li>\n<li>Algo b\u00e1sico, por\u00e9m interessante de ressaltar \u00e9 que \u00e9 poss\u00edvel modificar todo seu layout de um site ou aplica\u00e7\u00e3o sem alterar uma \u00fanica linha do seu c\u00f3digo JavaScript.\n<\/li>\n<li>Facilidade para os designers trabalharem, pois os templates da aplica\u00e7\u00e3o do Angular s\u00e3o aplicados em HTML puro.\n<\/li>\n<li>Interage muito bem com componentes de outras bibliotecas, por exemplo: Foundation, BootStrap. Disponibiliza hooks para ser integrado conforme a necessidade do desenvolvedor.\n<\/li>\n<\/ul>\n<h2>Conhecendo o AngularJS<\/h2>\n<p>O framework permite aos desenvolvedores criar aplica\u00e7\u00f5es complexas e de grande porte de forma r\u00e1pida e f\u00e1cil. O AngularJS n\u00e3o segue a risca o padr\u00e3o MVC, por exemplo: o controlador jamais far\u00e1 uma refer\u00eancia direta \u00e0 camada vis\u00e3o (View). Sendo assim podemos facilmente testar nosso controlador sem inicializar algo nos nossos elementos HTML (DOM).<\/p>\n<p>O AngularJS \u00e9 um dos poucos frameworks JavaScript com um sistema completo<br \/>\nde inje\u00e7\u00e3o de depend\u00eancia inclu\u00eddo.<\/p>\n<h2>AngularJS na pr\u00e1tica<\/h2>\n<p>Primeiramente, como qualquer framework, devemos incorporar o framework em nosso projeto. Voc\u00ea pode utilizar o servi\u00e7o do Google <a href=\"https:\/\/developers.google.com\/speed\/libraries\/devguide\" title=\"Bibliotecas Google\" target=\"_blank\">https:\/\/developers.google.com\/speed\/libraries\/devguide<\/a> ou baixar o arquivo direto do site <a href=\"http:\/\/www.angularjs.org\" title=\"Site oficial Angular JS\" target=\"_blank\">http:\/\/www.angularjs.org<\/a><\/p>\n<p>Logo depois devemos inicializar o Angular por meio do atributo <em>ng-app.<\/em> Isso indica a se\u00e7\u00e3o do HTML que ser\u00e1 controlada pelo framework. Na maioria das vezes usamos no elemento HTML, logo estamos dizendo que todos os elementos que s\u00e3o filhos desse elemento poder\u00e1 ser controlado pelo framework AngularJS.<\/p>\n<p>Para entendermos melhor vamos montar um exemplo bem simples e b\u00e1sico. No nosso exemplo teremos um campo de texto que ao digitar algo outro elemento ser\u00e1 atualizado com esse valor.<\/p>\n<pre class=\"brush: xml; title: HTML; notranslate\" title=\"HTML\">\r\n&lt;!DOCTYPE html&gt;\r\n&lt;html ng-app&gt;\r\n    &lt;body&gt;\r\n        &lt;input type=&quot;text&quot; ng-model=&quot;name&quot; placeholder=&quot;Enter your name&quot;&gt;\r\n        &lt;h1&gt;Ol\u00e1 &lt;span ng-bind=&quot;name&quot;&gt;&lt;\/span&gt;&lt;\/h1&gt;\r\n&lt;script src=&quot;https:\/\/ajax.googleapis.com\/ajax\/libs\/angularjs\/1.2.19\/angular.js&quot;&gt;&lt;\/script&gt;\r\n    &lt;\/body&gt;\r\n&lt;\/html&gt;\r\n<\/pre>\n<p><strong>Explica\u00e7\u00e3o do c\u00f3digo acima:<\/strong><\/p>\n<ul>\n<li>Na linha dois estamos inicializando o Angular com <em>ng-app<\/em>.<\/li>\n<li>O atributo  ng-model utilizamos em campos de entrada de dados para armazenar o valor digitado pelo usu\u00e1rio, e em seguida manipula-lo com JavaScript. No exemplo estamos armazenando o valor digitado pelo usu\u00e1rio numa vari\u00e1vel chama <em>name<\/em>.<\/li>\n<li>O atributo <em>ng-bind<\/em> insere o valor da vari\u00e1vel <em>name <\/em>na tag e vai atualizando-o caso tenha alguma altera\u00e7\u00e3o no seu valor.<\/li>\n<\/ul>\n<p><iframe loading=\"lazy\" width=\"100%\" height=\"300\" src=\"http:\/\/jsfiddle.net\/kadunew\/kvygz38p\/embedded\/\" allowfullscreen=\"allowfullscreen\" frameborder=\"0\"><\/iframe><\/p>\n<div class=\"obs\">\n<strong>Podemos substituir:<\/strong><br \/>\n&lt; h1&gt;Ol\u00e1 &lt; span ng-bind=&#8221;name&#8221;&gt;&lt; \/span&gt;&lt; \/h1&gt;<br \/>\nPor:<br \/>\n&lt; h1&gt;Ol\u00e1 {{ name }}&lt; \/h1&gt;\n<\/div>\n<p>Repare que n\u00e3o precisamos escrever nada de JavaScript\/jQuery. Se por acaso tiv\u00e9ssemos usado JS ter\u00edamos que criar eventos, seletores para escrevermos o texto digitado, etc.<\/p>\n<p>Siga-me no Twitter: <a href=\"http:\/\/twitter.com\/kadunew\" rel=\"nofollow\">@kadunew<\/a> ou assine nosso <a href=\"https:\/\/www.kadunew.com\/blog\/feed\">Feed<\/a> e fique por dentro de todas atualiza\u00e7\u00f5es aqui do blog.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>O Angular \u00e9 um framawork de JavaScript patrocinado pelo Google com base no modelo de arquitetura MVC ( principal conceito por tr\u00e1s do framework) que oferece uma estrutura consistente e escal\u00e1vel, facilitando desenvolver aplica\u00e7\u00f5es complexas e de grande porte. A estrutura do AngularJS veio para garantir mais velocidade no desenvolvimento, facilidade de manuten\u00e7\u00e3o a longo [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3],"tags":[],"class_list":["post-3212","post","type-post","status-publish","format-standard","hentry","category-jquery"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v23.6 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>O B\u00e1sico para iniciar no Angular JS<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.kadunew.com\/blog\/jquery\/o-basico-para-iniciar-no-angular-js\" \/>\n<meta property=\"og:locale\" content=\"pt_BR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"O B\u00e1sico para iniciar no Angular JS\" \/>\n<meta property=\"og:description\" content=\"O Angular \u00e9 um framawork de JavaScript patrocinado pelo Google com base no modelo de arquitetura MVC ( principal conceito por tr\u00e1s do framework) que oferece uma estrutura consistente e escal\u00e1vel, facilitando desenvolver aplica\u00e7\u00f5es complexas e de grande porte. A estrutura do AngularJS veio para garantir mais velocidade no desenvolvimento, facilidade de manuten\u00e7\u00e3o a longo [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.kadunew.com\/blog\/jquery\/o-basico-para-iniciar-no-angular-js\" \/>\n<meta property=\"og:site_name\" content=\"KADUNEW\" \/>\n<meta property=\"article:published_time\" content=\"2014-12-01T15:16:54+00:00\" \/>\n<meta name=\"author\" content=\"Kadu Oliveira\" \/>\n<meta name=\"twitter:label1\" content=\"Escrito por\" \/>\n\t<meta name=\"twitter:data1\" content=\"Kadu Oliveira\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. tempo de leitura\" \/>\n\t<meta name=\"twitter:data2\" content=\"4 minutos\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.kadunew.com\/blog\/jquery\/o-basico-para-iniciar-no-angular-js\",\"url\":\"https:\/\/www.kadunew.com\/blog\/jquery\/o-basico-para-iniciar-no-angular-js\",\"name\":\"O B\u00e1sico para iniciar no Angular JS\",\"isPartOf\":{\"@id\":\"https:\/\/www.kadunew.com\/blog\/#website\"},\"datePublished\":\"2014-12-01T15:16:54+00:00\",\"dateModified\":\"2014-12-01T15:16:54+00:00\",\"author\":{\"@id\":\"https:\/\/www.kadunew.com\/blog\/#\/schema\/person\/07b2297c4825efbd1e9f2a1018926b05\"},\"breadcrumb\":{\"@id\":\"https:\/\/www.kadunew.com\/blog\/jquery\/o-basico-para-iniciar-no-angular-js#breadcrumb\"},\"inLanguage\":\"pt-BR\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.kadunew.com\/blog\/jquery\/o-basico-para-iniciar-no-angular-js\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.kadunew.com\/blog\/jquery\/o-basico-para-iniciar-no-angular-js#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.kadunew.com\/blog\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"JS\/jQuery\",\"item\":\"https:\/\/www.kadunew.com\/blog\/category\/jquery\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"O B\u00e1sico para iniciar no Angular JS\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.kadunew.com\/blog\/#website\",\"url\":\"https:\/\/www.kadunew.com\/blog\/\",\"name\":\"KADUNEW\",\"description\":\"Artigos sobre Front-End e Programa\u00e7\u00e3o web\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.kadunew.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"pt-BR\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.kadunew.com\/blog\/#\/schema\/person\/07b2297c4825efbd1e9f2a1018926b05\",\"name\":\"Kadu Oliveira\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-BR\",\"@id\":\"https:\/\/www.kadunew.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/780660fded589936b30467c54c99d51a?s=96&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/780660fded589936b30467c54c99d51a?s=96&r=g\",\"caption\":\"Kadu Oliveira\"},\"sameAs\":[\"https:\/\/www.kadunew.com\/blog\"],\"url\":\"https:\/\/www.kadunew.com\/blog\/author\/admin\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"O B\u00e1sico para iniciar no Angular JS","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.kadunew.com\/blog\/jquery\/o-basico-para-iniciar-no-angular-js","og_locale":"pt_BR","og_type":"article","og_title":"O B\u00e1sico para iniciar no Angular JS","og_description":"O Angular \u00e9 um framawork de JavaScript patrocinado pelo Google com base no modelo de arquitetura MVC ( principal conceito por tr\u00e1s do framework) que oferece uma estrutura consistente e escal\u00e1vel, facilitando desenvolver aplica\u00e7\u00f5es complexas e de grande porte. A estrutura do AngularJS veio para garantir mais velocidade no desenvolvimento, facilidade de manuten\u00e7\u00e3o a longo [&hellip;]","og_url":"https:\/\/www.kadunew.com\/blog\/jquery\/o-basico-para-iniciar-no-angular-js","og_site_name":"KADUNEW","article_published_time":"2014-12-01T15:16:54+00:00","author":"Kadu Oliveira","twitter_misc":{"Escrito por":"Kadu Oliveira","Est. tempo de leitura":"4 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.kadunew.com\/blog\/jquery\/o-basico-para-iniciar-no-angular-js","url":"https:\/\/www.kadunew.com\/blog\/jquery\/o-basico-para-iniciar-no-angular-js","name":"O B\u00e1sico para iniciar no Angular JS","isPartOf":{"@id":"https:\/\/www.kadunew.com\/blog\/#website"},"datePublished":"2014-12-01T15:16:54+00:00","dateModified":"2014-12-01T15:16:54+00:00","author":{"@id":"https:\/\/www.kadunew.com\/blog\/#\/schema\/person\/07b2297c4825efbd1e9f2a1018926b05"},"breadcrumb":{"@id":"https:\/\/www.kadunew.com\/blog\/jquery\/o-basico-para-iniciar-no-angular-js#breadcrumb"},"inLanguage":"pt-BR","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.kadunew.com\/blog\/jquery\/o-basico-para-iniciar-no-angular-js"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.kadunew.com\/blog\/jquery\/o-basico-para-iniciar-no-angular-js#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.kadunew.com\/blog"},{"@type":"ListItem","position":2,"name":"JS\/jQuery","item":"https:\/\/www.kadunew.com\/blog\/category\/jquery"},{"@type":"ListItem","position":3,"name":"O B\u00e1sico para iniciar no Angular JS"}]},{"@type":"WebSite","@id":"https:\/\/www.kadunew.com\/blog\/#website","url":"https:\/\/www.kadunew.com\/blog\/","name":"KADUNEW","description":"Artigos sobre Front-End e Programa\u00e7\u00e3o web","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.kadunew.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"pt-BR"},{"@type":"Person","@id":"https:\/\/www.kadunew.com\/blog\/#\/schema\/person\/07b2297c4825efbd1e9f2a1018926b05","name":"Kadu Oliveira","image":{"@type":"ImageObject","inLanguage":"pt-BR","@id":"https:\/\/www.kadunew.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/780660fded589936b30467c54c99d51a?s=96&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/780660fded589936b30467c54c99d51a?s=96&r=g","caption":"Kadu Oliveira"},"sameAs":["https:\/\/www.kadunew.com\/blog"],"url":"https:\/\/www.kadunew.com\/blog\/author\/admin"}]}},"_links":{"self":[{"href":"https:\/\/www.kadunew.com\/blog\/wp-json\/wp\/v2\/posts\/3212"}],"collection":[{"href":"https:\/\/www.kadunew.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.kadunew.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.kadunew.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.kadunew.com\/blog\/wp-json\/wp\/v2\/comments?post=3212"}],"version-history":[{"count":10,"href":"https:\/\/www.kadunew.com\/blog\/wp-json\/wp\/v2\/posts\/3212\/revisions"}],"predecessor-version":[{"id":3265,"href":"https:\/\/www.kadunew.com\/blog\/wp-json\/wp\/v2\/posts\/3212\/revisions\/3265"}],"wp:attachment":[{"href":"https:\/\/www.kadunew.com\/blog\/wp-json\/wp\/v2\/media?parent=3212"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.kadunew.com\/blog\/wp-json\/wp\/v2\/categories?post=3212"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.kadunew.com\/blog\/wp-json\/wp\/v2\/tags?post=3212"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}