Módulos de AngularJS
Un módulo 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 aplicaciones.
Los controladores siempre pertenecen a un módulo.
Creación de un módulo
Se crea un módulo usando la función AngularJSangular.module
<div ng-app="myApp">...</div>
<script>
var app = angular.module("myApp", []);
</script>
El parámetro "myApp" hace referencia a un elemento HTML en el que se ejecutará la aplicación.
Ahora puede agregar controladores, directivas, filtros y más a su aplicación AngularJS.
Agregar un controlador
Agregue un controlador a su aplicación y consulte el controlador con la
ng-controllerdirectiva:
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>
Aprenderá más sobre los controladores más adelante en este tutorial.
Agregar una directiva
AngularJS tiene un conjunto de directivas integradas que puede usar para agregar funcionalidad a su aplicación.
Para obtener una referencia completa, visite nuestra referencia de la directiva AngularJS .
Además, puede usar el módulo para agregar 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>
Aprenderá más sobre las directivas más adelante en este tutorial.
Módulos y Controladores en Archivos
Es común en las aplicaciones AngularJS poner el módulo y los controladores en archivos 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="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/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>
miAplicación.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 está creando un nuevo módulo, sino recuperando uno existente.
miCtrl.js
app.controller("myCtrl", function($scope) {
$scope.firstName = "John";
$scope.lastName= "Doe";
});
Las funciones pueden contaminar el espacio de nombres global
Las funciones globales deben evitarse en JavaScript. Otros scripts pueden sobrescribirlos o destruirlos fácilmente.
Los módulos AngularJS reducen este problema al mantener todas las funciones locales para el módulo.
Cuándo cargar la biblioteca
Si bien es común en las aplicaciones HTML colocar secuencias de comandos al final del
<body>elemento, se recomienda que cargue la biblioteca AngularJS en el <head>archivo <body>.
Esto se debe a que las llamadas a angular.modulesolo se pueden compilar después de que se haya cargado la biblioteca.
Ejemplo
<!DOCTYPE html>
<html>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/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>