menú
buscar
¡Esta es una revisión vieja del documento!
Tabla de Contenidos
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). 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. Es obligatorio pasarle ese array ya que sino lo que le diríamos a angular es que queremos una referencia a un módulo que ya existe.
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 como parte 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
Ejemplo
Referencias
