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.
Instructor del curso
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.
6Comentarios
Listo!
Muy bien!
Hola estan muy bien los video tutoriales, solo un detalle el audio se escucha algo despacio :(
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.
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
Excelente arranque!!! Seguimos con los demás temas