Introducción a Angular JS

Definición de módulos Más videos

Descripción del tema

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="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!

Si no gustas registrarte en este momento no es necesario! Aún así puedes recibir los nuevos tutoriales en tu correo! Jamás te enviaremos Spam y puedes cancelar tu suscripción en cualquier momento.

¿Olvidaste tu contraseña?

6Comentarios

  • Avatar-4 juliogp 23/09/2014

    Listo!

    • Avatar-6 Rocko 16/10/2014

      Muy bien!

      • Avatar-1 obelich 14/11/2014

        Hola estan muy bien los video tutoriales, solo un detalle el audio se escucha algo despacio :(

        • Avatar-2 Luis 19/12/2014

          El video esta chido, pero estas mezclando jQuery(Ready) con Angular a la vez. y otra cosa, puedes explicar un poco mas sobre "use strict" por favor? gracias slaudos.

          • Avatar-2 Crysfel Villa 22/12/2014

            Hola Luis. La realidad es que no se está usando el ready de jQuery, si te das cuenta es una función anónima auto-ejecutable, la idea es (al igual que en jquery) mantener las variables privadas, entiendo tu confusión pues el código se parece mucho al ready que se usa en jQuery, pero observalo detenidamente y verás las diferencias xD El strict lo que hace es indicarle al engine de JavaScript que tire errores que de otra manera simplemente los ignoraría, esto para yo poder mejorar el código necesario, también permite optimizar el código y generalmente ejecutarlo más rápido, entre varias otras cosas más, posiblemente debería escribir un post al respecto. Saludos Saludos

          • Avatar-1 Luis Altuve 27/08/2016

            Excelente arranque!!! Seguimos con los demás temas

            Instructor del curso

            Crysfel3

            Autor: Crysfel Villa

            Ha participado en varios proyectos con Angular y es participante activo del grupo de Angular NYC.

            Descarga video Descarga Código Fuente

            Regístrate a este curso

            Este tutorial pertenece al curso Introducción a Angular JS, revisa todos los tutoriales que tenemos en este mismo curso ya que están en secuencia y van de lo más sencillo a lo más complicado.

            Tendrás acceso a descargar los videos, códigos y material adicional.

            Podrás resolver los ejercicios incluidos en el curso así como los Quizzes.

            Llevarás un registro de tu avance.