1. Componentes. Introducción
Un componente permite crear una nueva etiqueta html y se define su comportamiento. Analicemos el app.component.tsimport { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'app works!';
}
Destaquemos lo siguiente:
1. import. Siempre debemos indicar las dependencias. En este caso @Component está definida en angular.core.
2. selector: Es la nueva etiqueta html que creamos
3. templateUrl: Puede ser tanto una url donde está nuestro código ( fichero o plantilla) html, o simplemente se puede indicar código html. Si está en la misma línea, podemos indicar las comillas simples ('') para separar el código html. En caso de haber varias líneas se debe separar mediante acentos graves (``).
4. styleUrls: Se pueden indicar un array con varios ficheros de css.
5. export : para hacerla pública la clase.
6. lógica de clase: en este caso asignamos una variable (title).
7. Localización de los ficheros: en este caso se usa "./" para indicar que están en la misma capeta (rutas relativas).
Veamos como referenciamos este componente en la aplicación
si vamos al fichero index.html , veremos que hay una referencia a este componente:
<!doctype html> <html> <head> <meta charset="utf-8"> <title>Ejem01</title> <base href="/"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="icon" type="image/x-icon" href="favicon.ico"> </head> <body> <app-root>Loading...</app-root> </body> </html>
vemos que en body hay una etiqueta <app-root>Loading...</app-root> que es la que nos mete el código html que se genera en el componete anterior.
2. Modificación del codigo html en el componente.
Vamos a modificar el código del componente y le vamos a suministrar código html sin necesidad de tenerlo en un fichero a parte. Micael aporta este código dentre de "templateUrl", pero nosotros como somos mas "gafes" solamente nos funciona con "template", por eso hemos comentado "templateUrl".Para que el código acepte varias líneas tenemos que usar las comillas del acento grave, o como dice Micael "comillas chungas". Estas comillas también permiten la sustitución de variables.
Veamos como quedaria.
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
//templateUrl: './app.component.html',
template: `
<h1>
a ver si va este codigo angular 2
</h1>
`,
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'app works!';
}
Le damos a salvar Ctrl+S y acontinuación Angular CLI recompila y el navegador nos ofrece la nueva vista.
3. Acceso a variables desde el fichero html
Veamos otra versión del copmponente anterior que referencia al fichero html y le creamos 2 variables, siendo la última la dirección de una imagen que hemos guardado en el directorio de recursos "assets".import { Component } from '@angular/core';
@Component({
selector: 'app-root',
styleUrls: ['./app.component.css'],
templateUrl: './app.component.html',
})
export class AppComponent {
title = 'app works, my folk, hehe!';
imgUrl= "assets/llissa.jpg";
myName = 'Ximo Dante';
setMyName (myName: string) {
this.myName=myName;
}
}
Respecto al fichero app.copmponent.html cuyo código es:
<h2>Título:</h2>
<h1> {{title}} </h1>
<img [src]="imgUrl" />
mi nombre es {{myName}}
<button (click) = "setMyName('John Travolta')" > Hola John </button>
Y destacamos:
1. Para incluir una variable dentro del texto utilizamos la sintaxis "moustache" es decir las dobles llaves. En este caso usamos la variable title definida en AppComponent, y se expresa {{title}}.
2. Para los atributos de html, dentro de los elementos html "<>", colocamos el atributo entre corchetes (en este caso [src]) y el valor de dicho atributo o sea el nombre de la variable, entre comillas dobles , en este caso "imgUrl".
3. Creamos un método tipo "setter" para establecer la variable "myName" y lo ejecutamos con un botón para cambiar el nombre inicial. El hml es capaz de asociar este método al click del botón en el html. Para ello hemos indicado el método "click" entre paréntesis.
4. Por tanto no hay que confundir los corchetes "[]" que se asocian a atributos ( <img [src]="imgUrl" />), con los paréntesis "()" que se asocian a las acciones (<button (click)= "set MyName('John')" ... )
No hay comentarios :
Publicar un comentario