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