Ejemplos Basicos con AngularJS
AngularJS es un framework javascript que nos facilita el desarrollo de aplicaciones web mono página. En este tipo de aplicaciones y si no usamos algún tipo de framework javascript, es fácil que tengamos que hacer código javascript que modifique el contenido html de la página en función de los datos que tengamos que mostrar, la vista en la que estemos, etc. AngularJS nos facilita esta tarea permitiendonos definir un modelo de datos en javascript y unas plantillas html que se modificarán automáticamente en función del contenido de esos datos.
Veamos aquí unos ejemplos básicos para ver qué queremos decir con todo esto y algunas de las posibilidades más sencillas de AngularJS.
Tienes todo lo comentado aquí en un solo proyecto AngularJSHelloWorld. El html en index.html y los controladores en lib/app.js
Lo básico[editar]
Para utilizar AngularJS, en nuestro html debemos incluir la librería javascript angular.js. Podemos cogerla directamente de las google apis con
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular.min.js"></script>
El código javascript que haremos para estos ejemplos lo meteremos en un fichero app.js, así que también deberíamos incluirlo en nuestro html
<script src="lib/app.js"></script>
En algún sitio de nuestro html que abarque todo el html que queremos manejar con angularjs debemos poner un atributo ng-app o data-ng-app (son lo mismo). Puede ser el tag <body>, el tag <html> o cualquier otro tag que queramos. En nuestro ejemplo vamos a usar el tag <body>
<body data-ng-app>
Todos los atributos de angularjs que pongamos en nuestro html puende empezar por ng- o por data-ng- , como ng-app o data-ng-app. Ambos atributos son exactamente iguales desde el punto de vista de angularjs, con la única salvedad que si pasamos un verificador de html, los ng- dirán que no son atributos válidos para los tags (por ejemplo, en la especificación html el tag body no admite un atributo ng-app) mientras que los atributos data-ng- sí son válidos según la sintaxis de html (html admite atributos data- en cualquier tag para permitir al desarrollador guardar algún tipo de información en ellos).
Dentro de app.js vamos a escribir controladores de AngularJS. Estos controladores no son más que funciones javascript que reciben como parámetro la variable $scope definida por AngularJS. Todos los atributos que pongamos a esa variable $scope formarán parte del modelo de datos de nuestra aplicación y serán datos accesibles fácilmente desde la parte html.
En este controlador de ejemplo
function HelloController($scope) {
$scope.greeting = 'hello';
}
tendremos disponible en html una variable greeting cuyo contenido es 'hello'. En el html, podemos poner algo como esto
<div data-ng-controller="HelloController">
<p><nowiki>{{gretting}}</nowiki></p>
</div>
Hemos puesto un div y en él el atributo data-ng-controller="HelloController". Ese HelloController es la función javascript que hemos definido en app.js y que hará de controlador AngularJS. En el html, el div y todo lo que esté dentro de él tendrá accesible lo que se defina en el $scope de ese controlador.
En concreto, al haber definido en el controlador $scope.greeting, en el html podemos usar {{greeting}} donde queramos, dentro de ese div. En el ejemplo, lo hemos puesto como contenido del párrafo p. El navegador, al visualizar la página, mostrará 'hello' en vez de {{greeting}}
data-ng-model[editar]
La gran ventaja de angularJS es que si cambiamos el contenido de la variable $scope.greeting, automáticamente cambiará el código html para reflejar ese cambio. Para ver esto, pondremos un tag input que modifique el valor de la variable y veremos como el cambio es automático. El contenido del html puede ser este
<div data-ng-controller="HelloController">
<p>{{greeting}}</p>
<label>Greeting : </label><input data-ng-model="greeting" />
</div>
En el input indicamos con data-ng-model="greeting" que el contenido del input es el de la variable greeting. AngularJS se encarga de hacer los cambios necesarios en ambos sentidos. Si escribimos en la caja de texto, modificará la variable y al modificar la variable, actualizará el párrafo p. A continuación tienes lo que quedaría
{{greeting}}
data-ng-if[editar]
Este atributo permite hacer que el tag en el que esta se visualice o no en función de alguna condición. Por ejemplo, si definimos una variable $scope.visible=true podemos hacer que se visualice un párrafo p determinado y si esa variable es false, que no se visualice. El párafo en cuestión quedaría así
<p data-ng-if="visible">Visible</p>
En nuestro controlador, debemos definir $scope.visible con true o false según queramos que el párrafo sea o no visible. Para demostrar esto, pondremos un checkbox que modifique el valor de esta variable. El código html sería el siguiente
<div data-ng-controller="CheckController">
<input type="checkbox" data-ng-model="checkbox"
data-ng-true-value="checked" data-ng-change="toggle()" />
<p data-ng-if="visible">Visible</p>
</div>
Hemos puesto un CheckController que vemos a continuación.
Hemos puesto un input type="checkbox" que permita cambiar el estado de visiblidad del párrafo. El checkbox necesita un modelo de AngularJS para poder reflejar los cambios, así que le ponemos un data-ng-model="checkbox", de forma que en el controlador tendremos una variable $scope.checkbox para ver si el checkbox está o no marcado. Como AngularJS define esta variable como un string, al checkbox podemos ponerle atributos data-ng-true-value y data-ng-false-value para indicar qué dos valores indican si el checkbox está marcado o no. En nuestro ejemplo, nos basta con definir el valor "checked" para marcado (el true-valor). El false-valor será vacío por defecto. Finalmente, con data-ng-change llamaremos a una función javascropt toggle() que también debemos definir en nuestro controlador. Cada vez que el checkbox cambie de estado, se llamará a esta función, que se encargará de cambiar la variable $scope.visible que controla el párrafo.
Finalmente, ponemos el párrafo con el data-ng-if.
Veamos como es el controlador CheckController
function CheckController ($scope) {
$scope.checkbox='checked';
$scope.visible = true;
$scope.toggle = function () {
$scope.visible = !$scope.visible;
};
}
Definimos $scope.checkbox="checked" para que por defecto el checkbox aparezca marcado y $scope.visible=true para que el párrafo aparezca por defecto visible.
Definimos la funcion toggle(), tambien en $scope para que esté accesible desde html a través de AngularJS y que lo único que hace es conmutar el valor de la variable $scope.visible.
Lo dicho, cuando el checkbox cambie de estado, AngularJS se encargará de llamar a la función toggle() porque así lo hemos indicado con data-ng-change, esta función cambiará el valor de $scope.visible y AngularJS automáticamente mostrará u ocultará el párrafo. Por supuesto, podemos simplificar el asunto haciendo que la variable que cambia el checkbox y la que controla la visibilidad del párrafo sean la misma. El párrafo podría tener un data-ng-if="checkbox=='checked' .
Puedes verlo aquí funcionando
Visible
data-ng-repeat[editar]
Otro atributo de AngularJS interesante para los tag html es data-ng-repeat. Este atributo hace que se repita el tag html n veces, en función de alguna colección que tengamos en el modelo de datos de AngularJS. Por ejemplo, si tenemos un $scope.array con un array de datos en el controlador de AngularJS, podemos poner un tag así en html
<p data-ng-repeat="item in array">{{item}}</p>
De esta forma, el párrafo se repetirá tantas veces como elementos tenga array e irá mostrando cada uno de ellos. Vamos con un ejemplo concreto, aunque lo complicaremos un poco para poder modificar el tamaño del array desde una caja de texto. El código html puede parecerse a este
<div data-ng-controller="RepeatController">
<input type="number" data-ng-model="counter"
data-ng-change="updateModel()" />
<p data-ng-repeat="item in array">{{item}}</p>
</div>
El controlador será RepeatController, que explicaremos un poco más adelante.
Ponemos un input type="number" para poder poner el número de elementos del array. Le asociamos con data-ng-model la variable counter. Eso quiere decir que en el controlador tendremos que definir un $scope.counter, que será la longitud deseada del array. Cuando cambie el valor de la caja de texto, con data-ng-change="updateModel()" estamos indicando que hay que hacer una llamada a la función updateModel() del controlador. Eso quiere decir que en el controlador tendremos que definir una función $scope.updateModel() que se encargará de actualizar el array para que tenga la longitud deseada.
Finalmente, el párrafo tiene un data-ng-repeat="item in array", por lo que el controlador deberá tener un $scope.array que sea un array o algún tipo de objeto javascript que se pueda recorrer. En cada iteración, tendremos en la variable item el contenido del elemento correpondiente.
El controlador puede ser como este
function RepeatController ($scope) {
$scope.counter=1;
$scope.array=[0];
$scope.updateModel = function () {
$scope.array=[];
for (var i=0;i<$scope.counter;i++){
$scope.array.push(i);
}
};
}
Definimos la variable $scope.counter con un valor inicial de 1, indicando que incialmente nuestro array tendrá un elemento.
Definimos $scope.array con un elemento, en principio un 0 para hacerlo sencillo.
Definimos la función $scope.updateModel() a la que se llamará cuando se cambie el valor de counter desde la caja de texto. Dentro de la función, $scope.counter tendrá ya el nuevo valor, así que simplemente y por no complicar el asunto, creamos en $scope.array un nuevo array vacío y le vamos añadiendo tantos elementos como indique $scope.counter. Los elementos serán número enteros 0,1,2... coincidiendo con el índice i del bucle, por aquello de ponerlos distintos de una forma fácil.
Aquí pudes verlo funcionando, simplemente cambia el valor numérico de la caja de texto
{{item}}