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/23 17:23]
admin
unidades:02_angular:01_primera_app [2014/08/29 19:48] (actual)
admin
Línea 22: Línea 22:
 </​sxh>​ </​sxh>​
  
-  * Línea 2: La primera cosa que nos encontramos es un atributo desconocido ​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 [[unidades:​02_angular:​08_modulos|módulo]] principal de nuestra aplicación. Pero ya veremos ​mas adelante que es un [[unidades:​02_angular:​08_modulos|módulo]].+  * 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.   * 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.
-  * 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"​. +  * 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>''​. ​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.+  * 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.
  
 <sxh js;​title:​script.js>​ <sxh js;​title:​script.js>​
Línea 35: Línea 35:
 </​sxh>​ </​sxh>​
  
-  * 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 ​mas adelante ​que 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 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 ​mas de la propia variable.+  * 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   * 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 tip> <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.  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 porqué ​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.+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>​ </​note>​
  
Línea 50: Línea 50:
 </​sxh>​ </​sxh>​
  
-Si no lo haces así angular dará un error diciendo que no existe el módulo "​app"​.En el tema de módulos explicaremos ​porqué ​es necesario el array.+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>​ </​note>​
  
 ===== $scope ===== ===== $scope =====
-Pasemos ahora a explicar con un poco más de detalle ​que es el ''​$scope''​ ya que es de las cosas mas importante ​de Angular. ​+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: 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:
Línea 69: 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 ​podriamos ​mostrarlas si modificamos ​directametne ​el DOM pero entonces perdemos la gracia de usar Angular)).+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 ​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''​.+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> <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 mas cuestan de ver, aunque no sea de las mas difíciles.+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>​ </​note>​
  
Línea 87: Línea 87:
  
   * **Modelo**: Son las variables JavaScript con las información (modelo) que queremos mostrar en la página HTML   * **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 nosotros. Se llama plantilla ya que lo que escribimos no es realmente lo que se muestra ya que no queremos mostrar por ejemplo las llaves ''​%%{{ %%}}''​+  * **Plantilla**: ​es la página HTML que escribimos nosotros. Se 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.   * **HTML** : El el resultado de modificar la plantilla con los datos del modelo. Es lo que finalmente ve el usuario.
  
-¿Que 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.+¿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 ​mas características del //​Data-binding//​ de AngularJS+En los siguientes temas seguiremos viendo ​más características del //​Data-binding//​ de AngularJS
 ===== Ejemplo ===== ===== Ejemplo =====
  
Línea 101: Línea 101:
     * Indicar el nombre del [[unidades:​02_angular:​08_modulos|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 [[unidades:​02_angular:​08_modulos|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) {}''​
unidades/02_angular/01_primera_app.1406128993.txt.gz · Última modificación: 2014/07/23 17:23 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
Esta web utiliza cookies, puedes ver nuestra la política de cookies, aquí Si continuas navegando estás aceptándola
Política de cookies +