Showing posts with label angular. Show all posts
Showing posts with label angular. Show all posts

Monday, April 6, 2020

Import line spacing - Angular / React

Una de las buenas prácticas que considero que hacen lucir un código limpio es el *import line spacing* o una línea de separación entre los tipos de imports que hacés al inicio de tu código.

Podemos dividir los imports en al menos dos categorías: third party imports y application imports (o sea, las libraries de terceros y los imports de nuestra propia aplicación)

De igual forma, mantener un orden alfabético por módulo así como también los destructured imported.

Pero, ¿por qué? Así separamos visualmente lo que tiene que ver con ellos (third-party) con lo nuestro.

Y el orden alfabético nos ayuda a tener una mejor legibilidad y localizar fácilmente los símbolos.

Por otra parte, también nos puede servir de una métrica para saber si estamos haciendo mucho código en un archivo. O sea, por ejemplo, si ves que tenés más de 5 imports en el primer grupo o en el segundo grupo, podés usarlo de parámetros para reconsiderar y tratar de refactorizar tu código.

This is an example of a angular file: 

Esto es lo que debes evitar:


Aquí estamos siguiendo la buena práctica:


Source 1https://v2.angular.io/docs/ts/latest/guide/style-guide.html#!#03-06 
Source 2: https://dev.to/jorgealvarez/react-imports-the-rule-of-5-ji3

Wednesday, February 13, 2019

[i18n] Implementar ngx-translate en un proyecto Angular 7

Hola! Hoy te presento una forma de implementar i18n en tu proyecto Angular y esta forma es utilizando la libreria de terceros llamada *ngx-translate*

Es muy sencillo, te los mostraré en 5 pasos y asumiré que ya tienes creado tu proyecto Angular:

PASO 1: Instalar la librería en tu proyecto:


npm install @ngx-translate/core @ngx-translate/http-loader rxjs --save


PASO 2: Importar ngx-translate en app.module.ts
Tu app.module.ts quedaría así:

PASO 3: Inyectar TranslateService en app.component.ts
Tu app.component.ts quedaría así


Nota que le agregué una función que hace el switch de idioma. Podrías Llamar a esta función desde un botoncito o desde otro control.

PASO 4: Crear los archivos JSON por cada idioma.
Recomendación: podrías ubicar estos archivos en la siguiente ruta: assets/i18n/en.json

Un ejemplo:


PASO 5: Editar los templates (HTML) y agregar los translate
Y como último paso, usamos los translations y tenemos dos alternativas: usando pipes o directivas. Me gusta más los pipes. Quedaría así:


Y voilà! Eso es todo.

Hay algunas herramientas que podrían serte de ayuda en el sitio oficial: ngx-translate.com

Friday, June 15, 2018

How to make ng serve listen other than localhost

Actually, your angular app is running in:

http://localhost:4200/

Now, you can make your angular app run in:

http://172.21.19.19:8080/

It is simply like this:

ng serve --port 8080 --host 0.0.0.0 --disableHostCheck true

That's all!

Sunday, June 10, 2018

How to convert .angular-cli.json to angular.json (Angular 6 Migration)

Error: Local workspace file ('angular.json') could not be found.

Well, after running the following commands for migrating an angular app 5 to angular 6, I realized that the angular-cli.json hadn't been converted as you can see in the screenshot bellow:

npm install -g @angular/cli
npm install @angular/cli
ng update @angular/cli
ng update @angular/core
ng update @angular/material (I didn't execute this because I am not using Angular Material)




So, executing this command, I fixed this error:

ng update @angular/cli --from=1.7.4 --migrate-only


That's it! Now, you can go ahead with *ng serve*
Happy Coding!