Organización de código

El siguiente post es continuación del resumen de Angular 2

Organización de los componentes en Angular 2

Como vulgarmente se dice:

divide o vencéras

Partiendo del siguiente ejemplo en el que tenemos AppComponent en app/main.ts:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
import { NgModule, Component } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
@Component({
selector: 'my-app',
template: `<h1> {{title}} </h1>
<h2>{{carPart.name}}<h2>
<p>{{carPart.description}}<p>
<p>{{carPart.inStock}} in Stock<p>`
})
class AppComponent {
title = 'Ultra Racing';
carPart = {
"id": 1,
"name": "Super Tires",
"description": "These tires are the very best",
"inStock": 5
};
}
@NgModule ({
declarations: [ AppComponent ]
})
class AppModule { }
platformBrowserDynamic()
.bootstrapModule(AppModule);

Movemos toda la parte del componente AppComponent a un fichero aparte como por ejemplo app.component.ts:

1
2
3
4
5
6
7
8
9
10
11
12
13
import { Component } from '@angular/core';
@Component({
selector: 'my-app',
template: `<h1>{{title}}</h1>`
})
// Importante, exportar para utilizar el componente
export class AppComponent {
title = 'Ultra Racing';
carParts = [...];
totalCarParts() { ... };
}

Es importante, exportar para utilizar el componente export class..

En conclusión ahora disponeos de dos archivos:

  • main.ts Que importa el componente:
1
2
3
4
5
6
7
8
9
// Importante hacer el import
import { AppComponent } from './app.component';
@NgModule({
declarations: [ AppComponent ],
imports: [ BrowserModule ],
bootstrap: [ AppComponent ]
})
class AppModule { }
  • Y el propio componente en app.component.ts
1
2
3
4
5
6
7
8
9
10
11
12
import { Component } from '@angular/core';
@Component({
selector: 'my-app',
template: `<h1>{{title}}</h1>`
})
export class AppComponent {
title = 'Ultra Racing';
carParts = [...];
totalCarParts() { ... };
}
Mover el código HTML CSS

Ahora procedemos a separar el código del template (html) y añadir los estilos,

Como por ejemplo en el componente anterior:

1
2
3
4
5
6
7
8
9
10
11
12
13
import { Component } from '@angular/core';
@Component({
selector: 'my-app',
templateUrl: 'app/app.component.html',
styleUrls:['app/car-parts.component.css']
})
export class AppComponent {
title = 'Ultra Racing';
carParts = [...];
totalCarParts() { ... };
}

Como podemos observar el código HTML se encuentra en un archivo aparte app.component.html :

1
2
<p>There is a example ;).</p>
<ul>...</ul>

y el css en otro app.component.css :

1
2
3
4
5
6
7
.description {
color: #444;
font-size: small;
}
.price {
font-weight: bold;
}

De esta forma, nuestro componente se encuentra dividido en tres partes cada una en un archivo:

  • La lógica del componente en app.component.ts el cual se exporta para incluirlo en @module en main.ts.
  • El template con el html en app. component.html
  • Estilos del componente en app.component.css

Angular 2 - Estructura de directivas, Pipes y Métodos

Directivas

El siguiente post es continuación del resumen de Angular 2

Una directiva de Angular es la forma de añadir comportamiento dinámico a HTML mediante la etiqueta o selector que creamos.

Existen tres tipos diferentes de directivas:

