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.
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:
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.