terça-feira, 8 de outubro de 2013

REST - Aula Prática - AngularJS

Vi no Facebook um artigo bem interessante sobre um workshop para ensinar como criar sistemas inteiros apenas com Javascript. Com um pequeno escopo de softwares entre eles o AngularJS, Node.js e utilizando o MongoDB. O que mais me interessou foi a frase final "O aluno terminará o workshop entendendo como cada parte se integra para criar uma aplicação REST". E isso ativou todas minhas antenas (ou meus Eus), então fomos (eu e meus Eus) atrás de toda a informação possível sobre essas ferramentas (apesar de já conhecer muito bem o MongoDB).

Os artigos que pretendo postar aqui sobre essa junção vem com base em um documento chamado "Créer une <<application web>> avec AngularJS, nodeJS et mongoDB" v110813 - Brouillon (fiquei meio perdido quanto ao autor mas, acredito se tratar de David Roche), além disso dou graças aos livros da O'Reilly e Manning que me ajudaram a tirar muitas dúvidas. Então vamos juntos travar conhecimento do Rest através de uma aplicação prática ao invés de ficarmos somente na teoria.

Vamos começar pelo AngularJS que é um framework JavaScript, open source e desenvolvido pela Google. Este framework segue o modelo MVC (model-view-control) e foi a base de construção do Gmail e GoogleDoc. O AngularJS possui algumas características bem interessantes entre elas os atributos "ng-", para produzirmos nosso primeiro exemplo baixe o arquivo "angular.min.js". Para facilitar nosso estudo, criamos a seguinte estrutura de pastas:

\exemplo
   \script
       angular.min.js
       exemplo01.js
   exemplo01.html

Edite o arquivo exemplo01.js e insira os seguintes códigos:

function meuControle($scope){
  $scope.minhaVariavel="Famoso Hello World !";
} 

E para o arquivo exemplo01.html, insira os seguintes códigos:

<!doctype html>
<html ng-app>
 <head>
  <title>Teste do AngularJS</title>
  <script src="script/angular.min.js"></script>
  <script src="script/exemplo01.js"></script>
 </head>
 <body>
  <h1 ng-controller="meuControle">{{minhaVariavel}}</h1>
 </body>
</html>

O atributo ng-app define que este é um programa AngularJS, e o atributo ng-controller informa que o escopo da aplicação está definido com base em um determinado controlador. Um dos princípios base do AngularJS é a nomeação da data-binding, isto é, a capacidade de modificar informações da parte HTML através do JavaScript. Só que essa modificação se faz nos dois sentidos: HTML para JavaScript quanto JavaScript para HTML.

Adicione mais duas linhas ao HTML (ou crie um outro arquivo chamado exemplo02.html, copie as mesmas linhas deixando o <body> vazio):

...
  Outra Variável: <input type="text" ng-model="outraVariavel" size="30" placeholder="Insira o valor da Variável" />
  <h1>{{outraVariavel}}</h1>
 </body>
</html>

E na medida que digitamos um valor na caixa de texto, este aparece simultaneamente em tela. Como o outro valor advém de um controlador, devemos criar um formulário e submetê-lo. Então adicione (ou crie um outro arquivo chamado exemplo03.html e deixe o <body> idêntico ao exemplo01.html) as seguintes linhas:

  <form ng-submit="modificarVariavel()">
   Minha Variável: <input type="text" ng-model="valorForm" size="30" placeholder="Insira o valor da Variável" />
   <input class="btn-primary" type="submit" value="Mudar"/>
  </form>
 </body>
</html>  

Também precisaremos modificar o arquivo exemplo01.js para o seguinte conteúdo:

function meuControle($scope){
  $scope.minhaVariavel="Famoso Hello World!";
  $scope.modificarVariavel = function() {
    $scope.minhaVariavel = $scope.valorForm;
    $scope.valorForm = '';
  };
} 

A ideia é tremendamente simples, uma vez que o formulário for submetido será chamado a função "modificarVariavel" que troca o valor de "minhaVariavel" pelo conteúdo do campo "valorForm" e limpa o campo "valorForm". Porém observe que não funcionou. O que está errado? Tente descobrir antes de continuar lendo...

Observe que o atributo "ng-controller" está definido somente para a tag "h1", pode-se dizer que o controle só atende a esta tag então, para solucionar o problema retire esse atributo desta tag e coloque-o na tag "body", deixando o seguinte código:

<body ng-controller="meuControle">
Obrigado e até a próxima
Fernando Anselmo

0 comentários:

Postar um comentário