Podemos verlas en el fragmento de código:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
...
@Component({
// El selector y templatte sería el primer tipo de directiva
selector: 'my-app',
template: `<h1>{{title}}</h1>
<ul>
<li *ngFor="let carPart of carParts">
<h2>{{carPart.name}}<h2>
<p>{{carPart.description}}<p>
<p *ngIf="carPart.inStock > 0">{{carPart.inStock}} in Stock</p>
<p *ngIf="carPart.inStock === 0">Out of Stock</p>
</li>
</ul>`
// En el propio template observamos las directivas de estructura *ngFor y *ngIf
})
class AppComponent {
...

Pipes y Métodos

Un pipe coge un dato de entrada y lo transforma a la salida deseada, como por ejemplo:

Métodos (Methods) como podemos imaginar es añadir métodos en la clase de nuestro componente para luego ser utilizada:

1
2
3
4
5
6
7
8
9
10
11
12
...
@Component({
selector: 'my-app',
template: `<h1>{{title}}</h1>`
})
class AppComponent {
exampleMethod() {
return 10;
}
}

Angular 2 - Primer componente Angular 2

El siguiente post es continuación del resumen de Angular 2

Para comenzar añadir en index.html el primer componente, llamado en este caso <my-app></my-app>

1
2
3
4
5
6
7
8
9
10
11
12
<!DOCTYPE html>
<html>
<head>
<!-- All the Angular 2 libraries needed -->
</head>
<body>
<my-app>Loading App ...</my-app>
</body>
</html>

Para cargar Js hay varias opciones, una de ellas es utilizar la librería SystemJS que se utiliza en el curso de codeschool:

El siguiente código añade el código de app/main.ts:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<!DOCTYPE html>
<html>
<head>
<!-- All the Angular 2 libraries needed -->
<script>
System.import('app')
.catch(function(err){ console.error(err); });
</script>
</head>
<body>
<my-app>Loading App ...</my-app>
</body>
</html>

También una buena opción es con webpack como explican al detalle en la web oficial de angular.io.

En app/main.ts añadimos nuestro primer componente:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
import { NgModule, Component } from '@angular/core';
//Las siguientes dependencias son para renderizar en el navegador
import { BrowserModule } from '@angular/platform-browser';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
// Our component decorator code goes here:
@Component({
//la etiqueta añadida anteriormente <my-app></my-app>
selector: 'my-app',
// El contendio que se carga en nuestro componente
template: `<h1> {{title}} </h1>
<h2>{{carPart.name}}<h2>
<p>{{carPart.description}}<p>
<p>{{carPart.inStock}} in Stock<p>`
})
class AppComponent {
//Definimos las propiedades que usamos en el template con {{ }}
title = 'Ultra Racing';
carPart = {
"id": 1,
"name": "Super Tires",
"description": "These tires are the very best",
"inStock": 5
};
}
// El nuevo componente lo debemos declarar en el decorador @NgModucle
@NgModule ({
declarations: [ AppComponent ]
})
class AppModule { }
// Bootrasp app (Arrancar la aplicación)
platformBrowserDynamic()
.bootstrapModule(AppModule);

Tanto @Component como @NgModule son decorators, una feauture de typescript, explicado de forma breve digamos que “extiende” la funcionalidad o comportamiento de la clase a un objeto:

Resumen curso "Accelerating through ANGULAR 2" de CodeSchool

Al igual que en post Resumen de Flexbox en este post voy a realizar un esquema de los puntos
principales del curso Accelerating through ANGULAR 2 de CodeSchool, este resumen es más un mero esquema para recordar algunos aspectos importantes que una guía para aprender sobre el tema.

Para profundizar, recomendaría estos enlaces de cursos y fuentes:

También es necesario tener conocimientos TypeScript:

Contenido del curso:

Hacer un backup de hexo.io

Al comenzar a utilizar hexo.io lo primero que se me vino a la cabeza fue hacer un backup del tema (personalización, adds, archivos estáticos) así como todos los archivos de configuración y post en markdown.

Así que lo primero que híze fue instalar hexo-git-backup y la verdad es que una vez configurado funcionaba perfectamente.. pero las últimas veces al hacer backup mi hacía un merge de las ramas que utiliza el plugin internamente para funcionar, además al usar el repositorio del blog en otro equipo distinto al habitual su funcionamiento no era el mismo.

Al final, lo más sencillo es lo más eficaz, ahora para hacer un backup tengo dos ramas en el repo del blog, master donde se encuentran los archivos estaticos del blog y backup donde esta toda la configuración y archivos necesarios en local para utilizar hexo.io.

De modo que en local siempre me encuentro en la rama backup, y en github la rama principal es master.

Lo único a tener en cuenta, es añadir la rama donde se hacen los deploys en el archivo de configuiración:

1
2
3
4
5
6
7
# Deployment
## Docs: http://hexo.io/docs/deployment.html
deploy:
type: git
repo: git@github.com:Luisangonzalez/bog.luisangonzalez.github.io.git
branch: master
message: New post

Es importante si no se hará el deploy en la rama en la que nos encontramos.

En definitiva, muchas veces lo mejor es no añadir complejidad innecesaria.

Resumen Flexblox del curso "Cracking the case with Flexbox" de CodeSchool

Cracking the case with Flexbox

Flexblox es un nuevo tipo de display, uno más de los ya conocidos:

