Desenvolvendo com AngularJS - Parte 2

Diretivas e controladores básicos do AngularJS

Jul 1, 2015Tempo de leitura 2 min

Introdução

Exploraremos os módulos e os controladores do AngularJS e criaremos nossos próprios controladores. Em seguida, usaremos esses controladores para carregar dados ou estados em nossa aplicação e manipularesmos o HTML.

Módulos do AngularJS

Os módulos correspondem ao modo como o AngularJS empacota códigos relevantes usando um único nome.

  • Um módulo pode definir seus próprios controladores, serviços, factories e diretivas. São funções e códigos que podem ser acessados em todo o módulo.
  • O módulo pode depender de outros módulos, assim podendo acessar controladores, serviços etc. definidos nesse outro módulo.

O módulo também é usado para inicializar uma aplicação, assim podemos dizer ao AngularJS qual módulo deve ser carregado como o principal ponto de entrada.

Vamos ver como definir um módulo chamdo MeuModulo:

  angular.module('MeuModulo', []);
  • O primeiro argumento da função corresponde ao nome do módulo.
  • O segundo argumento corresponde a um array de nomes de módulos dos quais esse módulo depende.
  • Observe que os colchetes vazios que passamos [] no segundo argumento, diz ao AngularJS para criar um módulo chamado MeuModulo sem dependências.

Um exemplo de um módulo com dependências

  angular.module('MeuModulo', ['dependencia1', 'dependencia2']);

Se quisermos carregar um módulo que já foi definido em outro arquivo, devemos usar a função angular.module somente com o primeiro argumento.

  angular.module('MeuModulo');

Há dois erros comuns ao tentar definir um módulo

  • Tentar definir um módulo sem passar o segundo argumento, um erro sera gerado 'No module found'.
  • Tentar carregar um módulo de outro arquivo que não foi carregado na página.

Agora vamos ver um exemplo de como usar esse módulo

See the Pen Module by Airton Vancin Junior (@airton) on CodePen.

  • A diretiva ng-app recebe um argumento opcional, que corresponde ao nome do módulo a ser carregado durante a inicialização

Criando nosso próprio controlador

Controladores em AngularJS representam as funções JavaScript.

Algumas responsabilidades comuns de um controlador em um aplicação AngularJS incluem:

  • Acessar os dados no servidor
  • Decidir quais partes dos dados devem ser apresentadas ao usuário
  • Lógica de apresentação - por exemplo de que modo os elementos serão exibidos
  • Interação com o usuário - por exemplo oque acontece quando o usuário clica em algo.

Vamos ver como podemos criar um controlador para o nosso módulo MeuModulo

See the Pen Creating controller by Airton Vancin Junior (@airton) on CodePen.

  • Definimos um controlador usando a função controller
  • A função controller recebe o nome MainCrlt como primeiro argumento
  • O segundo argumento do controlador é o que ele faz e como faz
  • Há um pequeno truque nesse caso, definimos nossa função de controller dentro de um array. Ou seja, o primeiro argumento é o nome MainCtrl e o segundo um array []. O array armazena todas as dependências do controlador em variáveis na forma de string. E a função é o unico argumento presente no array.
  • Vimos a nova diretiva ng-controller. Ela é usada ara dizer ao AngularJS que crie uma instância do controller com o nome especificado e a associe ao elemento do DOM.

Sintaxe da injeção de dependência e o AngularJS
A notação que usamos é uma de duas opões que podem ser utilizadas para efetuar a decalaração de controladores no AngularJS. O estilo que usamos nos exemplos é o estilo seguro da injeção de dependência ou declaração, que também é a maneira recomendada:

angular.module('MeuModulo', [])
  .controller('MainCtrl', function(){
});

o funcionamento será semelhante, porém isso poderá causar problemas se houver um passo para minificar o nosso código.

Criando nossa primeira Aplicação AngularJS com controlador

See the Pen QbObxg by Airton Vancin Junior (@airton) on CodePen.

  • Definimos a variável goodbyeMSg usando a palavra-chave this e a variável goodbyeMsg usando a palavra chave var
  • Usamos esse controlador por meio da diretiva ng-controller. Essa diretiva permite associar uma instância de um controlador a um elemento, nesse caso o body
  • Demos um nome a essa instância MainCtrl em particular quando usamos ng-controller. Nesse caso chamamos de ctrl. Isso é conhecido como sintaxe controllerAs em AngularJS.
  • Fizemos referência às variaveis helloMsg e goodbyeMsg do controlador no HTML usando a notação de chaves duplas { { } }
  • Tudo que o HTML tenha de usar deverá ser definido em this. Tudo que o HTML não acessar diretamente não deverá ser colocado em this, mas deverá ser salvo como variável local no escopo do controlador, semelhante a goodbyeMsg.

$scope versus sintaxe controllerAs
Nas versões anteriores a 1.2 do AngularJS, usava a variável $scope. No Angular 1.2 e mais recentes, há uma nova sintaxe - a sintaxe controllerAs, que permite definir as variáveis na instância do controlador usando a palavra-chave this.