O que é um módulo AngularJS?
Um módulo define a funcionalidade do aplicativo que é aplicada a toda a página HTML usando a diretiva ng-app. Ele define funcionalidades, como serviços, diretivas e filtros, de forma que seja fácil reutilizá-los em diferentes aplicativos.
Em todos os nossos tutoriais anteriores, você deve ter notado a diretiva ng-app usada para definir seu aplicativo Angular principal. Este é um dos conceitos-chave dos módulos no Angular.JS.
Neste tutorial, você aprenderá-
- Como criar um módulo em AngularJS
- Módulos e controladores
Como criar um módulo em AngularJS
Antes de começarmos com o que é um módulo, vamos dar uma olhada em um exemplo de um aplicativo AngularJS sem um módulo e então entender a necessidade de ter módulos em seu aplicativo.
Vamos considerar a criação de um arquivo chamado "DemoController.js" e adicionar o código abaixo ao arquivo
Function Democontroller($scope) {$scope.a=1;$scope.b=2;$scope.c=$scope.b + $scope.a;});
No código acima, criamos uma função chamada "DemoController" que vai atuar como um controlador dentro de nossa aplicação.
Neste controlador, estamos apenas realizando a adição de 2 variáveis aeb e atribuindo a adição dessas variáveis a uma nova variável, c, e atribuindo-a de volta ao objeto de escopo.
Agora vamos criar nosso Sample.html principal, que será nosso aplicativo principal. Vamos inserir o trecho de código abaixo em nossa página HTML.
Evento Global Guru99
{{c}}No código acima, estamos incluindo nosso DemoController e, em seguida, chamamos o valor da variável $ scope.c por meio de uma expressão.
Mas observe nossa diretiva ng-app, ela tem um valor em branco.
- Isso basicamente significa que todos os controladores que são chamados dentro do contexto da diretiva ng-app podem ser acessados globalmente. Não há limite que separa vários controladores uns dos outros.
- Agora, na programação moderna, esta é uma má prática ter controladores não anexados a nenhum módulo e torná-los globalmente acessíveis. Deve haver algum limite lógico definido para os controladores.
E é aí que entram os módulos. Os módulos são usados para criar essa separação de limites e ajudar a separar os controladores com base na funcionalidade.
Vamos mudar o código acima para implementar módulos e anexar nosso controlador a este módulo
var sampleApp = angular.module('sampleApp',[]);sampleApp.controller('DemoController', function($scope) {$scope.a=1;$scope.b=2;$scope.c=$scope.b + $scope.a;});Vamos observar as principais diferenças no código escrito acima
var sampleApp = angular.module('sampleApp',[]);Estamos criando especificamente um módulo AngularJS chamado 'sampleApp'. Isso formará um limite lógico para a funcionalidade que este módulo conterá. Portanto, em nosso exemplo acima, temos um módulo que contém um controlador que desempenha a função de adição de 2 objetos de escopo. Portanto, podemos ter um módulo com um limite lógico que diz que este módulo apenas executará a funcionalidade de cálculos matemáticos para a aplicação.
sampleApp.controller('DemoController', function($scope)Agora estamos anexando o controlador ao nosso módulo AngularJS "SampleApp". Isso significa que se não fizermos referência ao módulo 'sampleApp' em nosso código HTML principal, não poderemos fazer referência à funcionalidade de nosso controlador.
Nosso código HTML principal não se parecerá com o mostrado abaixo
Guru99 Global Event
{{c}}Vamos observar as principais diferenças no código escrito acima e em nosso código anterior
Em nossa tag corporal,
- Em vez de ter uma diretiva ng-app vazia, agora estamos chamando o módulo sampleApp.
- Ao chamar este módulo de aplicação, podemos agora acessar o controlador 'DemoController' e a funcionalidade presente no controlador demo.
Módulos e controladores
No Angular.JS, o padrão usado para desenvolver aplicativos da web modernos é o de criar vários módulos e controladores para separar logicamente vários níveis de funcionalidade.
Normalmente, os módulos são armazenados em arquivos Javascript separados, que são diferentes do arquivo principal do aplicativo.
Vejamos um exemplo de como isso pode ser alcançado.
No exemplo abaixo,
- Vamos criar um arquivo chamado Utilities.js que conterá 2 módulos, um para realizar a funcionalidade de adição e outro para realizar a funcionalidade de subtração.
- Em seguida, vamos criar 2 arquivos de aplicativo separados e acessar o arquivo do utilitário de cada arquivo de aplicativo.
- Em um arquivo do aplicativo acessaremos o módulo de adição e no outro acessaremos o módulo de subtração.
Etapa 1) Defina o código para os vários módulos e controladores.
var AdditionApp = angular.module('AdditionApp',[]);AdditionApp.controller('DemoAddController', function($scope) {$scope.a=5;$scope.b=6;$scope.c=$scope.a + $scope.b;});var SubractionApp = angular.module('SubtractionApp',[]);SubractionApp.controller('DemoSubtractController', function($scope) {$scope.a=8;$scope.b=6;$scope.d=$scope.a - $scope.b;});Vamos observar os pontos-chave no código escrito acima
var AdditionApp = angular.module('AdditionApp',[]);var SubractionApp = angular.module('SubtractionApp',[]);Existem 2 módulos angulares separados criados, um que recebe o nome de 'AdditionApp' e o segundo é denominado 'SubtractionApp'.
AdditionApp.controller('DemoAddController', function($scope)SubractionApp.controller('DemoSubtractController', function($scope)Existem 2 controladores separados definidos para cada módulo, um é chamado DemoAddController e o outro é DemoSubtractController. Cada controlador possui uma lógica separada para adição e subtração de números.
Etapa 2) Crie os arquivos principais do aplicativo. Vamos criar um arquivo chamado ApplicationAddition.html e adicionar o código abaixo
Addition Addition :{{c}}Vamos observar os pontos-chave no código escrito acima
Estamos referenciando nosso arquivo Utilities.js em nosso arquivo de aplicativo principal. Isso nos permite fazer referência a quaisquer módulos AngularJS definidos neste arquivo.
Estamos acessando o módulo 'AdditionApp' e o DemoAddController usando a diretiva ng-app e o controlador ng, respectivamente.
{{c}}Como estamos fazendo referência ao módulo e controlador mencionados acima, podemos fazer referência à variável $ scope.c por meio de uma expressão. A expressão será o resultado da adição das 2 variáveis de escopo aeb que foram realizadas no Controlador 'DemoAddController'
Da mesma forma que faremos para a função de subtração.
Etapa 3) Crie os arquivos principais do aplicativo. Vamos criar um arquivo chamado "ApplicationSubtraction.html" e adicionar o código abaixo
Addition Subtraction :{{d}}Vamos observar os pontos-chave no código escrito acima
Estamos referenciando nosso arquivo Utilities.js em nosso arquivo de aplicativo principal. Isso nos permite fazer referência a quaisquer módulos definidos neste arquivo.
Estamos acessando o módulo 'SubtractionApp e DemoSubtractController usando a diretiva ng-app e o controlador ng, respectivamente.
{{d}}Como estamos fazendo referência ao módulo e controlador mencionados acima, podemos fazer referência à variável $ scope.d por meio de uma expressão. A expressão será o resultado da subtração das 2 variáveis de escopo aeb que foi realizada no Controlador 'DemoSubtractController'
Resumo
- Sem o uso de módulos AngularJS, os controladores passam a ter um escopo global, o que leva a más práticas de programação.
- Módulos são usados para separar a lógica de negócios. Vários módulos podem ser criados para serem separados logicamente dentro desses diferentes módulos.
- Cada módulo AngularJS pode ter seu próprio conjunto de controladores definidos e atribuídos a ele.
- Ao definir módulos e controladores, eles são normalmente definidos em arquivos JavaScript separados. Esses arquivos JavaScript são então referenciados no arquivo principal do aplicativo.