  • Block layout
  • Table layout
  • Inline layout
  • Positioning layout
  • Flex layout
    • Flex containers
    • Flex items
    • Flex lines
  • Aquí podemos encontrar todas las propiedades de display.

Aparece para facilitarnos Responsive Design o Diesño adaptable evitando el uso de Float, con Flexbox cambia la forma en la que posicionamos los elementos como veremos en este breve resumen, destacando su estructura compuesta por un contenedor padre display: flex y sus elementos flex.

Ejemplo de variaciones en flex

Esta claro que Flexbox está para quedarse, actualmente es soportado por todos los nuevos navegadores :

Can i use Flexbox

Algunos patrones UI de Flexbox:

  • Equal heights (mismas alturas)
  • Vertically centered content (contenido centrado verticalmente)
  • Media objects
  • Sticky footers (Footer fijo)
  • Column layouts (Diseño en columnas)

Propiedades Flexbox:

flex-wrap: wrap;

El valor por defecto en Flexbox es nowrap, cuando se indica flex-wrap: wrap se obliga a los elementos a permanecer en la misma línea aún sin espacio, cuando no hay espacio horizontalmente coloca los elementos uno debajo de otro, verticalmente, parecido a display block.

1
2
3
4
.setup {
display: flex;
flex-wrap: wrap;
}

flex-wrap: wrap-reverse;

Renderiza al reves, el primer elemento es colocado el último.

1
2
3
4
.setup {
display: flex;
flex-wrap: wrap-reverse;
}

Flex direction

Flex wrap apila los elementos en pila tipo block cuando no hay espacio, si queremos apilar los elementos aún habiendo espacio debemos utlizar la propiedad flex-direction con el valor column.

1
2
3
4
.setup {
display: flex;
flex-direction: column;
}

El valor por defecto es row, estos son los posibles valores:

  • row
  • row-reverse
  • column
  • column-reverse

Justification and order:

Imagen de Mozilla Fundation con licencia CC-BY-SA 2.5. http://creativecommons.org/licenses/by-sa/2.5/

main asix

Main axis es determinada por flex-direction, es el caso por defecto flex-direction: row;
main axis es en horizonal y cross axis en vertical.

En el caso de flex-direction: column; es viceversa, main axis vertical y cross axis horizontal.

justify-content

Es usado para distribuir el contenido en el main axis

  • justify-content: flex-start (Default value)
  • justify-content: flex-end
  • justify-content: center
  • justify-content: space-between
  • justify-content: space-around

order

Ordenar elemento, -1, 0, 1..

align-items –> cross axis

Para alinear el contenido en el cross axis

  • aling-items: stretch; Defualt
  • aling-items: flex-start;
  • aling-items: flex-end;
  • aling-items: center;
  • aling-items: baseline;

OjO No se controla si los items son flex-wrap, para ello align-content

Size

Nuevas propieades para espacio, lo más común por defecto es usar:

min-width: 0

  • #flex-grow

Nueva propiedad de espacio en flex, por defecto:

flex-grow: 0;

Asiganando el valor 1 ocupa el máximo espacio posible:

flex-grow: 1;

También es posible utilizarlo proprocinalmente, es decir en un contenedor sin contenido de 1000px sería:

flex-grow: 1; –> 250px

flex-grow: 2; –> 500px

flex-grow: 1; –> 250px

Se cálcula de manera proporcional.

OjO Con contenido se adapata dependiendo el contenido que tiene.

OjO Si queremos que las imagenes mantengan su tamaño original:

flex-shrink: 0

  • OjO Para definir anchos (min-width) en flex items

Por defecto

flex-basis: auto

Se puede definir en %, px (absolute), em (relative), rm…

Combiar flex-basis y flex-shrink nos permite hacer layouts homogenos, es decir la imagen ocupa lo máximo de 'flex-basis tanto en horizontal como en vertical.

Hay que tener en cuenta:

1
2
3
4
5
6
7
8
/* Intrinsic sizing keywords*/
flex-basis: fill;
flex-basis: max-content;
flex-basis: min-content;
flex-basis: fit-content;
/* Automatically size based on the flex item's content */
flex-basis: content;

  • align-self

    Para alinear un item flex individual del resto:

El valor por defecto es align-self: strech, align-self sobreescribe a align-content

Es útil para usarlo en column, para ello ver las diapositivas 73 y 74.

  • align-content

    Usado para alinear los flex item wrapped

Shortland

OjO En IE no funcionan todos.

The default 0 1 auto:

1
2
3
.flex {
flex: 0 1 auto;
}

es igual a:

1
2
3
4
5
.flex {
flex-grow: 0;
flex-shrink: 1;
flex-basis: auto;
}

Leer en Gitbook

Fuentes y enlaces de interes: