{"id":374,"date":"2016-09-09T11:48:36","date_gmt":"2016-09-09T11:48:36","guid":{"rendered":"http:\/\/curioso.digital\/?p=374"},"modified":"2023-02-06T22:06:18","modified_gmt":"2023-02-07T01:06:18","slug":"desenvolvendo-uma-aplicacao-com-node-js-e-angularjs-parte-5","status":"publish","type":"post","link":"https:\/\/curiosodigital.com.br\/?p=374","title":{"rendered":"Desenvolvendo uma aplica\u00e7\u00e3o com Node.js e AngularJS \u2013 parte 5"},"content":{"rendered":"<p style=\"text-align:justify;\">Sauda\u00e7\u00f5es Leitores, depois de um longo tempo sem postar pois eu estava estudando algumas tecnologias novas como openWRT e onCloud (talvez tenhamos novos posts no futuro), agora retomo meus estudos com o projeto do angularjs\/node.js\/mongoDB.<\/p>\n<p style=\"text-align:justify;\">Bem, a novidade ficar\u00e1 por conta das altera\u00e7\u00f5es que fiz no projeto passando a adotando o EJS com m\u00f3dulo de render das views. \u201cOps, o que voc\u00ea quis dizer\u201d, calma que eu explico, o express do node.js possibilita criar um diret\u00f3rio p\u00fablico onde normalmente ficam os javascripts, css, imagens, etc., e um diret\u00f3rio chamado view onde podemos colocar as p\u00e1ginas (ou views, como queiram chamar) que ser\u00e3o mostradas aos usu\u00e1rios, o node.js possui m\u00f3dulos que facilitam a cria\u00e7\u00e3o destas p\u00e1ginas baseadas em modelos, ou seja, voc\u00ea cria uma (ou mais) estrutura(s) b\u00e1sica de p\u00e1gina em forma de \u201cmodelo\u201d e o \u201cconte\u00fado\u201d da p\u00e1gina pode ser alterado dinamicamente, esse objetivo \u00e9 alcan\u00e7ado por exemplo com o m\u00f3dulo (seria mais correto chamar de engine) chamado Jade.<\/p>\n<p style=\"text-align:justify;\">Outra forma de fazer o render de p\u00e1ginas usando modelos (ou templates) \u00e9 utilizar o EJS. Eu optei por esta engine porque n\u00e3o vou usar os recursos de templates, vou fazer tudo utilizando html\/angularjs, com o Jade, quando era feito os render&#8217;s das p\u00e1ginas, as tags do angularjs sumiam, mas isto n\u00e3o ocorre com o EJS, ent\u00e3o optei por esta engine.<\/p>\n<p style=\"text-align:justify;\">\u201cMas voc\u00ea n\u00e3o vai usar os recursos da engine, voc\u00ea poderia ter colocado tudo no diret\u00f3rio p\u00fablico\u201d. Bem pessoal, eu gosto de cada coisa em seu lugar, pode parecer preciosismo, mas os diret\u00f3rios p\u00fablico e view possuem os seus objetivos espec\u00edficos, ent\u00e3o prefiro manter assim, e claro, mais adiante se eu quiser brincar com o EJS ou o Jade j\u00e1 est\u00e1 tudo no mesmo lugar.<\/p>\n<p style=\"text-align:justify;\">A princ\u00edpio farei o acesso aos dados do sistema utilizando exclusivamente servi\u00e7os REST, como no exemplo do logon, mas existe uma exce\u00e7\u00e3o, o acesso a qualquer p\u00e1gina. Configurei as rotas do expressar para acessar o index quando digitado www.meudominio.com (ou simplesmente localhost:3000), mas para acessar o index eu preciso estar logado e para isto criei no controller de usu\u00e1rio uma fun\u00e7\u00e3o chamada \u201clogged\u201d para verificar se um determinado token de autoriza\u00e7\u00e3o \u00e9 v\u00e1lido, este token \u00e9 fornecido no login e deve ser guardado pela aplica\u00e7\u00e3o e enviado ao servidor em qualquer chamada REST ou acesso a p\u00e1gina no header do request no par\u00e2metro \u201cauthorization\u201d, esta ser\u00e1 a princ\u00edpio a \u00fanica fun\u00e7\u00e3o que n\u00e3o ser\u00e1 executa por um servi\u00e7o mas somente chamada dentro dos controllers de p\u00e1ginas, como no \u201chome.js\u201d do nosso projeto.<\/p>\n<p style=\"text-align:justify;\">Para completar criei duas p\u00e1ginas que est\u00e3o no diret\u00f3rio views\/home, uma \u00e9 a tela principal (que por enquanto possui somente a frase \u201cestou logado\u201d \u00e9 a outra \u00e9 o tela de logon (sem forma\u00e7\u00e3o alguma, apenas os campos de usu\u00e1rio e senha).<\/p>\n<p style=\"text-align:justify;\">Pessoal, continuarei a nossa aplica\u00e7\u00e3o agora dando mais a cara de um sistema, para isso vou usar os recursos do bootstrap, para quem deseja deseja conhec\u00ea-lo vou deixar o link <a href=\"http:\/\/getbootstrap.com\/\">aqui<\/a>. Se algu\u00e9m quiser saber um pouco mais de como eu constru\u00ed a aplica\u00e7\u00e3o at\u00e9 aqui, porque escolhi este ou aquele m\u00f3dulo ou como\/porque programei algo \u00e9 s\u00f3 me escrever. O link para o GitHub da aplica\u00e7\u00e3o \u00e9 <a href=\"https:\/\/github.com\/gabrielpoa\/AmanhecerServer\" target=\"_blank\" rel=\"noopener\">este<\/a>,&nbsp; voc\u00ea tamb\u00e9m pode brincar com a plica\u00e7\u00e3o desenvolvida at\u00e9 o momento neste <a href=\"http:\/\/amanhecer-curiosodigital.rhcloud.com\/\" target=\"_blank\" rel=\"noopener\">link<\/a>. Espero que tenham gostado, at\u00e9 o pr\u00f3ximo post.<\/p>\n<p>Siga-me no Twitter: <a class=\"DashboardProfileCard-screennameLink u-linkComplex u-linkClean\" href=\"https:\/\/twitter.com\/curioso_dgtal\">@<span class=\"u-linkComplex-target\">curioso_dgtal<\/span><\/a><\/p>\n<p>Participe do nosso <a href=\"https:\/\/groups.google.com\/forum\/#%21forum\/curiosodigital\">grupo no Google<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Sauda\u00e7\u00f5es Leitores, depois de um longo tempo sem postar pois eu estava estudando algumas tecnologias novas como openWRT e onCloud (talvez tenhamos novos posts no futuro), agora retomo meus estudos com o projeto do angularjs\/node.js\/mongoDB. Bem, a novidade ficar\u00e1 por conta das altera\u00e7\u00f5es que fiz no projeto passando a adotando o EJS com m\u00f3dulo de&hellip;<\/p>\n","protected":false},"author":2,"featured_media":643,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[8],"tags":[15,27,31,33,40],"_links":{"self":[{"href":"https:\/\/curiosodigital.com.br\/index.php?rest_route=\/wp\/v2\/posts\/374"}],"collection":[{"href":"https:\/\/curiosodigital.com.br\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/curiosodigital.com.br\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/curiosodigital.com.br\/index.php?rest_route=\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/curiosodigital.com.br\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=374"}],"version-history":[{"count":1,"href":"https:\/\/curiosodigital.com.br\/index.php?rest_route=\/wp\/v2\/posts\/374\/revisions"}],"predecessor-version":[{"id":680,"href":"https:\/\/curiosodigital.com.br\/index.php?rest_route=\/wp\/v2\/posts\/374\/revisions\/680"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/curiosodigital.com.br\/index.php?rest_route=\/wp\/v2\/media\/643"}],"wp:attachment":[{"href":"https:\/\/curiosodigital.com.br\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=374"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/curiosodigital.com.br\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=374"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/curiosodigital.com.br\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=374"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}