Módulos AngularJS

¿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, directivas y filtros, de una manera que facilita su reutilización en diferentes aplicaciones.

En todos nuestros tutoriales anteriores, habrás notado la directiva ng-app utilizada para definir tu aplicación Angular principal. Esta es una de las claves concepts de módulos en Angular.JS.

Cómo crear un módulo en AngularJS

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

Consideremos la creación de un archivo llamado “DemoController.js” y agregando 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 estamos realizando la suma de 2 variables a y by asignando la suma de estas variables a una nueva variable, c, y asignándola nuevamente al objeto de alcance.

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 conectando 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 hacer referencia a la funcionalidad de nuestro controlador.

Nuestro código HTML principal no 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 Angular.JS, el patrón utilizado para desarrollar aplicaciones web modernas es la creación de múltiples módulos y controladores para separar lógicamente múltiples niveles de funcionalidad.

Normalmente los módulos se almacenarán en archivos Javascript separados, 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á 2 módulos, uno para realizar la funcionalidad de suma y el otro para realizar la funcionalidad de resta.
  • 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.

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 2 módulos angulares separados, uno que recibe el nombre "AdditionApp" y el segundo recibe el nombre "SubtractionApp".

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

    Hay 2 controladores separados definidos para cada módulo, uno se llama DemoAddController y el otro es DemoSubtractController. Cada controlador tiene una lógica separada para la suma y resta de numbers.

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>

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'

    Lo mismo haremos con la función de resta.

Paso 3) Crea los archivos principales de tu aplicación. Creemos un archivo llamado "ApplicationSubtraction.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 = "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 módulo 'SubtractionApp y DemoSubtractController utilizando la directiva ng-app y el ng-controller respectivamente.

  3. {{d}}

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

Resumen

  • Sin el uso de módulos AngularJS, los controladores empiezan a tener un alcance global lo que conduce a malas prácticas de programación.
  • Los módulos se utilizan para separar la lógica empresarial. Se pueden crear varios módulos para separarlos lógicamente dentro de estos diferentes módulos.
  • Cada módulo de AngularJS puede tener su propio conjunto de controladores definidos y asignados.
  • Al definir módulos y controladores, normalmente se definen por separado. JavaScript archivos. Luego se hace referencia a estos archivos JavaScript en el archivo principal de la aplicación.