Módulos AngularJS

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

⚡ Resumo Inteligente

Em AngularJS, os módulos atuam como contêineres que agrupam controladores, serviços, diretivas e filtros por trás de um limite lógico, de forma que a diretiva ng-app carregue apenas a funcionalidade que uma única página realmente precisa em tempo de execução.

  • 🔘 Definição: O angular.module registra e recupera todos os componentes que um aplicativo utiliza.
  • ☑️ Criação: Um array de dependências cria um módulo; omiti-lo recupera um.
  • ✅ Bootstrapping: ng-app nomeia o módulo que o Angular carrega para essa região.
  • 🧪 Separação: Controladores com escopo de módulo evitam nomes globais e conflitos entre controladores.
  • 📊 Nota de versão: O suporte ao AngularJS terminou em janeiro de 2022; o Angular prefere componentes independentes.
Saiba Mais

Grupo de módulos AngularJSping Controladores, serviços, diretivas e filtros sob um mesmo limite de ng-app.

O que é um módulo AngularJS?

Um módulo define a funcionalidade da aplicação que é aplicada a toda a página HTML usando a diretiva ng-app. Ele define funcionalidades como serviços, directivase filtros, de uma forma que facilita a sua reutilização em diferentes aplicações.

A ilustração acima resume esse limite.

Em todos os nossos trabalhos anteriores tutoriaisVocê deve ter notado a diretiva ng-app usada para definir sua aplicação Angular principal. Este é um dos conceitos-chave de módulos no AngularJS.

⚠️ Nota sobre a versão: O suporte ao AngularJS terminou em janeiro de 2022.. Moderno Angular Utiliza @NgModule e componentes independentes são seu padrão. O código abaixo é histórico.

Como criar um módulo em AngularJS

Antes de começarmos a explicar o que é um módulo, vejamos um exemplo de um. Aplicação AngularJS Sem um módulo, você entenderá a necessidade de ter módulos em sua aplicação.

Vamos considerar a criação de um arquivo chamado “DemoController.js” e a adição do código abaixo a esse 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 simplesmente somando duas variáveis, a e b, atribuindo o resultado dessa soma a uma nova variável, c, e atribuindo-a de volta à variável original. escopo objeto.

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 vinculando 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 acessar a funcionalidade do nosso controlador.

Setter versus getter: angular.module cria um módulo somente quando o dependência O array é passado como argumento; sem ele, a chamada recupera um módulo existente.

Nosso código HTML principal agora terá a aparência mostrada 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 AngularJS, o padrão usado para desenvolvimentoping A prática comum em aplicações web modernas é criar múltiplos módulos e controladores para separar logicamente os diversos 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á dois módulos: um para realizar a funcionalidade de adição e outro para realizar a funcionalidade de subtração.tracção.
  • Em seguida, criaremos 2 arquivos de aplicativo separados e acessaremos o arquivo Utility de cada arquivo de aplicativo.
  • Em um arquivo de aplicação, acessaremos o módulo de adição e, no outro, acessaremos o módulo de subtração.tracçã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',[]);

    Foram criados dois módulos AngularJS separados, um com o nome 'AdditionApp' e o outro com o nome 'Sub'.tractionApp'.

  2. AdditionApp.controller('DemoAddController', function($scope)
SubractionApp.controller('DemoSubtractController', function($scope)

    Existem dois controladores separados definidos para cada módulo: um chamado DemoAddController e o outro DemoSub.tractController. Cada controlador possui lógica separada para adição e subtração.tracçã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>

ARTIGOS RELACIONADOS

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 o subtracfunção ção.

Passo 3) Crie os arquivos principais da sua aplicação. Vamos criar um arquivo chamado “ApplicationSub”.traction.html” e adicione 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 'Subtracmódulo 'tionApp' e DemoSubtracO tController é criado usando as diretivas ng-app e ng-controller, respectivamente.

  3. {{d}}

    Como estamos fazendo referência ao módulo e controlador mencionados acima, podemos acessar a variável `$scope.d` por meio de uma expressão. A expressão será o resultado da sub-rotina.traca determinação das duas variáveis ​​de escopo a e b que foi realizada no 'DemoSub'tracControlador tController'

Perguntas Frequentes

Fornecer o array cria um módulo. Omiti-lo recupera o módulo registrado, portanto, vários arquivos estendem um único módulo. injeção espaço para nome.

Não. O AngularJS inicializa apenas o primeiro ng-app encontrado; módulos adicionais precisam de uma chamada manual ao método angular.bootstrap em seus respectivos elementos.

A função `config()` é executada enquanto os provedores se registram, portanto, somente provedores e constantes são injetados nela. A função `run()` é executada assim que o injetor estiver pronto.

O valor de ng-app não corresponde a nenhum módulo registrado. Erros de digitação, nomes entre aspas ou o carregamento do arquivo do módulo após o AngularJS podem causar isso.

Carregue-o através de angular.mock.module e, em seguida, resolva os controladores com inject(). A cobertura em nível de navegador, historicamente, controla a página. Protractor.

@NgModule Assumimos o controle no Angular 2 e os componentes independentes agora são o padrão, declarando dependências por meio de seu próprio array de importações.

Ferramentas de aprendizado de máquina leem cada chamada de angular.module, constroem um gráfico de dependências e classificam os módulos por risco de migração. RevOs espectadores verificam cada um Directivas mapa,ping.

Copiloto do GitHub e assistentes de agentes similares emitem esqueletos de módulos, controladores e arquivos a partir de um único prompt. O código gerado precisa ser revisado.

Resuma esta postagem com: