¡Esta es una revisión vieja del documento!


Primera aplicación

Ahora vamos a poner en marcha la primera aplicación en Angular. Para ver que funciona lo que haremos simplemente es darle valor a una variable en JavaScript y mostrar dicho valor en la página HTML. Verás que hay algunas cosas que poner inicialmente pero al ser la primera aplicación no quedarán totalmente claras ahora mismo. No te preocupes, es la primera aplicación y a lo largo del curso quedarán totalmente claras ya que dedicaremos temas completos a cada parte.

El ejemplo consta de dos ficheros:

  • index.html
  • script.js

<!DOCTYPE html>
<html ng-app="app">

  <head>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.19/angular.min.js"></script>
    <script src="script.js"></script>
  </head>

  <body ng-controller="PruebaController">
    <h1>{{mensaje}}</h1>
  </body>

</html>

La primera cosa que nos encontramos es la línea 2 con un atributo llamado ng-app. Este nuevo atributo se llama en angular una directiva y durante todo el curso veremos muchas directivas que existen en angular. El valor de la directiva (o el valor del atributo) es app. El valor que le demos es indiferente ya que simplemente hace referencia al nombre de nuestra aplicación. Realmente no hace referencia al nombre de la aplicación sino al módulo principal de nuestra aplicación. Pero ya veremos mas adelante que es un módulo en angular.

La línea 5 carga la librería de angular. La hemos cargado directamente desde los servidores de google pero no hay problema en descargarla y tenerla en nuestro propio proyecto.

La línea 9 incluye la directiva de angular ng-controller. Esta directiva tiene el valor de PruebaController. Esto es el nombre de una función JavaScript que deberemos crear. Con ésto le decimos a angular que ejecute la función PruebaController cuando se muestre el html. A esa función en angular la llamamos controlador, y por ello el método de llama “PruebaController”. Durante todo el curso a las funciones JavaScript que sean controladores las llamaremos con el sufijo “Controller”.

Por último tenemos dentro del tag <h1> el valor {{ mensaje }}. Esta es realmente la parte interesante del ejemplo. Lo que estamos diciendo aquí es que se muestre el valor de la variable de JavaScript mensaje dentro del tag <h1>. Mirar lo sencillo que es ahora mostrar información desde JavaScript en HTML. Solo tenemos que incluir entre llaves {{ }} el nombre de nuestra variable. Realmente no es tan bonito como cualquier variable de JS sino solo los valores que están dentro de una variable especial de angular. Ahora mismo explicamos ésto al ver el JavaScript.

var app=angular.module("app",[]);
 
function PruebaController($scope) {
  $scope.mensaje="Hola Mundo";
}

En la línea 1 llamamos al método angular.module. Este método nos permite crear módulos en angular 1) y el nuevo módulo se asigna a la variable app que por ahora no vamos a usar. El nombre de nuestro módulo es app. Este nombre debe ser el mismo que el que pusimos en el atributo ng-app en el index.html. Como segundo parámetro le estamos pasando un array vacio. Por ahora recuerda que es obligatorio pasar el array al crear un nuevo módulo.

La línea 3 es la función con el controlador de Angular. Lo raro es que le pasamos un argumento llamado $scope. Lo primero es que no debe confundirnos el signo del dolar $. Angular usa mucho el dolar $ para indicar que son cosas propias suyas pero realmente a nivel de JavaScript es simplemente una carácter mas de la propia variable.

En la línea 4 añadimos una propiedad llamada mensaje al $scope con el valor “Hola Mundo”. Fíjate que mensaje es el nombre de la variable que se muestra en el HTML

Pero pasemos a explicar ahora que es el $scope ya que es de las cosas mas importante de Angular.

$scope

Es $scope es LA VARIABLE de Angular donde debemos guardar toda la información de JavaScript de nuestra página. Ya no vamos a crear nuevas variable de la forma:

var i=5;

sino que ahora deberemos hacer siempre:

$scope.i=5;

¿Porque hacer esto? Porque angular solo muestra la información en el HTML mediante {{ }} de aquellas propiedades del $scope y no de cualquier variable de JavaScript.

Podemos seguir creando variable con var pero no las podremos mostrar en el HTML si no están en el $scope 2).

Ahora podríamos preguntarnos el porqué de esa limitación de obligarnos a usar el $scope. El motivo es porque angular hace magia con el $scope. Lo impresionante es que si posteriormente hacemos alguna modificación en el $scope, angular la detectará y volverá a modificar el HTML automáticamente 3).Así que angular esta monitorizando el $scope para ver si cambia algo y de esa forma actualizar el HTML. Pero lo que no podría es monitorizar todas las variables de JavaScript , así que si queremos que se enlacen el mundo de javaScript y el de HTML deremos usar el $scope.

Ejemplo

Resumen

  • En cada aplicación hay que:
    • Indicar el nombre del módulo principal con la directiva ng-app. Ej: ng-app=“app”.
    • Desde JavaScript debemos crear el módulo mediante angular.module. Ej: var app=angular.module('app',[]);
  • Los controladores es donde está el código JS de nuestra aplicación.
    • Se especifican mediante la directiva ng-controller. Ej: ng-controller=“PruebaController”.
    • Se definen creando una función JavaScript que acepta como parámetro la variable $scope. Ej: function PruebaController($scope) {}
  • Las propiedades del $scope se muestran en el HTML mediante llaves {{ }}. Ej: <h1> {{ mensaje }} </h1>

Referencias

1) Ya veremos mas adelante que es un módulo, por ahora solo piensa que es como un paquete en Java
2) Realmente podriamos mostrarlas si modificamos directametne el DOM pero entonces perdemos la gracia de usar Angular
3) En el siguiente tema vamos a ver un ejemplo de ésto
unidades/02_angular/01_primera_app.1404377072.txt.gz · Última modificación: 2014/07/03 10:44 por admin
Ir hasta arriba
CC Attribution-Share Alike 3.0 Unported
chimeric.de = chi`s home Valid CSS Driven by DokuWiki do yourself a favour and use a real browser - get firefox!! Recent changes RSS feed Valid XHTML 1.0
Esta web utiliza cookies, puedes ver nuestra la política de cookies, aquí Si continuas navegando estás aceptándola
Política de cookies +