- Un módulo AngularJS define una aplicación.
- El módulo es un contenedor para las diferentes partes de una aplicación.
- El módulo es un contenedor para los controladores de aplicaciones.
- Los controladores pertenecen siempre a un módulo.
Creando un módulo:
Un módulo se crea utilizando la función AngularJS
angular.module
<div ng-app="myApp">
<!-- myApp es como se llama la aplicación -->
</div>
<script>
//angular.module crea la aplicación
//app contiene la aplicación
var app = angular.module("myApp", []);
</script>
- El parámetro "myApp" hace referencia a un elemento HTML en el que se ejecutará la aplicación.
- Ahora puede agregar controladores, directivas, filtros y más, a su aplicación AngularJS.
- El parámetro [] de la definición del módulo se puede utilizar para definir módulos dependientes.
- Sin el parámetro [], no está creando un módulo nuevo, sino recuperando uno existente.
Módulos en archivos
Es común en las aplicaciones AngularJS poner el módulo y los controladores en archivos JavaScript.
<div ng-app="myApp">
<!-- myApp es como se llama la aplicación -->
</div>
<script src="myApp.js"></script>
El archivo
myApp.js contiene lo siguiente:
<script>
//angular.module crea la aplicación
//app contiene la aplicación
var app = angular.module("myApp", []);
</script>
Las funciones pueden contaminar el espacio de nombres global
- Las funciones globales deben evitarse en JavaScript. Pueden ser sobrescritos o destruidos fácilmente por otros scripts.
- Los módulos AngularJS reducen este problema, manteniendo todas las funciones locales en el módulo.
Cuándo cargar la biblioteca
- Si bien es común en las aplicaciones HTML colocar scripts al final del elemento <body>, se recomienda cargar la biblioteca AngularJS en el <head> o al inicio del <body>.
- Esto se debe a que las llamadas a angular.module sólo se pueden compilar después de cargar la biblioteca.