Un módulo de AngularJS define una aplicación.
El módulo es un contenedor para las diferentes partes de una aplicación.
El módulo es un contenedor para los controladores de aplicación.
Controladores siempre pertenecen a un módulo.
Crear un módulo
Un módulo se crea mediante el uso de la función AngularJS angular.module
<div ng-app="myApp">...</div>
<script>
var app = angular.module("myApp", []);
</script>El parámetro "myApp" se refiere a un elemento HTML en el que se ejecutará la aplicación.
Ahora puede agregar controladores, directivas, filtros y más, para su aplicación AngularJS.
Adición de un controlador
Añadir un controlador para su aplicación, y se refieren al controlador con el ng-controller la Directiva:
Ejemplo
<div ng-app="myApp" ng-controller= "myCtrl" >
{{ firstName + " " + lastName }}
</div>
<script>
var
app
= angular.module( "myApp" ,
[]);
app.controller( "myCtrl" , function($scope) {
$scope.firstName
= "John";
$scope.lastName
= "Doe";
});
</script>
Inténtalo tú mismo " Va a aprender más acerca de los controladores más adelante en este tutorial.
Adición de una Directiva
AngularJS tiene un conjunto de directivas incorporadas que se pueden utilizar para agregar funcionalidad a su aplicación.
Para una referencia completa, visite nuestro AngularJS Directiva sobre la referencia .
Además se puede utilizar el módulo para añadir sus propias directivas a sus aplicaciones:
Ejemplo
<div ng-app="myApp" w3-test-directive></div>
<script>
var app =
angular.module("myApp", []);
app.directive("w3TestDirective",
function() {
return {
template : "I was made in a directive constructor!"
};
});
</script> Inténtalo tú mismo " Va a aprender más acerca de las instrucciones más adelante en este tutorial.
Módulos y reguladores de Archivos
Es común en aplicaciones AngularJS para poner el módulo y los controladores en los archivos de JavaScript.
En este ejemplo, "myApp.js" contiene una definición de módulo de aplicación, mientras que "myCtrl.js" contiene el controlador:
Ejemplo
<!DOCTYPE html>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>
<div ng-app=" myApp "
ng-controller=" myCtrl ">
{{ firstName + " " + lastName }}
</div>
<script src=" myApp.js "></script>
<script src=" myCtrl.js "></script>
</body>
</html>
Inténtalo tú mismo " myApp.js
var app = angular.module( "myApp" , []);
 | El parámetro [] en la definición del módulo se puede utilizar para definir módulos dependientes. |
|---|
| Sin el parámetro [], no va a crear un nuevo módulo, pero la recuperación de una ya existente. |
|---|
myCtrl.js
app.controller( "myCtrl" , function($scope) {
$scope.firstName = "John";
$scope.lastName= "Doe";
});
Las funciones pueden contaminar el espacio de nombres global
funciones globales se deben evitar en JavaScript. Ellos pueden ser fácilmente sobrescritos o destruidas por otras secuencias de comandos.
AngularJS módulos reduce este problema, manteniendo todas las funciones de la zona para el módulo.
Cuando cargar la biblioteca
Si bien es común en aplicaciones HTML para colocar los guiones al final de la <body> elemento, se recomienda cargar la biblioteca AngularJS ya sea en el <head> o al comienzo de la <body> .
Esto se debe a que las llamadas a angular.module sólo pueden ser compilados después de la biblioteca ha sido cargado.
Ejemplo
<!DOCTYPE html>
<html>
<body>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<div ng-app="myApp"
ng-controller="myCtrl">
{{ firstName + " " + lastName }}
</div>
<script>
var app = angular.module("myApp",
[]);
app.controller("myCtrl", function($scope) {
$scope.firstName
= "John";
$scope.lastName
= "Doe";
});
</script>
</body>
</html>
Inténtalo tú mismo "