¿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 la funcionalidad, como servicios, directivas y filtros, de una manera que facilita su reutilización en diferentes aplicaciones.
En todos nuestros tutoriales anteriores, habría notado la directiva ng-app utilizada para definir su aplicación Angular principal. Este es uno de los conceptos clave de los módulos en Angular.JS.
En este tutorial, aprenderá:
- Cómo crear un módulo en AngularJS
- Módulos y controladores
Cómo crear un módulo en AngularJS
Antes de comenzar con lo que es un módulo, veamos un ejemplo de una aplicación AngularJS sin un módulo y luego comprendamos la necesidad de tener módulos en su aplicación.
Consideremos 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 un controlador dentro de nuestra aplicación.
En este controlador, solo estamos realizando la adición de 2 variables ayby asignando la adición de estas variables a una nueva variable, c, y volviendo a asignarla 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.
Evento global Guru99
{{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 a todos los controladores que se llaman dentro del contexto de la directiva ng-app de forma global. No existe un límite que separe a varios controladores entre sí.
- Ahora, en la programación de hoy en día, 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 la funcionalidad.
Cambiemos el código anterior para implementar módulos y adjuntar 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;});Observemos las diferencias clave en el código escrito arriba.
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 dice que este módulo solo realizará la funcionalidad de cálculos matemáticos para la aplicación.
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
Guru99 Global Event
{{c}}Observemos las diferencias clave en el código escrito arriba y nuestro código anterior
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 la funcionalidad presente en el controlador de demostración.
Módulos y controladores
En Angular.JS, el patrón utilizado para desarrollar aplicaciones web modernas es crear 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 la 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;});Observemos los puntos clave en el código escrito arriba.
var AdditionApp = angular.module('AdditionApp',[]);var SubractionApp = angular.module('SubtractionApp',[]);Se crean 2 módulos angulares separados, uno al que se le da el nombre 'AdditionApp' y al segundo se le da el nombre 'SubtractionApp'.
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 sumar y restar números.
Paso 2) Cree los archivos de su aplicación principal. Creemos un archivo llamado ApplicationAddition.html y agreguemos el siguiente código
Addition Addition :{{c}}Observemos los puntos clave en el código escrito arriba.
Estamos haciendo referencia a nuestro archivo Utilities.js en nuestro archivo de aplicación principal. Esto nos permite hacer referencia a cualquier módulo AngularJS definido en este archivo.
Estamos accediendo al módulo 'AdditionApp' y DemoAddController usando la directiva ng-app y el ng-controller respectivamente.
{{c}}Dado que estamos haciendo referencia al módulo y controlador mencionados anteriormente, podemos hacer referencia a la variable $ scope.c a través de una expresión. La expresión será el resultado de la suma de las 2 variables de alcance ayb que se realizó en el Controlador 'DemoAddController'
De la misma forma que lo haremos para la función de resta.
Paso 3) Cree los archivos de su aplicación principal. Creemos un archivo llamado "ApplicationSubtraction.html" y agreguemos el siguiente código
Addition Subtraction :{{d}}Observemos los puntos clave en el código escrito arriba.
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.
Estamos accediendo al módulo 'SubtractionApp y DemoSubtractController usando la directiva ng-app y el ng-controller respectivamente.
{{d}}Dado que estamos haciendo 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 resta de las 2 variables de alcance ayb que se realizó en el Controlador 'DemoSubtractController'
Resumen
- Sin el uso de módulos AngularJS, los controladores comienzan a tener un alcance global 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 que se separen lógicamente dentro de estos diferentes módulos.
- Cada módulo AngularJS puede tener su propio conjunto de controladores definidos y asignados.
- Al definir módulos y controladores, normalmente se definen en archivos JavaScript separados. A continuación, se hace referencia a estos archivos JavaScript en el archivo principal de la aplicación.