Seguimos con la serie de artículos de AngularJS Fácil .

En este artículo vamos a ver qué son los módulos de AngularJS . Comenzamos:

Tus aplicaciones en AngularJS estarán compuestas por módulos. Todos los controladores de AngularJS deben pertenecer a un módulo.
Con el uso de módulos mantenemos nuestro código limpio y bien organizado.

A continuación te pongo un ejemplo de aplicación AngularJS que usa módulos.

Ejemplo de Módulo en AngularJS

En este ejemplo, "miAplicacion.js"  contiene un módulo de definición de la aplicación "miAplicacion", "miControlador.js" contiene un contralador:

    <div ng-app="miAplicacion" ng-controller="miControlador">
        {{ nombre + " " + apellidos}}
    </div>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script>
    <script src="miAplicacion.js"></script>
    <script src="miControlador.js"></script>


Los Controladores ensucian el ámbito Global de JavaScript


En todos los ejemplos que hemos ido viendo, a lo largo de los artículos sobre AngularJS, hemos usado funciones Globales. Esto no está bien.

Las variables globales y las funciones globales no se deben usar en las aplicaciones de AngularJS, ya que podrán ser sobrescritos o eliminados por otros scripts.

Para corregir este problema, en AngularJS, hacemos uso de los módulos .

Aquí tienes un ejemplo usando módulos y sin usar módulos.

Módulos de AngularJS


Usando un controlador simple:
<!DOCTYPE html>
<html>
<body>
    <div ng-app="" ng-controller="miControlador">
        {{ nombre + " " + apellidos }}
    </div>
    <script>
    function miControlador($scope) {
        $scope.nombre = "Mario";
        $scope.apellidos = "Flores";
    }
    </script>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script>
</body>
</html>
Usando un controlador perteneciente a un módulo:
<!DOCTYPE html>
<html>
<head>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script>
</head>
<body>
    <div ng-app="miAplicacion" ng-controller="miControlador">
        {{ nombre + " " + apellidos }}
    </div>
    <script>
        var app = angular.module("miAplicacion", []);
        app.controller("miControlador", function($scope) {
            $scope.nombre = "Mario";
            $scope.apellidos = "Flores";
        });
    </script>
</body>
</html>
* Podrás notar que en la segunda versión con módulos hemos cargado AngularJS en la sección <head>.


Definicion de los Módulos

Un consejo recomendado para las aplicaciones web, es colocar todos los script al final del documento HTML antes de cerrar la etiqueta <body>.

Esto provoca la página cargue mucho más rápido, ya que la carga del HTML no estará bloqueada por la carga de los scripts.

En muchas aplicaciones de AngularJS verás que la librería Angular es cargada en la sección <head> de la web (como en el ejemplo anterior).

En el ejemplo anterior, AngularJS es cargado en la sección <head>, lo hacemos así por que la llamada a angular.module solo puede hacerse después de que haya cargado la librería Angular.

Como podrás pensar, otra solución completamente válida, es cargar la librería de AngularJS en el <body>, antes de nuestros scripts de AngularJS.

Ejemplo:

<!DOCTYPE html>
<html>
<body>
    <div ng-app="miAplicacion" ng-controller="miControlador">
        {{ nombre + " " + apellidos }}
    </div>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script>
    <script>
        var app = angular.module("miAplicacion", []);
        app.controller("miControlador", function($scope) {
            $scope.nombre = "Mario";
            $scope.apellidos = "Flores";
        });
    </script>
</body>
</html>


Ficheros de una Aplicación AngularJS


Ahora que ya sabes que son los módulos, y cómo funcionan, es hora de construir tus propios ficheros que compondrán tu aplicación AngularJS.

Tu aplicación debe tener al menos un archivo para el módulo y otro archivo por cada controlador.

Primero creamos el script para el módulo, lo llamaremos "miAplicacion.js":

var app = angular.module("myApp", []);

Luego creamos los controladores. En este caso "miControlador.js":

app.controller("miControlador", function($scope) { 
	$scope.nombre= "Mario";
	$scope.apellidos= "Flores";
});


Por último, editaremos la página HTML para cargar estos archivos:

<!DOCTYPE html>
<html>
<body>
    <div ng-app="myApp" ng-controller="myCtrl">
        {{ firstName + " " + lastName }}
    </div>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script>
    <script src="myApp.js"></script>
    <script src="myCtrl.js"></script>
</body>
</html>

Ver Indice Tutorial