Módulos AngularJS

Por: James Hartmann James Hartmann
Hours Atualização do

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 facilita sua reutilização em diferentes aplicações.

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 do Angular.JS.

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 aplicação AngularJS sem módulo e então entender a necessidade de ter módulos em sua aplicação.

Vamos considerar a criação de um arquivo chamado “DemoController.js” e adicionando 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 funcionará 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á nossa aplicação principal. Vamos inserir o trecho de código abaixo em nossa página HTML.

<body ng-app="">
      <div ng-controller="DemoController">
      <h3> Guru99 Global Event</h3>
      {{c}}

No código acima, incluímos nosso DemoController e invocamos 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 chamados dentro do contexto da diretiva ng-app podem ser acessados ​​globalmente. Não há limite que separe vários controladores uns dos outros.
  • Agora, na programação moderna, é uma má prática não ter controladores conectados a nenhum módulo e torná-los globalmente acessíveis. Deve haver algum limite lógico definido para controladores.

E é aqui que entram os módulos. Os módulos são usados ​​para criar essa separação de limites e auxiliar na separação dos controladores com base na funcionalidade.

Vamos alterar 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

  1. var sampleApp = angular.module('sampleApp',[]);

    Estamos criando especificamente um módulo AngularJS chamado 'sampleApp'. Isto 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. Assim, podemos ter um módulo com um limite lógico que diz que este módulo realizará apenas a funcionalidade de cálculos matemáticos para a aplicação.

  2. 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 seremos capazes de fazer referência à funcionalidade do nosso controlador.

Nosso código HTML principal não será parecido com o mostrado abaixo

<body ng-app="'sampleApp'">
                           <div ng-controller="DemoController">
                           <h3> Guru99 Global Event</h3>
                		   {{c}}

Vamos observar as principais diferenças entre o código escrito acima e nosso código anterior

<body ng-app="'sampleApp'">

Em nossa tag corporal,

  • Em vez de ter uma diretiva ng-app vazia, agora chamamos o módulo sampleApp.
  • Ao chamar este módulo aplicativo, podemos agora acessar o controlador 'DemoController' e a funcionalidade presente no controlador demo.

Módulos e controladores em AngularJS

In Angular.JS, o padrão usado para desenvolver aplicativos da Web modernos é a criação de vários módulos e controladores para separar logicamente vários níveis de funcionalidade.

Normalmente os módulos serão armazenados em separado Javascript arquivos, que seriam diferentes do arquivo principal do aplicativo.

Vejamos um exemplo de como isso pode ser alcançado.

No exemplo abaixo,

  • Criaremos 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, criaremos 2 arquivos de aplicativo separados e acessaremos o arquivo Utility de cada arquivo de aplicativo.
  • Em um arquivo da aplicação acessaremos o módulo para adição e no outro acessaremos o módulo para subtração.

Passo 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 do código escrito acima

  1.  var AdditionApp = angular.module('AdditionApp',[]);
 var SubractionApp = angular.module('SubtractionApp',[]);

    Existem 2 módulos angulares separados criados, um com o nome 'AdditionApp' e o segundo com o nome 'SubtractionApp'.

  2. 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 lógica separada para adição e subtração de números.

Passo 2) Crie seus principais arquivos de aplicativos. Vamos criar um arquivo chamado ApplicationAddition.html e adicionar o código abaixo

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Addition</title>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
    <script src="lib/utilities.js"></script>
</head>
<body>
<div ng-app = "AdditionApp" ng-controller="DemoAddController">
    Addition :{{c}}

</div>
</body>
</html>

Vamos observar os pontos-chave do código escrito acima

  1. <script src="/lib/Utilities.js"></script>

    Estamos referenciando nosso arquivo Utilities.js em nosso arquivo principal do aplicativo. Isso nos permite fazer referência a quaisquer módulos AngularJS definidos neste arquivo.

  2. <div ng-app = "AdditionApp" ng-controller="DemoAddController">

    Estamos acessando o módulo 'AdditionApp' e DemoAddController usando a diretiva ng-app e o controlador ng respectivamente.

  3. {{c}}

    Como estamos fazendo referência ao módulo e ao 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 foi realizada no Controller 'DemoAddController'

    Da mesma forma que faremos para a função de subtração.

Passo 3) Crie os arquivos principais do seu aplicativo. Vamos criar um arquivo chamado “ApplicationSubtraction.html” e adicionar o código abaixo

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Addition</title>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
    <script src="lib/utilities.js"></script>
</head>
<body>
<div ng-app = "SubtractionApp" ng-controller="DemoSubtractController">
    Subtraction :{{d}}
  
</div>
</body>
</html>

Vamos observar os pontos-chave do código escrito acima

  1. <script src="/lib/Utilities.js"></script>

    Estamos referenciando nosso arquivo Utilities.js em nosso arquivo principal do aplicativo. Isso nos permite fazer referência a quaisquer módulos definidos neste arquivo.

  2. <div ng-app = " SubtractionApp " ng-controller=" DemoSubtractController ">

    Estamos acessando o módulo 'SubtractionApp e DemoSubtractController usando a diretiva ng-app e o ng-controller respectivamente.

  3. {{d}}

    Como estamos fazendo referência ao módulo e ao 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 'DemoSubtractController' Responsável pelo Tratamento

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 normalmente são definidos em separado JavaScript arquivos. Esses JavaOs arquivos de script são então referenciados no arquivo principal do aplicativo.

Você pode gostar: