Diferencias

Muestra las diferencias entre dos versiones de la página.

Enlace a la vista de comparación

unidades:02_angular:01_primera_app [2014/07/03 10:44]
admin
unidades:02_angular:01_primera_app [2014/08/29 19:48] (actual)
admin
Línea 1: Línea 1:
-====== Primera aplicación ======+====== ​2.1 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. 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.
  
Línea 6: Línea 6:
   * script.js   * script.js
  
-<sxh html;​title:​index.html>​+<sxh html;​title:​index.html; highlight: [2,9,10];>
 <​!DOCTYPE html> <​!DOCTYPE html>
 <html ng-app="​app">​ <html ng-app="​app">​
Línea 22: Línea 22:
 </​sxh>​ </​sxh>​
  
-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+  * Línea 2: La primera cosa que nos encontramos es un atributo ​desconocido ​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 [[unidades:​02_angular:​08_modulos|módulo]] principal de nuestra aplicación. Pero ya veremos ​más adelante que es un [[unidades:​02_angular:​08_modulos|módulo]]
- +  * 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 ​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. +  * Línea ​9 incluye la directiva de angular ''​ng-controller''​. Esta directiva tiene el valor de ''​PruebaController''​. ​Este 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"​. 
- +  * Línea 10: 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>''​. ​Mirad lo sencillo que es ahora mostrar información desde JavaScript en HTML. Sólo tenemos que incluir entre llaves ''​%%{{ %%}}''​ el nombre de nuestra variable. Realmente no es tan bonito como cualquier variable de JS sino sólo los valores que están dentro de una variable //​especial//​ de angular. Ahora mismo explicamos ésto al ver el JavaScript.
-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.+
  
 <sxh js;​title:​script.js>​ <sxh js;​title:​script.js>​
Línea 38: Línea 35:
 </​sxh>​ </​sxh>​
  
-En la línea ​llamamos ​al método ''​angular.module''​. Este método nos permite crear módulos en angular ((Ya veremos ​mas adelante ​que es un módulo, por ahora solo piensa que es como un paquete en Java)) 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.+  * Línea ​1: Llamamos ​al método ''​angular.module''​. Este método nos permite crear [[unidades:​02_angular:​08_modulos|módulos]] en angular ((Ya veremos ​más adelante ​qué es un [[unidades:​02_angular:​08_modulos|módulo]], por ahora solo piensa que es como un paquete en Java)) y el nuevo [[unidades:​02_angular:​08_modulos|módulo]] se asigna a la variable ''​app''​ que por ahora no vamos a usarlo. 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. 
 +  * 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 más de la propia variable. 
 +  * 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
  
-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.+<note tip> 
 +En todas las aplicaciones ​que he hecho siempre he llamado al módulo principal "​app",​ nunca le llamo realmente "​tienda"​ o "​banco"​ o lo que sea 
 +El por qué de ello es que creo que realmente ​no aporta nada poner un  nombre descriptivo y tener siempre en toda la aplicación disponible una variable llamada ​''​app'' ​con el módulo principal ​de la aplicación me resulta muy útil. 
 +</​note>​
  
-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+<note important>​ 
 +Recuerda que al crear el [[unidades:​02_angular:​08_modulos|módulo]] hay que añadir un segundo parámetro ​con un array vacio: 
 +<sxh js> 
 +var app=angular.module("app",[]); 
 +</​sxh>​
  
-Pero pasemos a explicar ahora que es el ''​$scope''​ ya que es de las cosas mas importante de Angular+Si no lo haces así angular dará un error diciendo ​que no existe el módulo "​app"​.En el tema de módulos explicaremos por qué es necesario ​el array.
  
 +</​note>​
  
 ===== $scope ===== ===== $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:+Pasemos ahora a explicar con un poco más de detalle qué es el ''​$scope''​ ya que es de las cosas más importantes de Angular.  
 + 
 +El $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:
  
 <sxh js> <sxh js>
Línea 60: Línea 69:
 </​sxh>​ </​sxh>​
  
