AngularJS - ¿Que es un Modulo en AngularJS? - ¿Por que usar Módulos? - Codificación paso a paso de un Modulo en AngularJS
Hola continuando con nuestro pequeño curso de AngularJS, hoy vamos a ver Módulos.
Vamos aclarar que la firma real de la invocación de un modulo es la siguiente "angular.module('miApp', [ ... ], function(...){ ... })".
Siendo "angular" una variable global que se carga al momento de cargar AngularJS. Luego vemos "module", module no es mas que un método que posee el objeto angular para crear modulo. El primer parámetro del método module es el nombre que le asignaremos al modulo. El segundo parámetro sirve para cargar mas módulos, ya sea creados por nosotros o por terceros, esto se agregan separados por como, esto serian nuestras "dependencias". El tercer parámetro es opcional y acá agregamos una función para configurar AngularJS.
Con la llamada angular.module('miApp'. []) nos devolverá un objeto modulo, que tiene una batería de métodos como config, factory, provider, value, run, directive, controller, service, etc. Que son los que nos sirven para controlar la lógica de presentación y la lógica de negocio. Esto se guarda en un stack de los modulos en AngularJS.
AngularJS - ¿Que es un Modulo en AngularJS?
Los módulos en AngularJS son una pieza fundamental en el desarrollo cotidiano, ya que nos sirven para organizar el código en librerías. Podríamos decir los módulos son contenedores de diferentes partes de nuestra aplicación. (controllers, services, filters, directives, etc).
AngularJS - ¿Por que usar Módulos?
La mayoría de las aplicaciones tienen un método principal (el muy muy famoso main!) el cual va creando instancias y "cableando" las diferentes partes de la aplicación!
Pero AngularJS no tiene un método main! En vez tiene módulos declaraciones que especifican como se debe levantar la aplicación.
Estas son las ventajas al trabajar con módulos:
- El proceso de declarar los módulos es fácil de entender.
- Podemos encerrar el código en módulos reusables.
- Los módulos pueden ser cargados en cualquier orden (o hasta en paralelo) ya que los módulos retrasan la ejecución.
- Cuando se realiza una prueba unitaria solo se debe hacer sobre el modulo pertinente, manteniendo rápido el test.
- Las pruebas finales (End to End) se puede usar módulos, para sobre escribir la configuración de la aplicación.
AngularJS - Codificación paso a paso de un Modulo en AngularJS
Bueno creo que ya explicamos y entendimos mas arriba que es un modulo y cuales son sus ventajas, así que bueno ya a llegado el momento en el cual metemos mano en el código fuente.
Al comenzar a codificar nuestra pagina web tenemos que usar como ya sabemos la directiva ng-app, para indicarle a AngularJS que todo lo que hay dentro de la etiqueta que sera utilizado.
En la directiva ng-app debemos indicarle el nombre del modulo que ejecutara nuestra aplicación.
<HTML ng-app="miApp">angular.module('miApp', [])Vamos aclarar que la firma real de la invocación de un modulo es la siguiente "angular.module('miApp', [ ... ], function(...){ ... })".
Siendo "angular" una variable global que se carga al momento de cargar AngularJS. Luego vemos "module", module no es mas que un método que posee el objeto angular para crear modulo. El primer parámetro del método module es el nombre que le asignaremos al modulo. El segundo parámetro sirve para cargar mas módulos, ya sea creados por nosotros o por terceros, esto se agregan separados por como, esto serian nuestras "dependencias". El tercer parámetro es opcional y acá agregamos una función para configurar AngularJS.
Con la llamada angular.module('miApp'. []) nos devolverá un objeto modulo, que tiene una batería de métodos como config, factory, provider, value, run, directive, controller, service, etc. Que son los que nos sirven para controlar la lógica de presentación y la lógica de negocio. Esto se guarda en un stack de los modulos en AngularJS.
Existen 2 maneras diferentes para trabajar con el código de creación del objeto module:
1) Creando una variable, e ir utilizándola para crear los controllers, factorys,etc.
var app= angular.module('miApp', []);
app.controller( ... )2) Aunque en muchos casos verás que ese objeto module ni siquiera se guarda en una variable, sino que se encadenan las creaciones de los controladores o factorías todo seguido. A esto último se suele llamar estilo "Fluent"
Ahora en el caso que necesitamos utilizar de nuevo el modulo, es decir en otra parte del código habiendo usado variables globales es simplemente llamar a la variable, pero dijimos que esto es una mala practica, Así que utilizaremos el stack que posee AngularJS de modulo, simplemente escribimos:
angular
.module('miApp', [])
.controller( ... )
.factory( ... );Ahora en el caso que necesitamos utilizar de nuevo el modulo, es decir en otra parte del código habiendo usado variables globales es simplemente llamar a la variable, pero dijimos que esto es una mala practica, Así que utilizaremos el stack que posee AngularJS de modulo, simplemente escribimos:
angular.module('miApp')Si bien ahora el tema se empieza a complicar mas con el uso de cosas que todavía no explique (controllers, $scope, etc). Vamos a dejar una aplicación usando módulos para que se vaya entendiendo.
<!DOCTYPE html>
<html lang="en" ng-app="miApp" ng-controller="myCtrl">
<head>
<meta charset="UTF-8">
<title>Ejemplo AngularJS - Lado oscuro de Java</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
<script>
angular.module("miApp", []).controller("myCtrl", function($scope) {
$scope.text1 = "Hola ";
$scope.text2 = "El lado oscuro de Java";
});
</script>
</head>
<body>
<span> Nombre: {{text1+text2}}</span>
</body>
</html>
Bueno espero que se este entendiendo cualquier cosa me avisan!
AngularJS - ¿Que es un Modulo en AngularJS? - ¿Por que usar Módulos? - Codificación paso a paso de un Modulo en AngularJS
Reviewed by El lado oscuro de java
on
mayo 21, 2015
Rating:
Reviewed by El lado oscuro de java
on
mayo 21, 2015
Rating:
Gran explicacion, hay muy poco de Angular en español, te agradezco el aporte :)
ResponderEliminarcomo utilizar modulos diferentes en un aplicación onePage?, si los pones en la cabecera de la principal los demas modulos estaran anidados al principal ¿eso es valido?
ResponderEliminar