Pedro Lara {Dev}

Databinding de propiedad en Typescript

Pedro Lara

En esta ocasión veremos lo que se conoce en Typescript como Databinding de propiedad. A través de este Databinding podemos hacer que un componente hijo pueda recibir variables que hemos declarado en un componente padre. Para este ejemplo he creado un nuevo componente llamado hijo:

Ahora procederemos a crear en el componente principal, el cual será nuestro componente padre, una variable de tipo any a la cual le vamos a asignar un objeto:

Para poder acceder desde el componente hijo a las propiedades del componente padre hacemos lo siguiente:

Lo que hemos hecho es que en el template del componente padre hemos llamado al componente hijo y a la vez hemos creado una variable de nombre "[nombredelavariable]" a la cual le estamos asignado la variable de nombre persona que ya tenemos dispone en el componente padre. Ahora para poder hacer uso de la variable "[nombredelavariable]"dentro del componente hijo, debemos de llamarla dentro de este. Veamos:

Aquí hemos importado el Input, luego hemos utilizado esta propiedad para llamar la variable de nombre "nombredelavariable" que ya tenemos disponible en el template del componente hijo, esta variable se la asignamos a otra que hemos creado de nombre verificar. Ahora solo debemos hacer la típica interpolación para poder utilizarla. Y eso esto todo:

Nota: Si se presenta algún error, solo se debe importar import { FormsModule } from '@angular/forms'; en app.module.ts y luego agregarlo en import: imports: [BrowserModule,FormsModule

Si toda va bien ahora podremos ver en la vista la variable que definimos en el componente padre.

Tipos primitivos en Angular 7

Pedro Lara

Pedro Lara

En angular 7, como en la mayoría de los lenguajes de programación, disponemos de lo que se conoce como tipos primitivos.Dentro de los tipos primitivos tenemos los siguientes:

Boolean
Este tipo de datos primitivos acepta dos valores: true o false:

let isDone:boolean= false;

Number
Este tipo de datos acepta prácticamente cualquier tipo de dato numérico:

let decimal:number= 7;
let hex:number= 0xf00d;
let binary:number= 0b1010;
let octal:number= 0o744;

Strimg
Este tipo de datos puede contener cadena de caracteres o texto:

let decimal:number= 7;
let ciudad :string= Santiago;

Templates
A través del uso de las comillas invertidas podemos insertar en una variable tipo string texto multinlinea, ademas de que podemos concatenar otras variables.

var nombre:string = "Juan";
var saludo:string= `¡Hola ${nombre}!,Las puertas se abrieron a las 12; el público 
no tardó en ingresar`;

Array
Los array sino se les especifica por defecto son de tipo Any:

let list:number= [1,2,3,4];
let list:Array<number>= [1,2,3,4];

Any
Cuando definimos una variable de tipo any estamos deciendole que acepte cualquier tipo de dato:

let list:any=8;
list='Hola';
list=false;
let objeto:any[]=[1,true,"Hola"];

Pedro Lara Peguero

Desarrollador Frelance

11:16:00 Angular , JavaScript , Programación

Resolviendo el error: angular is not installed. Try running `bower install

Pedro Lara

Este error aparece con frecuencia luego de instalar gulp. Aunque muchos sugieren resolverlo modificando el fichero .bowerrc sustituyendo "app / bower_components" por: "app / bower_components" y modificando el fichero gulpfile.js eliminando algunas lineas y agregando otras, la mejor solución es modificar este fichero totalmente como dice este hilo en Github: 1299

En mi caso, luego de modificar el fichero, me empezó a presentar el error: Invalid call to lazypipe().pipe(): no stream creation function specified

Este error lo resolvemos, como nos recomienda Valentin Ibanez , modificando el fichero gulpfile.js de la siguiente manera:

var lintScripts = lazypipe ()
.pipe ($. jshint, '.jshintrc')
.pipe ($. jshint.reporter, 'jshint-stylish');

var styles = lazypipe ()
.pipe ($. autoprefixer, 'last 1 version')
.pipe (gulp.dest, '.tmp / styles');

en lugar de

var lintScripts = lazypipe ()
.pipe ($ .jshint) // '.jshintrc'
.pipe ($. jshint.reporter, 'jshint-stylish');

var styles = lazypipe ()
.pipe ($. sass, {
outputStyle: 'expanded',
precision: 10
})
.pipe ($. autoprefixer, {
browsers: ['last 2 version']
}))
.pipe (gulp.dest) , yeoman.temp + '/ styles');

19:12:00 angular2 , Pedro Lara , Programación , TECNOLOGIA

Ionic serve bash: ionic: command not found

Pedro Lara

Luego de varios meses de haber instalado nodejs y Ionic en Windows y tener todo funcionando buen, precisamente en el momento en que me encargan un proyecto nuevo, cuando trato de arrancar el servidor con ionic serve me aparecen varios errores que me forzan a tener que instalar todo nuevamente.

Luego de instalar nodejs y ionic de manera global me aparece el siguiente error que me retraso varias horas.

Luego de varias búsquedas en internet pudé encontrar varias posibles soluciones que le funcionaban a los demás pero a mi no.Finalmente, lo que me di cuenta que por alguna razón ionic se instaló en una carpeta diferente a la global de npm. Ejecutando la sentencia npm root -g, me aparecía la siguiente ruta: C:\ionicProyect\1.myApp\Program\node_modules, en lugar de /usr/local/lib/node_modules.

La solución fue cambiar el prefijo de configuración de npm. Para hacerlo ejecuté la sentencia: npm config set prefix /usr/local. Sin embargo, esta solución no me funcionó del todo desde Git bash, pues no me movía la raíz a /usr/local, sino que lo hacia a una ruta diferente:

Finalmente volví a ejecutar la sentencia npm config set prefix /usr/local, pero esta vez desde la linea de comandos:

Esta vez si me movió la carpeta a la raíz correspondiente. Volví a instalar ionic de manera global y todo funciona correctamente.

6:05:00 ionic , Pedro Lara , Programación

Subir múltiples imágenes con laravel

Pedro Lara

22 - 09 - 2017

En esta ocasión vamos a ver cómo podemos subir varias imágenes simultáneamente a nuestro servidor y guardarlas en una base de datos de Mysql usando Laravel.

Empecemos:

Para este ejemplo vamos a utilizar un formulario HTML bastante sencillo ya que contendrá sólo un imput: images. Sin embargo las imágenes también pueden ser enviadas a través de una aplicación móvil y va a funcionar.

<html>

<head>

<title>Subir imágenes</title>

</head>

<body>

/*Ahora llamamos el action que se encargará de procesar las imágenes que vamos a enviar a nuestro servidor. Para poder enviar las imágenes es necesario colocar enctype="multipart/form-data" para indicarle al navegador que estamos enviando varios archivos.*/

/*Para poder subir imágenes nuestro input debe ser de tipo file y además debemos indicar que es un array images[] */

<br>

</form>

</body> </html>

Ahora vamos a crear la función que recibirá las imágenes en nuestro servidor, las moverá a una carpeta y guardará el nombre en la base de datos de Mysql. Pero antes debemos crear el endpoint en nuestro archivo de rutas:

Route::post(' UploadImage','ImageController@store');

Como puede observarse, en la ruta anterior hemos hecho referencia a un controlador llamado ImageController y a su método store. En consecuencia debemos crear este controlador con su método. Esto lo podemos hacer con la siguiente sentencia desde la línea de comandos:

php artisan make:controller ImageController

Esta sentencia nos creará un controlador con el nombre indicado (ImageController). Ahora dentro del controlador creamos la función store la cual procesará nuestras imágenes:

public function store( Request $request){

}

También es necesario crear la tabla en nuestra base de datos y su respectivo modelo para guardar el nombre de las imágenes.Para crear un modelo en laravel debemos de ejecutar la siguiente sentencia desde la linea de comandos:

php artisan make:model User

La sentencia anterior nos creará un modelo el cual usaremos para hacer crud a nuestra tabla de imágenes.

Ya que tenemos creado nuestro modelo, nuestra tabla y nuestro controlador, pasemos ahora a trabajar con el método que procesará nuestras imágenes.

El usuario puede enviar sólo una imagen, pero puede enviar más de una. Así que, para acceder a cada una de las imágenes en caso de que el usuario envié varias, vamos a crear un bucle foreach:

foreach ($request->file('imagen') as $file) {

}

Dentro de este bucle lo primero que hacemos es colocarle un nombre a cada una de las imágenes que recibimos:

$filename= 'collection_'.time().$file->getClientOriginalName();

En este ejemplo le he colocado el prefijo 'collection_' más la hora en formato unix con la función time(). Además le he concatenado el nombre original de la imagen con la función getClientOriginalName(). Esto es para tratar que no se repitan los nombres de las imágenes. Sin embargo, existen otros métodos para colocarle prefijos aleatorios. Cada uno debe escoger el que más les convenga.

Luego procedemos a mover las imágenes a una carpeta que ya debemos haber creado dentro del directorio público de Laravel:

$file->move('Files/', $filename);

Para saber exactamente donde se encuentra la carpeta publica de nuestro proyecto podemos hacer uso de la función public_path(). Y dentro de la ruta que nos devuelve esta función creamos un directorio para guardar nuestras imágenes. En este caso, hemos creado un directorio de nombre Files dentro de la carpeta Public.

Lo que sigue es guardar el nombre completo (nombre+ ruta) de nuestras imágenes dentro la base de datos. Otra opción sería guardar las imágenes como base64, pero en este ejemplo prefirimos guardar sólo el nombre. Para esto inicializamos nuestro modelo:

$filemodel=new Image;

Guardamos el nombre:

$filemodel->name=$filename;

Posteriormente, validamos que las imágenes se hayan guardado:

if ($filemodel->save()) {

$response['success'] = 'true';

$response['message'] = 'images Added Successfully!';

} else {

$response['success'] = 'false';

$response['message'] = 'Error in saving data try again!';

}

Al final nuestra función quedaría de la siguiente manera:

public function store( Request $request){

foreach ($request->file('imagen') as $file) {

$filename= 'collection_'.time().$file->getClientOriginalName();

$file->move('Files/', $filename);

$filemodel=new Image;

$filemodel->name=$filename;

if ($filemodel->save()) {

$response['success'] = 'true';

$response['message'] = 'images Added Successfully!';

} else {

$response['success'] = 'false';

$response['message'] = 'Error in saving data try again!';

}

return json_encode($response);

}

Todo muy fácil, hasta la próxima

Videos relacionados

14:58:00 Laravel , Pedro Lara , PHP , Programación

Libro de TypeScrip pdf | Descargar Gratis

Pedro Lara

TypeScript (TS) se está conviertiendo en el lenguaje de programación estándar para trabajar con JavaScript. Permite que podamos escribir código con menos errores, más sencillo, coherente, fácil de probar, más limpio y sólido.

Tipos de datos
Fat arrow
Desestructuración
Estructuración
Promesas
Generators
Esperas asincrónicas - Async Await
Clases
Decorators
Módulos
Sistemas de automatización
Consejos

ENLACE DEL LIBRO EN AMAZON

Descargar

10:48:00 JavaScript , Programación

Directiva Angular para validación de NIF/NIE

Pedro Lara

Un tema muy interesante en Angular 2 es el uso de directivas. En la página oficial de Angular 2 se encuentra una documentación bastante didactica acerca de las diversas directivas de este este frameworks. En esta ocasión les comparto el uso de una de estas directivas: NgIf.

Directiva NgIfNg

16:24:00 angular2 , Programación