De hecho para ello se utiliza la directiva ng-app, a la cual nunca hemos definido pero que a partir de ahora sí haremos, ya que de ella depende el modulo como iremos viendo en este articulo.
Con los módulos es donde definimos unas de las características más famosas de Angular, el acabar con el código spaghetty y de ese modo tener un código más claro y limpio. Aunque como podrás haber descubierto ya, Angular es mucho más que eso.
Los controladores por si solos contaminan el espacio de nombres
Hasta el momento todos las aplicaciones que hemos ido haciendo han utilizado valores locales, tanto variables como funciones.Este tipo de valores deben de ser usados lo mínimo posible, ya que pueden ser destruidos o sustituidos por otros scripts, los módulos resuelven, o al menos reducen en gran parte este problema.
La directiva ng-app es definida con un nombre que es el nombre del modulo, que es el nombre que recibe la aplicación, convirtiendo al controlador en una propiedad del modulo.
<!DOCTYPE html>
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script>
</head>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
{{ nombre + " " + apellidos }}
</div>
<script>
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
$scope.nombre = "Paco";
$scope.apellidos = "Perez";
});
</script>
</body>
</html>
- La primera diferencia que observamos es que hemos introducido el script de AngularJS en el head y no en la parte inferior del body, esto se debe a que para que las llamadas a los módulos solo pueden ser compiladas una vez se ha cargado la librería.
- Podemos observar como por primera vez hemos dado nombre a la directiva ng-app, con el nombre de myApp
- Una vez dentro del script hemos introducido una línea declarando la variable app como un modulo de la siguiente forma:
var app = angular.module("myApp", []);
- Tras esto hemos creado la propiedad controlador del modulo y hemos creado todo de forma normal.
Archivos en AngularJS
Pero como ya dijimos en su momento, lo correcto es tener los scripts de Angular fuera del código html, aunque ahora lo vamos a definir un poco más, ya que es necesario crear un archivo independiente para la declaración de los módulos y otro para los controladores, de la siguiente forma:
- Primero creamos el archivo donde estará el modulo, en nuestro caso myApp.js, y en el se introduce la declaración del modulo, en nuestro caso una vez más sería el que se muestra a continuación:
var app = angular.module("myApp", []);
- A continuación en otro archivo se introducen los controladores, en nuestro caso sería myCtrl.js y se introduciría el siguiente código del controlador:
app.controller("myCtrl", function($scope) {
$scope.firstName
= "John";
$scope.lastName
= "Doe";
});
- Naturalmente debemos de introducir la carga del archivo del modulo antes que el del controlador para que no nos de error, dejando nuestro html de la siguiente forma:
<!DOCTYPE html>
<html>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
{{ nombre + " " + apellido }}
</div>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script>
<script src="myApp.js"></script>
<script src="myCtrl.js"></script>
</body>
</html>
Nota: La aplicación debe de tener al menos un archivo de módulos y un archivo de controlador para cada controlador. De este modo es como se acaba con el código spaghetty.
No hay comentarios:
Publicar un comentario