menú
buscar
Diferencias
Muestra las diferencias entre dos versiones de la página.
|
unidades:01_introduccion:01_instalacion [2013/09/10 23:45] admin Page name changed from unidades:01_introduccion:instalacion to unidades:01_introduccion:01_instalacion |
— (actual) | ||
|---|---|---|---|
| Línea 1: | Línea 1: | ||
| - | ====== Instalación ====== | ||
| - | ===== Descarga ===== | ||
| - | |||
| - | Instalar angularJS es tan sencillo como como descargar el fichero JavaScript e incluirlo en nuestra página. | ||
| - | |||
| - | En la página de [[http://angular.org]] tenemos el botón para descargarlo o directamente desde aqui [[http://code.angularjs.org/1.0.8/angular.js|angular.js]]. | ||
| - | |||
| - | En el ''<head>'' de nuestra página deberemos incluirlo con el tag ''<scrip>''. | ||
| - | |||
| - | <sxh xml> | ||
| - | |||
| - | <head> | ||
| - | <script type="text/javascript" src="js/lib/angular.js"></script> | ||
| - | </head> | ||
| - | |||
| - | </sxh> | ||
| - | ===== Preparar la aplicación ===== | ||
| - | Para todas las aplicaciones que realicemos en AngularJS deberemos incluir los siguientes atributos para indicar que estamos en una aplicación de AngularJS | ||
| - | |||
| - | * En el tag ''<html>'' incluir el atributo ''ng-app'' con el nombre de la aplicación. | ||
| - | * En el tag ''<body>'' incluir el atributo ''ng-controller'' con el nombre del controlador JavaScript a usar. | ||
| - | |||
| - | <sxh xml> | ||
| - | <!doctype html> | ||
| - | <html ng-app="MiApp"> | ||
| - | <head> | ||
| - | <script src="js/lib/angular.js"></script> | ||
| - | </head> | ||
| - | <body ng-controller="MiPageController"> | ||
| - | </body> | ||
| - | </html> | ||
| - | </sxh> | ||
| - | |||
| - | * En la línea 2 el atributo ''ng-app'' indica el nombre de la aplicación. Obviamente podemos indicar el nombre que deseemos. | ||
| - | |||
| - | <sxh js> | ||
| - | var app=angular.module("MiApp",[]); | ||
| - | </sxh> | ||
| - | |||
| - | Esta línea crea un [[unidades:modulo]] específico para nuestra aplicación. En AngularJS un módulo es un objeto JavaScript en el que configuramos nuestra aplicación. Posteriormente podremos configurarla usando el objeto ''app''. | ||
| - | |||
| - | * En la línea 6 podemos ver el atributo ''ng-controller'' con el valor ''MiPageController''. ''MiPageController'' es el nombre de una función JavaScript que será el controlador de esta página. Esta función JavaScript ya contendrá código específico de la aplicación. | ||
| - | |||
| - | <sxh js> | ||
| - | function MiPageController($scope) { | ||
| - | } | ||
| - | </sxh> | ||
| - | |||
| - | El parámetro ''$scope'' que se le pasa a la función es un objeto de AngularJS en el que guardaremos el modelo de datos de la página. | ||
| - | |||
| - | Finalmente la página quedará de la siguiente manera: | ||
| - | |||
| - | <sxh html> | ||
| - | <!doctype html> | ||
| - | <html ng-app="MiApp"> | ||
| - | <head> | ||
| - | <script src="lib/angular.js"></script> | ||
| - | <script> | ||
| - | var app=angular.module("MiApp",[]); | ||
| - | |||
| - | function MiPageController($scope) { | ||
| - | | ||
| - | } | ||
| - | |||
| - | </script> | ||
| - | </head> | ||
| - | <body ng-controller="MiPageController"> | ||
| - | {{1+2}} | ||
| - | </body> | ||
| - | </html> | ||
| - | </sxh> | ||
| - | |||
| - | Vemos en la línea 15 como hemos añadido la expresión ''%%{{1+2}}%%''. Esto es una expresión de AngularJS que simplemente realiza la suma de los 2 números y muestra el resultado. De esa forma si vemos el número 3 será que AngularJS funciona correctamente. Más adelante veremos más sobre las llaves ''%%{}%%''. | ||
| - | |||
| - | **Demo:** | ||
| - | {{url>http://jsfiddle.net/logongas/AR4nF/embedded/result,js,html}} | ||
| - | |||
| - | Naturalmente, podemos dejar más limpio el código si nos llevamos el controlador a un fichero aparte: | ||
| - | |||
| - | <sxh html> | ||
| - | <!doctype html> | ||
| - | <html ng-app="MiApp"> | ||
| - | <head> | ||
| - | <script src="lib/angular.js"></script> | ||
| - | <script type="text/javascript" src="MiPageController.js"></script> | ||
| - | </head> | ||
| - | <body ng-controller="MiPageController"> | ||
| - | {{1+2}} | ||
| - | </body> | ||
| - | </html> | ||
| - | </sxh> | ||
| - | |||
| - | <sxh javascript> | ||
| - | var app=angular.module("MiApp",[]); | ||
| - | function MiPageController($scope) { | ||
| - | |||
| - | } | ||
| - | </sxh> | ||
