Módulos AngularJS

Por: james hartman james hartman
Hours Actualizado

⚡ Resumen inteligente

En AngularJS, los módulos actúan como contenedores que agrupan controladores, servicios, directivas y filtros detrás de un límite lógico, de modo que la directiva ng-app carga solo la funcionalidad que una página individual realmente necesita en tiempo de ejecución.

  • 🔘 Definición: angular.module registra y recupera todos los componentes que utiliza una aplicación.
  • ☑️ Creación: Un array de dependencias crea un módulo; si se omite, se recupera uno.
  • ✅ Bootstrapping: ng-app nombra el módulo que Angular carga para esa región.
  • 🧪 Separación: Los controladores con ámbito de módulo evitan los nombres globales y los conflictos entre controladores.
  • 📊 Nota de versión: El soporte para AngularJS finalizó en enero de 2022; Angular prefiere los componentes independientes.
Descubre más

Grupo de módulos AngularJSping controladores, servicios, directivas y filtros bajo un mismo límite de ng-app

¿Qué es un módulo AngularJS?

Un módulo define la funcionalidad de la aplicación que se aplica a toda la página HTML mediante la directiva ng-app. Define funcionalidades, como servicios, directivasy filtros, de forma que resulte fácil reutilizarlos en diferentes aplicaciones.

La ilustración anterior resume ese límite.

En todos nuestros anteriores TutorialesComo habrás notado, la directiva ng-app se utiliza para definir la aplicación principal de Angular. Este es uno de los conceptos clave de los módulos en AngularJS.

⚠️ Nota de versión: El soporte para AngularJS finalizó en enero de 2022.. Moderno Angular Utiliza @NgModule, y los componentes independientes son su configuración predeterminada. El código que aparece a continuación es histórico.

Cómo crear un módulo en AngularJS

Antes de comenzar con qué es un módulo, veamos un ejemplo de un Aplicación AngularJS sin un módulo y luego comprender la necesidad de tener módulos en su aplicación.

Consideremos la posibilidad de crear un archivo llamado “DemoController.js” y agregar el siguiente código al archivo.

function DemoController($scope) {
                                    $scope.a=1;
                                    $scope.b=2;
                                    $scope.c=$scope.b + $scope.a;
                            }

En el código anterior, hemos creado una función llamada "DemoController" que actuará como controlador dentro de nuestra aplicación.

En este controlador, simplemente realizamos la suma de 2 variables a y b y asignamos la suma de estas variables a una nueva variable, c, y la volvemos a asignar a la global objeto.

Ahora creemos nuestro Sample.html principal, que será nuestra aplicación principal. Insertemos el siguiente fragmento de código en nuestra página HTML.

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

En el código anterior, incluimos nuestro DemoController y luego invocamos el valor de la variable $scope.c mediante una expresión.

Pero observe nuestra directiva ng-app, tiene un valor en blanco.

  • Básicamente, esto significa que se puede acceder globalmente a todos los controladores que se llaman dentro del contexto de la directiva ng-app. No existe ningún límite que separe a varios controladores entre sí.
  • Ahora, en la programación moderna, es una mala práctica tener controladores no conectados a ningún módulo y hacerlos accesibles globalmente. Tiene que haber algún límite lógico definido para los controladores.

Y aquí es donde entran los módulos. Los módulos se utilizan para crear esa separación de límites y ayudar a separar los controladores según su funcionalidad.

Cambiemos el código anterior para implementar módulos y conectemos nuestro 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;
                         });

Notemos las diferencias clave en el código escrito arriba.

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

    Estamos creando específicamente un módulo AngularJS llamado "sampleApp". Esto formará un límite lógico para la funcionalidad que contendrá este módulo. Entonces, en nuestro ejemplo anterior, tenemos un módulo que contiene un controlador que realiza la función de agregar 2 objetos de alcance. Por lo tanto, podemos tener un módulo con un límite lógico que diga que este módulo solo realizará la funcionalidad de cálculos matemáticos para la aplicación.

  2. sampleApp.controller('DemoController', function($scope)

    Ahora estamos vinculando el controlador a nuestro módulo AngularJS “sampleApp”. Esto significa que si no hacemos referencia al módulo “sampleApp” en nuestro código HTML principal, no podremos acceder a la funcionalidad de nuestro controlador.

Setter versus getter: módulo angular crea un módulo solo cuando el dependencia Se pasa un array; sin él, la llamada recupera un módulo existente.

Nuestro código HTML principal ahora se verá como se muestra a continuación.

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

Observemos las diferencias clave entre el código escrito arriba y nuestro código anterior.

<body ng-app="sampleApp">

En nuestra etiqueta corporal,

  • En lugar de tener una directiva ng-app vacía, ahora llamamos al módulo sampleApp.
  • Al llamar a este módulo de aplicación, ahora podemos acceder al controlador 'DemoController' y a la funcionalidad presente en el controlador de demostración.

Módulos y controladores en AngularJS

In AngularJS, el patrón utilizado para el desarrolloping El objetivo de las aplicaciones web modernas es crear múltiples módulos y controladores para separar lógicamente los distintos niveles de funcionalidad.

Normalmente los módulos se almacenarán en separado JavaScript archivos, que serían diferentes del archivo principal de la aplicación.

Veamos un ejemplo de cómo se puede lograr esto.

En el siguiente ejemplo,

  • Crearemos un archivo llamado Utilities.js que contendrá dos módulos: uno para realizar la función de suma y otro para realizar la función de resta.tracción.
  • Luego, crearemos 2 archivos de aplicación separados y accederemos al archivo de utilidad desde cada archivo de aplicación.
  • En un archivo de aplicación accederemos al módulo de suma y en el otro, accederemos al módulo de resta.tracción.

Paso 1) Defina el código para los múltiples módulos y 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;
});

