Introdução ao AngularJS x JQuery
Neste artigo vamos abordar apenas alguns conceitos básicos de AngularJS, como resultado um exemplo simples que mostra de forma pratica o uso do AngularJS. E também vamos citar o JQuery onde devemos utilizá lo e também vamos fazer um pequeno comparativo entre AngularJS e JQuery.
Introdução
AngularJS e um framework javascript open source mentido pelo Google que foi construído para o desenvolvimento de aplicações web, AngularJS permite ampliar o vocabulário HTML para sua aplicação. O ambiente resultante é extremamente expressiva, legível e rápido para se desenvolver e se enquadra no modelo MVC(Model-view-controller), sendo considerado pelos seus desenvolvedores como um framework MVW (Model-View-Whatever), já que o foco do framework não é conceitos de separação. E seu objetivo e aumentar aplicativos que podem ser acessados por um navegador web.
Visão Conceitual
Esta seção aborda brevemente em todas as partes importantes do AngularJS usando um exemplo simples. Para uma explicação mais aprofundada.
- Template – HTML com marcação adicional.
- Directives – estender HTML com atributos personalizados e elementos.
- Model – dados mostrados para o usuário na view com o qual interage usuário.
- Scope – contexto em que o mel é armazenado para que os controllers, directives and expressions podem acessá lo.
- Expressions – variáveis de acesso e funções de aplicação.
- View – que o usuário vê (o DOM).
- Controller – lógica de negocio por trás da visualizaçao.
- Module – um recipiente para as diferentes partes de um aplicativo, incluindo controllers, services, filters, directives que configura o Injector.
- Service – conjunto de lógica de negócio reutilizável independentes de views.
Ligação bidirecional de dados (Two-way data binding)
Ligação bidirecional de dados no AngularJS é sua principal característica e reduz a quantidade de códigos escritos para mostrar os dados processados pelo servidor. Etapa de compilação produz uma exibição ao vivo, quaisquer alterações na view são imediatamente refletidas no modelo, e quaisquer mudanças no modelo são propagadas para a view. O modelo é o single-source de-verdade para o estado do aplicativo, simplificando enormemente o modelo de programação para o desenvolvedor. Você pode pensar na view como simplesmente uma projeção instantânea de seu modelo.
Algumas diretivas do Angular JS
ng-app
Utilize essa diretriz para auto-inicialização de uma aplicação AngularJS. A directiva ngApp designa o elemento raiz do aplicativo e normalmente é colocado perto do elemento raiz da página – por exemplo, em <body> ou <html> tags. Apenas um aplicativo AngularJS pode ser auto-bootstrap por documento HTML.
ng-bind
Muda o texto de um elemento HTML automaticamente de acordo com o seu resultado, vindo das regras de negócio.
ng-model
A directiva ng-model se liga a um input, select, textarea (ou controle de formulário personalizado) para uma propriedade no âmbito usando NgModelController, que é criado e exposto por esta directiva, mas permite ligação direta bidirecional (two-way data binding ) entre a view e o escopo do aplicativo.
ng-controller
A directiva ng-controller atribui uma classe de controlador para a view. Este é um aspecto-chave de como angular apoia os princípios por trás do padrão de projeto Model-View-Controller.
ng-repeat
A directiva ng-repeat instancia um modelo de uma vez por item de uma coleção. Cada instância de modelo recebe o seu próprio âmbito de aplicação, onde a variável do laço dado está definido para o item de coleção atual, e $index é definido como o índice do item ou chave.
ng-class
Permite atributos de classe serem carregados dinamicamente.
Exemplo de desenvolvimento com AngularJS
Como qualquer aplicação web iniciamos com a criação de uma página HTML básica, teremos uma pequena diferença na tag do nosso arquivo HTML que vamos acrescentar ng-app.
Ao declarar a propriedade ng-app estamos inicializando a nossa aplicação.
<!doctype html> <html ng-app> <head> <title>Exemplo Simples</title> <script src="https://code.angularjs.org/1.3.9/angular.min.js"></script> </head> <body> </body> </html>
E como o foco do AngularJS está no HTML e não no javascript, vamos criar outro exemplo bem simples e que ao carregarmos o HTML no navegador e digitarmos qualquer coisa no input, o parágrafo sera atualizado automaticamente e sem escrever uma linha de código JavaScript. A propriedade ng-model funciona como um canal entre a nossa view e o form. Os seus dados e suas validações ficam automaticamente disponíveis no escopo da nossa aplicação, como veremos a seguir. A associação de dados é feita através do famoso “bigode-bigode” ({{ }}), passando nomes presentes no escopo.
<!doctype html>
<html ng-app>
<head>
<title>Exemplo Simples</title>
<script src="https://code.angularjs.org/1.3.9/angular.min.js"></script>
</head>
<body>
<input type="text" ng-model="nome">
<p>Olá! Meu nome é: {{ nome }}</p>
</body>
</html>
Agora vamos criar um nome exemplo utilizando o javascript. Criaremos um controller para a nossa aplicação que carrega uma lista de modelos de carro e suas marcas. Onde os itens serão armazenados no escopo($scope) da aplicação.
index.html
<!doctype html>
<html ng-app="listaControllerApp">
<head>
<title>Lista de carros</title>
<script src="https://code.angularjs.org/1.3.9/angular.min.js"></script>
<script src="js/controller.js"></script>
</head>
<body>
<div ng-controller="ListaControllerCtrl">
<table>
<thead>
<tr>
<th>Nome</th>
<th>Marca</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="item in itens">
<td><strong>{{ item.nome }}</strong></td>
<td>{{ item.marca }}</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
controller.js
var listaController = angular.module('listaControllerApp', []);
listaController.controller('ListaControllerCtrl', ['$scope', function($scope) {
$scope.itens = [
{nome: 'Jetta', marca: 'Volkswagen', comprado: false},
{nome: 'City', marca: 'Honda', comprado: false}
];
}]);
Agora vamos fazer um comparativo entre AngularJS & JQuery
Antes de fazer um comparativo vamos citar um pouco o JQuery, que é um framework de JavaScript Cross-Browser, uma coleção de métodos e funções pronto para utilização, desenvolvida para simplificar os scripts client side que interagem com o HTML, criada no BarCamp de Nova York por John Resig em dezembro de 2006. Sendo utilizada por 77% dos 10 Mil sites, JQuery é uma das mais populares bibliotecas JavaScript.
Exemplo de Utilização:
Código em JavaScript
document.getElementById( 'idElemento' ).value = 5;
Equivalência em JQuery
$( '#idElemento' ).val( 5 );
Podemos utilizar o JQuery em requisições com AJAX ou em mudanças na página e onde precisamos criar efeitos que antes custavam dezenas de linhas de código JavaScript.
O jQuery funciona todo baseado em eventos, você determina um evento e, assim que ele for lançado, um certo script é executado.
Os scripts de jQuery são executados após o carregamento do site, o que também caracteriza um evento.
Basicamente, jQuery é uma grande ferramenta para que você possa manipular elementos de controle DOM. Se você se concentrar apenas em elementos DOM e não CRUD de dados, como a construção de um site e não uma aplicação web, jQuery é a uma das principais ferramentas. (Você pode usar AngularJS para esta finalidade também.)
Resumindo a biblioteca jQuery contém os seguintes recursos:
- HTML manipulação / DOM
- Manipulação de CSS
- Métodos de eventos HTML
- Efeitos e animações
- AJAX
- Utilities
Agora que já conhecemos um pouco o AngularJS e temos uma idéia do que seria JQuery, vamos fazer uma pequena comparação entre ambos. AngularJS pode fazer tudo que o JQuery faz, porem com AngularJS podemos ir mais alem, gerenciamento de dependência é fácil e intuitiva, ligação de dados dinâmicos para seus pontos de vista é simples e poderosa. Outros tópicos que não cobrem – como directivas, roteamento, serviços de validação, recursos de animação e localização – são igualmente pensado e ferramentas úteis. AngularJS é uma base sólida para a construção de aplicações web testáveis que tem escalabilidade.
Principais características que temos no AngularJS e não temos no JQuery (características em Inglês):
RESTFull API, AJAX /JSONP, Integration Test Runner, MVC Pattern Support, Templating, Two-way Data Binding, Dependency Management,
Deep-Lik Routing, Form Validation, Localization.
Considerações finais
O objetivo aqui foi mostrar o potencial do framework AngularJS, existe muito mais a se considerar, é um framework bem poderoso e prático, facilita bastante o desenvolvimento web e pode combinar perfeitamente com serviços restfull, tendo como retorno um json.
No site do framework AngularJS (https://angularjs.org/) há uma documentação bem completa, com diversos tutoriais.
Também citamos o JQuery e consideramos que sua usabilidade se aplica melhor em websites e em aplicações web seria melhor utilizarmos o AngularJS por ser um poderosa ferramente e nós permitir utilizar uma gama de resurso maior que aquelas encontradas no JQuery.
Gostou do conteúdo? Tem alguma dúvida? Entre em contato com nossos Especialistas Mandic Cloud, ficamos felizes em ajudá-lo.