AngularJS series: Iniciando com angularJS

Dando continuidade ao último artigo, hoje irei falar sobre como de fato iniciar no angularjs, deixando bem claro aqui que utilizaremos a versão 1.5.x.

Visando tornar o artigo mais interessante e interativo, utilizarei ao decorrer do mesmo exemplos práticos.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>MyApp</title>
</head>
<body data-ng-app="MyApp">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
<script type="text/javascript">
angular.module('MyApp', []);
</script>
</body>
</html>

O scaffold básico de um projeto angular é esse, indo por partes. Inicialmente importamos o angularjs através de uma CDN

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>

Caso deseje baixar o arquivo minificado ou uma versão diferente, acesse o site clicando aqui

Com o angular devidamente encorporado no nosso projeto, iniciaremos o nosso primeiro módulo chamado ‘MyApp’.

Módulos

<script type="text/javascript">
angular.module('MyApp', []);
</script>
<script type="text/javascript">
angular.module('MyApp', []);
</script>

E por fim criamos nossa primeira diretiva chamada ‘data-ng-app’ que recebe nosso módulo ‘MyApp’ como parâmetro

<body data-ng-app="MyApp">

Diretivas

O angular conta com inúmeras diretivas, não abordaremos todas nesse artigo, mas posteriormente falarei das demais. As diretivas do angularjs, tem como função extender as funcionalidades do HTML, a diretiva ‘data-ng-app’, é a diretiva responsável por delimitar o escopo do nosso módulo, podemos atrelar ela em basicamente qualquer tag do html, mas é comumente usada nas tags <body> ou<html>. Poderiamos omitir o ‘data’ trabalhando apenas com ‘ng-app’, mas por questões de validação do código HTML e SEO, é recomendado a utilização do ‘data’.

Two Way Data Binding em ação

Se você leu o primeiro artigo, lembra que eu comentei sobre o two way data biding, que é responsável pela atualização dinâmica da nossa view, mediante dados vindo dos models. Para exemplificar um pouco isso, vamos adicionar ao nosso código a diretiva ‘data-ng-model’.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>MyApp</title>
</head>
<body data-ng-app="MyApp">
<label>Nome: <input data-ng-model="name"></label>
<p>Hello, {{ name }}</p>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
<script type="text/javascript">
angular.module('MyApp', []);
</script>
</body>
</html>

No código acima, a diretiva ‘data-ng-model’, é a responsável por fazer a ligação entre o model ‘name’, e a view {{ name }}, quando executamos o código, a váriavel name armazena o valor informado no input, e exibe logo abaixo na view {{ name }}, poderiamos tambem substituir as {{ }} pela diretiva ‘data-ng-bind’, que tem como diferencial, não exibir os erros no template, caso a view não seja resolvida, ficando da seguinte forma.

<p>Hello, <span data-ng-bind="name"></span></p>

Conclusão

Como visto aqui, o angular trabalha com código modularizado, conta com inúmeras diretivas que atuam como uma espécie de extensão para o HTML, possibilitando com isso manipular o DOM de forma simples e prática, facilitando e muito a nossa vida.