Tutorial del módulo AngularJS con ejemplo

¿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 utilizando la directiva ng-app. Define funcionalidad, como servicios, directivas y filtros, de una manera que facilita su reutilización en diferentes aplicaciones.

En todos nuestros tutoriales anteriores, se habría dado cuenta de 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, usted aprenderá –

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

En el código anterior, hemos creado una función llamada “DemoController” que va a actuar como un controlador dentro de nuestra aplicación.

En este controlador, solo estamos realizando la adición de 2 variables a y b y asignando la adición de estas variables a una nueva variable, c, y asignándola de nuevo al objeto de alcance.

Ahora vamos a crear nuestra muestra principal.html, que será nuestra aplicación principal. Vamos a insertar el siguiente fragmento de código en nuestra página HTML.

En el código anterior, estamos incluyendo nuestro DemoController y luego invocando el valor de la variable $scope.c a través de una expresión.

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

  • Esto básicamente significa que todos los controladores que se llaman dentro del contexto de la directiva ng-app se pueden acceder globalmente. No hay límite que separe varios controladores entre sí.
  • Ahora, en la programación moderna, esta 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 en la separación de controladores en función de la funcionalidad.

Vamos a cambiar el código anterior para implementar módulos y adjuntar nuestro controlador a este módulo

Tomemos nota de las diferencias clave en el código escrito anteriormente

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 el papel de la adición de 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.

Ahora estamos adjuntando 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

Tomemos nota de 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 estamos llamando 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 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 ejemplo que figura a continuación,

  • Crearemos un archivo llamado Utilities.js que tendrá 2 módulos, uno para realizar la funcionalidad de suma y el otro para realizar la funcionalidad de resta.
  • A continuación, vamos a crear 2 archivos de aplicación separados y acceder al archivo de utilidad desde cada archivo de aplicación.
  • En un archivo de aplicación accederemos al módulo para sumar y en el otro, accederemos al módulo para restar.

Paso 1) Defina el código para los múltiples módulos y controladores.

Tomemos nota de los puntos clave en el código escrito arriba

Hay 2 módulos angulares separados creados, uno al que se le da el nombre ‘AdditionApp’ y al segundo se le da el nombre ‘SubtractionApp’.

Hay 2 controladores separados definidos para cada módulo, uno se llama demoAddController y el otro es demoSubtractController. Cada controlador tiene lógica separada para sumar y restar números.

Paso 2) Cree sus archivos de aplicación principales. Vamos a crear un archivo llamado ApplicationAddition.html y añadir el siguiente código

Tomemos nota de 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 mediante el uso de la directiva ng-app y el ng-controller respectivamente.

Como estamos haciendo referencia al módulo y controlador antes mencionados, podemos hacer referencia a la variable $scope.c a través de una expresión. La expresión será el resultado de la adición de las 2 variables de alcance a y b que se llevó a cabo en el controlador ‘DemoAddController’

De la misma manera que haremos para la función de resta.

Paso 3) Cree sus archivos de aplicación principales. Vamos a crear un archivo llamado “ApplicationSubtraction.html” y añadir el siguiente código

Tomemos nota de 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 mediante el uso de la directiva ng-app y el controlador ng-respectivamente.

Como estamos haciendo referencia al módulo y controlador antes mencionados, 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 a y b que se llevó a cabo 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 separarlos lógicamente dentro de estos diferentes módulos.
  • Cada módulo AngularJS puede tener su propio conjunto de controladores definidos y asignados a él.
  • 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.
0 replies

Leave a Reply

Want to join the discussion?
Feel free to contribute!

Leave a Reply

Your email address will not be published. Required fields are marked *