Notemos los puntos clave en el código escrito arriba.

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

    Se crean dos módulos AngularJS separados, uno llamado 'AdditionApp' y el segundo llamado 'Sub'.tractionApp'.

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

    Hay dos controladores separados definidos para cada módulo, uno se llama DemoAddController y el otro DemoSub.tractController. Cada controlador tiene una lógica separada para la suma y la resta.tracción de números.

Paso 2) Crea los archivos principales de tu aplicación. Creemos un archivo llamado ApplicationAddition.html y agreguemos el siguiente código

<!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>
No te pierdas

Notemos los puntos clave en el código escrito arriba.

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

    Estamos haciendo referencia a nuestro archivo Utilities.js en nuestro archivo de aplicación principal. Esto nos permite hacer referencia a cualquier módulo de AngularJS definido en este archivo.

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

    Estamos accediendo al módulo 'AdditionApp' y DemoAddController usando la directiva ng-app y la controlador ng respectivamente.

  3. {{c}}

    Dado que estamos haciendo referencia al módulo y al controlador mencionados anteriormente, podemos hacer referencia a la variable $scope.c mediante una expresión. La expresión será el resultado de la suma de las 2 variables de alcance a y b que se realizó en el Controlador 'DemoAddController'

    De la misma manera lo haremos para los subtracfunción de ción.

Paso 3) Crea los archivos principales de tu aplicación. Vamos a crear un archivo llamado “ApplicationSub”.traction.html” y agregue el siguiente código

<!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>

Notemos los puntos clave en el código escrito arriba.

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

    Estamos haciendo referencia a nuestro archivo Utilities.js en nuestro archivo de aplicación principal. Esto nos permite hacer referencia a cualquier módulo definido en este archivo.

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

    Estamos accediendo al 'SubtracMódulo 'tionApp' y DemoSubtractController mediante el uso de la directiva ng-app y ng-controller respectivamente.

  3. {{d}}

    Dado que hacemos referencia al módulo y controlador mencionados anteriormente, podemos hacer referencia a la variable $scope.d a través de una expresión. La expresión será el resultado de la subtracción de las 2 variables de alcance a y b que se llevó a cabo en el 'DemoSub'tracControlador tController

Preguntas Frecuentes

Proporcionar el array crea un módulo. Omitirlo recupera el módulo registrado, por lo que varios archivos extienden uno. inyección espacio de nombres

No. AngularJS solo inicializa el primer ng-app que encuentra; los módulos adicionales necesitan una llamada manual a angular.bootstrap en su elemento.

La función config() se ejecuta mientras los proveedores se registran, por lo que solo los proveedores y las constantes se inyectan allí. La función run() se ejecuta una vez que el inyector está listo.

El valor ng-app no ​​coincide con ningún módulo registrado. Esto puede deberse a errores tipográficos, nombres entre comillas o a la carga del archivo del módulo después de AngularJS.

Cárguelo a través de angular.mock.module, luego resuelva los controladores con inject(). La cobertura a nivel de navegador, en cambio, controla la página, históricamente con Protractor.

@MóduloNg Esta práctica se implementó en Angular 2, y ahora los componentes independientes son la opción predeterminada, declarando las dependencias a través de su propio array de importaciones.

Las herramientas de aprendizaje automático leen cada llamada a angular.module, construyen un gráfico de dependencias y clasifican los módulos según el riesgo de migración. RevLos espectadores verifican cada uno Directivas mapaping.

Copiloto de GitHub y asistentes de agencia similares generan esqueletos de módulos, controladores y archivos a partir de una única solicitud. El código generado necesita revisión.

Resumir este post con: