Aprendiendo AngularJS (III). Los módulos.
AngularJS es un framework que utiliza el paradigma MVC (Modelo Vista Controlador). Si no sabes qué es el paradigma MVC tendrás que echarle un ojo al link anterior para poder entender los siguientes conceptos.
- Un módulo es un contenedor o almacen de las partes de una aplicación.
- Cuando creamos un módulo en AngularJS estamos definiendo una aplicación.
- Dentro de los módulos tendremos los controladores de la aplicación.
- Un controlador SIEMPRE pertenecerá a un módulo.
Un módulo sin controlador…
Esta sería la estructura de un módulo
<div ng-app="myfpschool">...</div>
<script>
var app = angular.module("myfpschool", []);
</script>
El parámetro myfpschool ya es un elemento HTML en el cual se ejecutará la aplicación dado que la directiva ng-app le ha dicho a AngularJS que todo lo que se ejecute dentro de las etiquetas div será nuestra aplicación de AngularJS. En otras palabras AngularJS será el propietario de esa etiqueta div.
<body ng-app=»myApp»>
El siguiente paso es añadir controladores, directivas, filtros…. a la aplicación que hemos creado.
Un módulo con un controlador…
Como ya hemos dicho, un controlador hace de intermediario entre la aplicación y los datos. En el siguiente ejemplo podrás ver cómo funciona una aplicación con controlador:
<!DOCTYPE html>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>
<div ng-app="myfpschoolapp" ng-controller="myfpschoolctrl">
En un lugar de la {{ lugar }} de cuyo nombre no quiero acordarme, no ha mucho tiempo que vivía un {{ persona }} de los de lanza en astillero
</div>
<script>
var app = angular.module("myfpschoolapp", []);
app.controller("myfpschoolctrl", function($scope) {
$scope.lugar = "mancha";
$scope.persona = "hidalgo";
});
</script>
</body>
</html>
Como puedes ver, los datos pertenecerán al scope (ámbito) del controlador para que puedan ser referenciados. La aplicación tendrá su controlador asociado y este hará de enlace entre la la vista de la aplicación (HTML) y los datos.
Un módulo con una directiva…
Angular tiene muchas directivas las cuales modifican el comportamiento de los distintos elementos HTML de nuestra web. Algunas ya las hemos visto como ng-app, ng-bind…. y muchas otras que veremos más adelante como ng-class, ng-click, etc.
Comentarte que tú puedes incluir en tus aplicaciones tus propias directivas. ¿Cómo se hace esto? Pues en este script que se detalla a continuación se muestra una pequeña aplicación con una directiva creada por nosotros mismos:
<div ng-app="myfpschoolapp" midirectiva></div>
<script>
var app = angular.module("myfpschoolapp", []);
app.directive("midirectiva", function() {
return {
template : "I was born in Madrid!"
};
});
</script>
Generalmente, en AngularJS las aplicaciones y los controladores se escriben en ficheros aparte. De los ejemplos expuestos anteriormente, aúnalos y coloca la aplicación y el controlador en ficheros aparte.
Generalmente se le ponen nombre como myfpschoolapp.js y myfpschoolctrl.js.
Luego lo único que tendrás que hacer es cargar los script:
<script src=»myApp.js»></script>
<script src=»myCtrl.js»></script>