Olá, pessoal!
Vamos aprender agora como funciona o framework AngularJS e como deixa-lo funcionando na sua aplicação.
AngularJS é um framework JavaScript, desenvolvido com base no padrão MVC e principalmente com foco em aplicações mobile, proporcionando assim maior velocidade e menor consumo de memória do navegador.
Para entendê-lo você no mínimo ter noções básicas de HTML e JavaScript.
O padrão MVC é um padrão de desenvolvimento criado onde contempla três ítens principais no corpo da programação:
- M: Model;
- V: View;
- C: Controller;
Onde:
- Model: é a "engine" por assim dizer, que trabalha com os dados da sua aplicação. Ela é embutida nos processos do próprio AngularJS;
- View: é o local onde tudo acontece. No caso, todo o corpo HTML no qual o controller é responsável;
- Controller: é o que literalmente controla as ações dentro de determinado bloco HTML;
Instalando AngularJS:
Para baixar o framework você deve acessar o site oficial do AngularJS e baixar a última versão estável.
Após o download, você deve armazenar o arquivo junto com sua aplicação e o instanciar na tag header de sua aplicação, como segue o exemplo abaixo:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Aprendendo AngularJS</title>
<script type="text/javascript" src="[CAMINHO ATÉ O ARQUIVO]/angular.min.js"></script>
</head>
<body>
<h1>Primeira aplicação com AngularJS</h1>
</body>
</html>
Alguns desenvolvedores optam por instanciar arquivos javascript no fim do documento HTML. A necessidade disso é que o navegador renderiza todo o conteúdo HTML primeiro, para depois fazer a leitura do JavaScript, sendo assim enquanto analisa todo o JavaScript, algum conteúdo já está sendo apresentado ao usuário. Particularmente acho sim que essa é uma prática válida, porém apenas se o javaScript de sua aplicação estiver um pouco pesado. No momento podemos instaciar o Javascript dentro da tag HEAD sem problemas.
Lembrando também de sobrescrever o [CAMINHO ATÉ O ARQUIVO] pelo path onde você armazena os arquivos JavaScript.
Feito isso vamos colocar o FrameWork para rodar.
Instancie o aplicativo do Angular da seguinte forma:
<body ng-app="meuApp">
<h1>Testandooo!</h1>
</body>
Neste caso meuApp será o nome do seu aplicativo Angular.
Falta apenas mais um detalhe...
Precisamos adicionar o seu aplicativo Angular para o Framework poder enxergá-lo e trabalhar com ele.
Adicione ao seu HTML uma tag JavaScript e instancie um module para o Angular como segue:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Aprendendo AngularJS</title>
<script type="text/javascript" src="[CAMINHO ATÉ O ARQUIVO]/angular.min.js"></script>
<script type="text/javascript">
var myApp = angular.module('myApp', []);
</script>
</head>
<body ng-app="meuApp">
<h1>Primeira aplicação com AngularJS</h1>
</body>
</html>
Maravilha! AngularJS instalado! No próximo post instanciaremos um controller para a sua aplicação Angular e faremos alguns testes de funcionamento.
Você pode acessar o próximo post AQUI.