En este tema veremos como crear un módulo en Angular JS, Un módulo es una forma de organizar y agrupar funcionalidad, esto con la idea de poder distribuirlo fácilmente así como poder crear pruebas automatizadas de manera modular. También podemos decir que es un contenedor donde almacenamos nuestros controllers, directivas, filtros, etc.

Por ejemplo, si manejamos usuarios en nuestra aplicación, entonces tendríamos un sub-módulo de users, si necesitamos administrar productos podríamos tener un sub-modulo products, la idea es crear módulos reutilizables.

Para iniciar nuestra aplicación debemos declarar el módulo que será ejecutado cuando la aplicación se inicialice, para esto vamos a crear un archivo en js/app.js de la siguiente manera.

(function(){
    "use strict";

    angular.module('Bookmarks',[
        //dependencies here
    ]);

    console.log('Bookmarks module!');
})();

El método module recibe dos parámetros, el primero es el nombre del módulo que  vamos a crear y el segundo es un arreglo con las dependencias que queremos incluir, en este caso no tenemos dependencias pero más adelante agregaremos algunas.

Ahora necesitamos indicarle al atribute ng-app que módulo ejecutar primero, vamos a utilizar el mismo código del tutorial anterior para modificarlo de la siguiente manera.

<!DOCTYPE html>
<html ng-app="Bookmarks">
<head>
    <title>Installation - Angular JS</title>
</head>
<body>

    <div ng-init="name='John Smith'">
        <h1>Welcome {{name}}</h1>

        <p><input ng-model="name" type="text" /></p>
    </div>

    <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.0-rc.1/angular.min.js"></script>
    <script type="text/javascript" src="/courses/introduccion-a-angular-js/articles/js/app.js"></script>
</body>
</html>

Como se puede observar, estamos asignándole el nuevo módulo a nuestra app, también estamos incluyendo el nuevo archivo JavaScript que hemos creado.

Si ejecutamos el ejemplo en el navegador, veremos que en la consola aparecerá el mensaje que imprimimos, con esto probaremos que nuestro módulo se ha creado correctamente.

En el siguiente tema veremos como crear controladores y como desplegar información en las vistas.

Te gustaría recibir más tutoriales como este en tu correo?

Este tutorial pertenece al curso Introducción a Angular JS, te recomiendo revises el resto de los tutoriales ya que están en secuencia de menor a mayor complejidad.

Si deseas recibir más tutoriales como este en tu correo te recomiendo registrarte al curso, si ya eres miembro solo identifícate y registrate al curso, si no eres miembro te puedes registrar gratuitamente!