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 angular.js.

En el <head> de nuestra página deberemos incluirlo con el tag <scrip>.


<head>
  <script type="text/javascript" src="js/lib/angular.js"></script>
</head>

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.

<!doctype html>
<html ng-app="MiApp">
  <head>
    <script src="js/lib/angular.js"></script>
  </head>
  <body ng-controller="MiPageController">
  </body>
</html>

En la línea 2 el atributo ng-app indica el nombre de la aplicación. Obviamente podemos indicar el nombre que deseemos.

var app=angular.module("MiApp",[]);

Esta línea crea un 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.

function MiPageController($scope) {
}

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:

<!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>

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:

Naturalmente, podemos dejar más limpio el código si nos llevamos el controlador a un fichero aparte:

<!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>

var app=angular.module("MiApp",[]);
function MiPageController($scope) {
       
}

unidades/01_introduccion/01_instalacion.1378822700.txt.gz · Última modificación: 2013/09/10 16:18 por admin

Ir hasta arriba