Módulos de AngularJS

El módulo AngularJS define una aplicación.

El módulo es el contenedor de diferentes partes de la aplicación.

El módulo es el contenedor del controlador de la aplicación.

El controlador siempre pertenece a un módulo.

Crear módulo

Usando la función AngularJS,angular.module Crear un módulo:

<div ng-app="myApp">...</div>
<script>
var app = angular.module("myApp", []);
</script>
"myApp" es el parámetro que indica el elemento HTML en el que se ejecutará la aplicación.

Ahora, puede agregar controladores, directivas, filtros, etc., a su aplicación AngularJS.

Agregar controlador

Agregue un controlador a su aplicación y utilice ng-controller La directiva se refiere al controlador:

ejemplo

<div ng-app="myApp" ng-controller="myCtrl">
{{ firstName + " " + lastName }}
</div>
<script>
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
  $scope.firstName = "Bill";
  $scope.lastName = "Gates";
});
</script>

Prueba personalmente

Conocerá más sobre los controladores más adelante en el tutorial.

Agregar directivas

AngularJS tiene un conjunto de directivas integradas que puede usar para agregar funcionalidades a la aplicación.

Para obtener información completa, consulte nuestra referencia de directivas AngularJS.

Además, puede usar módulos para agregar sus propias directivas a la aplicación:

ejemplo

<div ng-app="myApp" w3-test-directive></div>
<script>
var app = angular.module("myApp", []);
app.directive("w3TestDirective", function() {
  return {
    template : "¡Fui hecho en un constructor de directiva!"
  };
});
</script>

Prueba personalmente

Detallaremos más adelante en el tutorial las directivas.

módulos y controladores en el archivo

Es común en aplicaciones AngularJS colocar módulos y controladores en archivos JavaScript.

En este ejemplo, "myApp.js" contiene la definición del módulo de la aplicación, mientras que "myCtrl.js" contiene el controlador:

ejemplo

<!DOCTYPE html>
<html>
<script src="https://cdn.staticfile.net/angular.js/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>

Prueba personalmente

myApp.js

var app = angular.module("myApp", []);

Los parámetros [] en la definición del módulo se pueden usar para definir módulos dependientes.

Si no hay parámetros [], no está creando un nuevo módulo, sino que está recuperando un módulo existente.

myCtrl.js

app.controller("myCtrl", function($scope) {
  $scope.firstName = "Bill";
  $scope.lastName= "Gates";
});

Las funciones pueden contaminar el espacio de nombres global

Se debe evitar el uso de funciones globales en JavaScript. Son fáciles de sobrescribir o dañar por otros scripts.

AngularJS módulo reduce este problema al mantener todas las funciones en el módulo local.

cuándo cargar la biblioteca

aunque en aplicaciones HTML se coloca el script en <body> al final de la etiqueta es común, pero se recomienda que <head> o <body> al principio de la carga de la biblioteca AngularJS.

porque solo se puede compilar la referencia angular.module llamada.

ejemplo

<!DOCTYPE html>
<html>
<body>
<script src="https://cdn.staticfile.net/angular.js/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 = "Bill";
  $scope.lastName = "Gates";
});
</script>
</body>
</html>

Prueba personalmente