AngularJS Módulos
Un módulo define una aplicación.
Un módulo es un contenedor para las diferentes partes de una aplicación.
Un módulo es el contenedor de los controladores de la aplicación.
Los controladores suelen pertenecer a un módulo.
Crear módulos
Puedes, mediante AngularJS,angular.modulefunción para crear módulos:
<script>
var app = angular.module("myApp", []);
El parámetro "myApp" corresponde al elemento HTML que ejecuta la aplicación.
Ahora puedes añadir controladores, directivas, filtros, etc. en tu aplicación AngularJS.
Añadir controlador
Puedes usarng-controllerla directiva para añadir el controlador de la aplicación:
Ejemplo de AngularJS
{{ firstName + " " + lastName }}
</div>
<script>
app.controller("myCtrl", function($scope) {
$scope.firstName = "John";
$scope.lastName = "Doe";
});
Pruébalo »
Puedes, enel capítulo 'Controladores AngularJS',aprender más sobre los controladores.
Añadir directiva
AngularJS proporciona muchas directivas integradas que puedes usar para añadir funcionalidad a tu aplicación.
Puedes consultar el contenido completo de las directivas enel manual de referencia de AngularJS。
Además, puedes usar módulos para añadir tus propias directivas a tu aplicación:
Ejemplo de AngularJS
<script>
app.directive("ejemploDirective", function() {
return {
template : "¡Creado en el constructor de la directiva!"
};
});
Pruébalo »
Puedes, enel capítulo 'Directivas AngularJS',aprender más sobre las directivas.
Los módulos y controladores se incluyen en archivos JS
Normalmente, las aplicaciones AngularJS incluyen módulos y controladores en archivos JavaScript.
En el siguiente ejemplo, "myApp.js" contiene la definición del módulo de la aplicación, y el archivo "myCtrl.js" contiene el controlador:
Ejemplo de AngularJS
<html>
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/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>
Pruébalo »
myApp.js
 |
En la definición del módulo, el parámetro [] se utiliza para definir las dependencias del módulo. Los corchetes [] indican que este módulo no tiene dependencias; si las tuviera, los nombres de los módulos de los que depende se escribirían entre corchetes. |
|---|
myCtrl.js
$scope.firstName = "John";
$scope.lastName= "Doe";
});
Las funciones afectan al espacio de nombres global
En JavaScript, se deben evitar las funciones globales, porque son fácilmente sobrescritas por otros archivos de script.
Los módulos AngularJS hacen que todas las funciones tengan su ámbito dentro del módulo, evitando este problema.
¿Cuándo cargar la librería?
|
En nuestros ejemplos, todas las librerías AngularJS se cargan en la cabecera del documento HTML. |
|---|
Para aplicaciones HTML, normalmente se recomienda colocar todos los scripts en la parte inferior del elemento <body>.
Esto mejora la velocidad de carga de la página, ya que la carga del HTML no está sujeta a la carga de los scripts.
En varios de nuestros ejemplos de AngularJS, verá que la librería AngularJS se carga en la sección <head> del documento.
En nuestros ejemplos, AngularJS se carga en el elemento <head>, porque la llamada a angular.module solo puede realizarse después de que la librería se haya cargado completamente.
Otra solución es cargar la librería AngularJS en el elemento <body>, pero debe colocarse delante de sus scripts AngularJS:
Ejemplo de AngularJS
<html>
<head>
<meta charset="utf-8">
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>
<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>
Pruébalo »