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:

...
@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:

...
@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>

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

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

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:

# 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.

.setup {
  display: flex;
  flex-wrap: wrap;
}

flex-wrap: wrap-reverse;

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

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

.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:

/* 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:

.flex {
    flex: 0 1 auto;
}

es igual a:

.flex {
    flex-grow: 0;
    flex-shrink: 1;
    flex-basis: auto;
}

Leer en Gitbook

Fuentes y enlaces de interes:

Montar directorio NFS en Synology DS214

Guia para configurar carpetas NFS en Synology en nuestro equipo Ubuntu

Como indican en la web de Synology seguimos todos los pasos para crear nuestras carpetas compartidas en local mediante NFS.

Una vez configurado el NAS, para montar las carpetas necesitamos instalar el paquete nfs-commons :

sudo apt-get install nfs-common

Y añadimos en el archivo /etc/fstab como root:

sudo nano /etc/fstab

las carpetas a montar, como por ejemplo:

192.168.1.129:/volume1/video    /mnt/video      nfs     auto    0 0

En mi caso 192.168.1.129 es la IP del NAS y luego seguido de dos puntos : el directorio de la carpeta del NAS a montar /volume1/video.
La ruta /mnt/video es donde se va a montar en nuestro equipo.

Instalar Oh my zsh

Oh my ZSH! Es un términal configurable con multitud de plugins como Git que hacen más atractivo nuestro terminal ;)

El plugin de Git es mi favorito, no solo por el tema, es la funcionalidad extra que le da al terminal lo que hace que se más práctico, el poder conocer en la rama en la que nos encontramos así como cuando hemos realizado una modificación nos ayuda para saber el estado en el repo en el que nos encontramos, aquí podemos observar un pantallazo del términal con ohmyzsh y el plugin git:

Oh my zsh imagen

Este es uno de los plugins, hay miles de plugins que podemos encontrar en su repo oficial además de temas.

Para instalarlo, se han de siguir los siguintes pasos sacados de su repo oficial

1.Instalar via apt-get

 sudo apt-get install zsh

2.Hacer zsh como shell por defecto

 chsh -s $(which zsh)

3.Cerrar sesión y volver a abrir, al abrir el terminal nos pregungar si crear el archivo ~/.zshrc, el cual hará la función de bashrc.

4.En mi caso se instala correctamente pero no carga los temas ni aparece la carpeta ~/.oh-my-zsh en la cual se pueden instalar temas y plugins, para ello descargando e instalando el siguiente script se soluciona:

 curl -L http://install.ohmyz.sh > install.sh
 sh install.sh

Instalar entorno para desarrollo en Android

Pasos a seguir para configurar el entorno para desarrollar en Android con Android Studio en Ubuntu 14.04

  1. Descargar Android Studio
  2. Descomprimir donde queramos, en mi caso en ~/.local/android
  3. Añadir icono y acceso directo
  4. Para evitar el error de “Unable to install Android Studio in Ubuntu”
    $ sudo apt-get install lib32z1 lib32ncurses5 lib32bz2-1.0 lib32stdc++6
    
  5. Añado las variables de entorno a .zshrc en mi caso, si no se tiene instalado sería en .bashrc
    $ echo 'export PATH=$HOME/.local/android/sdk:$PATH' >> ~/.zshrc
    $ echo 'export PATH=$HOME/.local/android/sdk/tools:$PATH' >> ~/.zshrc
    $ echo 'export PATH=$HOME/.local/android/sdk/platform-tools:$PATH' >> ~/.zshrc
    $ source ~/.zshrc
    
  6. Instalar adb
    $ sudo apt-get install android-tools-adb android-tools-fastboot
    
  7. Añadir dispositivo para depurar e instalar apps con Android Studio o cordova/phonegap

Instalar node + npm sin sudo

Buenas, comento los pasos a seguir para instalar node en Ubuntu 14.04 para utilizar sin sudo, es decir poder instalar los paquetes que queramos sin necesidad de privilegios, OjO esto es peligroso, cualquier paquete npm o js que ejecutemos con node se ejecutara sin necesidad de sudo, no es nada recomendado para entornos de producción, sin embargo para desarrollo nos facilita bastante :).

  1. Para ello debemos tener instalado build essentials (g++ c++ make)
    $ sudo apt-get install build-essential
    
  2. Descargar la última versión de node en mi caso recomiendo LTS, para descargarla => nodejs.org

  3. Crear directorio donde vamos a poner todos los archivos de node en mi caso dentro de la carpeta ~/.local creare la carpeta node.

    $ cd ~/.local
    $ mkdir node
    
  4. Meter todo los archivos de node (tar que nos hemos descargado en el punto 1), tener en cuenta la ruta de la descarga.
    $ tar xf ~/Descargas/node-v4.4.0-linux-x64.tar.xz --strip-components=1
    
  5. Añadir el enlace simbolico del PATH en .bashrc o .zshrc si utilizas oh-my-zsh
    $ echo 'export PATH=$HOME/.local/node/bin:$PATH' >> ~/.zshrc
    $ echo 'export PATH=$HOME/.local/node:$PATH' >> ~/.zshrc
    $ source ~/.zshrc
    

Una vez terminado podemos comprobar que esta instalado correctamente al abrir el terminal y ejecutar donde nos devolera la versión de node que hemos instalado.

$ node -v
v4.2.3

Por último si queremos podemos actulizar npm :

$ npm install -g npm

Fuente original, traducida y modificada: http://corejs.docs.bqws.io/setup/#ubuntu

Escribir nuevo post en hexo.io

Para escribir una nueva entrada en hexo.io la forma más rápida es:

  • En la carpeta raiz del blog hexo.io:
$ hexo new nombre_post

Se debe de tener en cuenta no incluir espacios en el nombre, para ello utilizar nombre_post y automaticamente lo transforma en nombre-post

Una vez ejecutado hexo new nombre_post se crea un archivo nombre_post.md en la carpeta /source/_post/

Podemos ver la nueva entrada en blanco lanzando el server: hexo server e ir modificando el archivo nombre_post.md de nuestra nueva entrada.

En mi caso utilizo atom.io con el plugin markdown_preview que permite ver en tiempo real como va quedando el markdown de nuestra entrada.

Cuando ya tenemos nuestra entrada terminada, simplemente generar y desplegar en nuestro bloq:
hexo generate --deploy