-¿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.+¿Por qué hacer ésto? Porque angular ​sólo 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''​ ((Realmente podríamos mostrarlas si modificamos directamente el DOM pero entonces perdemos la gracia de usar Angular)). 
 + 
 +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 ((En el siguiente tema vamos a ver un ejemplo de ésto)).Así que angular está 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''​. 
 + 
 +<note tip> 
 +Si no acabas de entender el $scope, no te preocupes, seguiremos hablando de él a lo largo de curso. En mi opinión es de las cosas que más cuestan de ver, aunque no sea de las mas difíciles. 
 +</​note>​ 
 + 
 +===== databinding ===== 
 +El //​Data-binding//​ es el concepto mas importante de angular y lo que hace es relacionar el HTML con nuestro modelo de datos. Es lo que acabamos de ver de poner las ''​%%{{ %%}}''​ en el HTML y que se transforme con los datos del JavaScript 
 + 
 +**La generación del HTML se produce una única vez ((Realmente se hace muchas veces pero vayamos poco a poco para entender Angular)) al generar la página**
  
-Podemos seguir creando variable con ''​var''​ pero no las podremos mostrar en el HTML si no están en el ''​$scope''​ ((Realmente podriamos mostrarlas si modificamos directametne el DOM pero entonces perdemos la gracia de usar Angular)).+{{:​unidades:​02_angular:​databinding1.png|}}
  
-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 ((En el siguiente tema vamos a ver un ejemplo de ésto)).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''​.+  * **Modelo**: Son las variables JavaScript ​con las información (modelo) ​que queremos mostrar ​en la página ​HTML 
 +  * **Plantilla**:​ es la página HTML que escribimos nosotrosSe llama plantilla ya que lo que escribimos ​no es realmente lo que se muestra ya que no queremos ​mostrar por ejemplo las llaves ​''​%%{{ %%}}''​ 
 +  * **HTML** : El el resultado de modificar la plantilla con los datos del modelo. Es lo que finalmente ve el usuario.
  
 +¿Qué hace Angular? Une la información del modelo y de la plantilla para generar el HTML que ve finalmente el usuario. Este concepto es similar a cualquier modelo de plantillas como pueda ser JSP o ASP. Lo importante por ahora es que este enlace se hace una sola vez ((Realmente se hace muchas veces pero vayamos poco a poco para entender Angular)) al cargar la página.
  
 +En los siguientes temas seguiremos viendo más características del //​Data-binding//​ de AngularJS
 ===== Ejemplo ===== ===== Ejemplo =====
  
Línea 73: Línea 99:
 ===== Resumen ===== ===== Resumen =====
   * En cada aplicación hay que:   * En cada aplicación hay que:
-    * Indicar el nombre del módulo principal con la directiva ''​ng-app''​. Ej: ''​ng-app="​app"''​.  +    * Indicar el nombre del [[unidades:​02_angular:​08_modulos|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',​[]);''​ +    * Desde JavaScript debemos crear el [[unidades:​02_angular:​08_modulos|módulo]] mediante ''​angular.module''​. Ej: ''​var app=angular.module('​app',​[]);''​ 
-  * Los controladores ​es donde está el código JS de nuestra aplicación.+  * Los controladores ​son donde está el código JS de nuestra aplicación.
     * Se especifican mediante la directiva ''​ng-controller''​. Ej: ''​ng-controller="​PruebaController"''​.     * 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) {}''​     * Se definen creando una función JavaScript que acepta como parámetro la variable ''​$scope''​. Ej: ''​function PruebaController($scope) {}''​
Línea 83: Línea 109:
   * [[https://​docs.angularjs.org/​guide/​scope|Scope]]   * [[https://​docs.angularjs.org/​guide/​scope|Scope]]
   * [[https://​docs.angularjs.org/​guide/​controller|Controllers]]   * [[https://​docs.angularjs.org/​guide/​controller|Controllers]]
 +  * [[https://​docs.angularjs.org/​api/​ng/​directive/​ngApp|ngApp]]
 +  * [[https://​docs.angularjs.org/​api/​ng/​directive/​ngController|ngController]]
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