Introdução ao AngularJS

Novembro 2016

AngularJS é um framework JavaScript para a realização de páginas web dinâmicas.
Ele pode ser usado como uma alternativa ou complemento para outros frameworks, principalmente o jQuery.


Hello World!


Veja um primeiro exemplo de uso do AngularJS :

index.html
<!doctype html>
<html ng-app="firstApp">
<head>
    <meta charset="utf-8">
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.19/angular.min.js"></script>
    <script src="firstApp.js"></script>
</head>
<body ng-controller="firstCtrl">
    <h1>{{title}}</h1>
</body>
</html>

firstApp.js
var firstApp = angular.module('firstApp', []);

firstApp.controller('firstCtrl', function ($scope) {
    $scope.title = 'Hello World!';
});

Resultado:
Algumas explicações para entender:

Na instrução
<script src="firstApp.js"></script>
adicionamos o script AngularJs que vai definir o módulo
angular.module('firstApp', []);
e um controlador
controller('firstCtrl'
. Estes são respectivamente ligados à page html com
<html ng-app="firstApp">
e
<body ng-controller="firstCtrl">
.

Todas as directivas que começam por
ng-
são específicas ao AngularJS. Assim como as chaves
{{ }}
que permitem a exibição na página html de uma variável declarada no escopo do controlador.

No nosso exemplo
{{title}}
exibe o valor do
$scope.title
, ou seja, "Hello World!".

As variáveis do escopo


A programação em AngularJS consiste, principalmente, em alterar dinamicamente as variáveis od escopo no controlador e exibí-las na página web. A AngularJS atualizará, automaticamente, a exibição conforme os valores forem mudando.

Exemplo:

<body ng-controller="firstCtrl">
    <input type="text" ng-model="text">
    <pre>{{text}}</pre>
</body>

Aqui, criamos um campo de texto, ligado ao escopo pela diretiva
ng-model="text"
e que exibimos depois com
{{text}}
.

A cada mudança de valor no campo de texto, o parágrafo abaixo também muda.
Observação: não é preciso alterar o arquivo javascript para declarar a variável
$scope.text
, ela será undefined até que um primeiro valor seja digitado no campo de texto e, automaticamente, atualizado.

Comunicação com JSON


O funcionamento do AngularJS se presta bem ao uso intensivo de dados no formato JSON, principalmente graças às diversas diretivas de repetições.

Por exemplo, para a gestão de uma lista de idiomas.

$scope.languages = [
    {"id":"FR", "name":"Français", "flag":"http://flagpedia.net/data/flags/normal/fr.png"},
    {"id":"EN", "name":"English", "flag":"http://flagpedia.net/data/flags/normal/gb.png"},
    {"id":"ES", "name":"Español", "flag":"http://flagpedia.net/data/flags/normal/es.png"},
    {"id":"DE", "name":"Deutsch", "flag":"http://flagpedia.net/data/flags/normal/de.png"},
    {"id":"IT", "name":"Italiano", "flag":"http://flagpedia.net/data/flags/normal/it.png"}
    ];
    
$scope.spoken = $scope.languages[0];

<body ng-controller="firstCtrl">    
    <ul>
        <li ng-repeat="lang in languages">
            <img ng-src="{{lang.flag}}" width=20></img> {{lang.name}}
        </li>
    </ul>
    
    <select ng-model="spoken" ng-options="lang as lang.name for lang in languages">
    </select>
    
    <img ng-src="{{spoken.flag}}" height=50></img>
</body>

O que dá:
Neste exemplo, a página html não requer nenhuma modificação para adicionar ou remover um idioma, apenas o valor do
$scope.languages
deve ser atualizado.

Esta facilidade de interação com JSON permite considerar uma arquitetura cliente/servidor do tipo REST, por exemplo. Ou seja, fazer chamadas para o servidor para recuperar, na inicialização da página, ou a pedido, os valores de cada variável do escopo .

Observação: com o uso do ng-src nas imagens (em vez de src) o navegador não precisa baixar uma imagem com um caminho entre chaves
{{lang.flag}}
que, obviamente, não existe.

As bibliotecas


O coração do AngularJS é relativamente importante. Podemos encontrar uma extensa documentação no site oficial (em inglês) e descobrir sua funcionalidade com uma revista cheia de opções e alguns exemplos.

https://docs.angularjs.org/api

Mas o AngularJS não se limita apenas a sua API de base, é uma linguagem extensível, que permite que todos desenvolvam e disponibilizem seus próprios módulos.

Uma série de bibliotecas já estão disponíveis on-line. Citemos, em particular, a AngularUI que possui vários módulos para exibição, incluindo uma reescritura completa do Bootstrap (inicialmente baseado no jQuery).

http://angular-ui.github.io/

Para adicionar uma dependência a um módulo, devemos configurá-lo na tabela de inicialização.
Por exemplo, para o módulo Bootstrap da AngularUI teríamos:

var firstApp = angular.module('firstApp', ['ui.bootstrap']);

Podemos, então, mudar a página da web para usar os recursos do novo módulo e, por exemplo, com o Bootstrap, exibir as bandeiras de cada idioma em um mini-diaporama:

<!doctype html>
<html ng-app="firstApp">
<head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">    
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.19/angular.min.js"></script>
    <script src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.11.0.min.js"></script>
    <script src="firstApp.js"></script>
</head>
<body ng-controller="firstCtrl">
    <div style="width:500px">
        <carousel interval="1500">
            <slide ng-repeat="lang in languages">
                <img ng-src="{{lang.flag}}" style="margin:auto; max-height:200px"></img>
                {{lang.name}}
            </slide>
        </carousel>
    </div>
</body>
</html>

Veja o resultado esperado:


Tradução feita por Lucia Maurity y Nouira

Veja também :
Este documento, intitulado « Introdução ao AngularJS »a partir de CCM (br.ccm.net) está disponibilizado sob a licença Creative Commons. Você pode copiar, modificar cópias desta página, nas condições estipuladas pela licença, como esta nota aparece claramente.