TODO: Agregar descripci贸n
Nombre | P谩gina |
---|---|
NodeJS (NPM) | Web de descarga |
Angular CLI | Web de descarga |
Todas son indispensables para el desarrollo.
Haciendo uso de Git:
$ git clone https://github.com/edgarMejia/AngularTemplate.git
$ cd AngularTemplate
$ npm i
Para correr la app en modo dev:
Acci贸n | Comando |
---|---|
Correr en modo dev | ng serve |
Nombre | Descripci贸n |
---|---|
money | Si el valor tiene m谩s de dos decimales lo trunca a 2, si no tiene decimales le agrega '.00', si recibe null devuelve '00.00' |
Nombre | Descripci贸n | Repositorio |
---|---|---|
ngx-translate | Para la internacionalizaci贸n de textos | GitHub |
moment | Para la manipulaci贸n de fechas | GitHub |
bootstrap | Para la implementaci贸n de slider | GitHub |
Configuraciones extras realizadas al proyecto.
Normalmente los imports en ts son as铆:
import { CarouselComponent } from '../../../components/carousel/carousel.component';
Es posible mejorarlos para que se vean as铆:
import { CarouselComponent } from '~components/carousel/carousel.component';
Haciendo uso de la siguiente configuraci贸n, es necesario editar el archivo tsconfig.json
:
{
"compileOnSave": false,
"compilerOptions": {
"baseUrl": "./",
...
},
...
}
Cambiar el valor del baseUrl
de "./" por "./src" y agregar la ruta de las carpetas que quieres resumir justo despu茅s de baseUrl
:
{
"compileOnSave": false,
"compilerOptions": {
"baseUrl": "./src",
"paths": {
"~app/*": ["app/*"],
"~models/*": ["app/models/*"],
"~modules/*": ["app/modules/*"],
"~pipes/*": ["app/pipes/*"],
"~providers/*": ["app/providers/*"],
"~utils/*": ["app/utils/*"],
"~components/*": ["app/components/*"],
"~environments": ["environments/environment"]
},
...
},
...
}
Con esto las rutas ya han sido configuradas correctamente.
TODO: Agregar descripci贸n
$ npm install @ngx-translate/core --save
$ npm install @ngx-translate/http-loader --save
Luego en el app.module.ts
agregamos los siguientes inports
import { HttpClientModule, HttpClient } from '@angular/common/http';
import { TranslateModule, TranslateLoader } from '@ngx-translate/core';
import { TranslateHttpLoader } from '@ngx-translate/http-loader';
Seguido de los imports agregamos la siguiente funci贸n:
export function createTranslateLoader(http: HttpClient) {
return new TranslateHttpLoader(http, './assets/i18n/', '.json'); // esta es la ruta donde estaran los mensajes
}
Una vez importados los agregamos a los imports del m贸dulo:
@NgModule({
...,
imports: [
...,
HttpClientModule,
TranslateModule.forRoot({
loader: {
provide: TranslateLoader,
useFactory: (createTranslateLoader),
deps: [HttpClient]
}
})
],
...
})
export class AppModule {}
Dentro de la carpeta ./src/assets/
creamos una nueva carpeta llamada i18n
y dentro de ella creamos el archivo o los archivos con el c贸digo del idioma a usar en formato.json, para este caso ser谩n dos archivos es.json
y en.json
.
Es necesario inicializar el plugin con un idioma por defecto, para hacerlo usaremos el archivo app.component
, importaremos el provider de ngx-translate:
import { TranslateService } from '@ngx-translate/core';
Agregamos TranslateService al constructor:
constructor(
...,
private translate: TranslateService,
...
) {
this.initializeApp();
}
Luego en el m茅todo initializeApp()
:
this.translate.use('es');
const DEFAULT_LANG = this.translate.currentLang;
if (DEFAULT_LANG === 'es') {
this.translate.setDefaultLang('es');
this.translate.use('es');
} else if (DEFAULT_LANG === 'en') {
this.translate.setDefaultLang('en');
this.translate.use('en');
}
Primero en el archivo es.json
agregamos un message as铆:
{
"login.title": "Inicio de sesi贸n"
}
Luego se configurar谩 el m贸dulo de login con lazy load, en el m贸dulo login.module
se importa el siguiente m贸dulo:
import { TranslateModule } from '@ngx-translate/core';
@NgModule({
declarations: [
...
],
imports: [
...,
TranslateModule.forChild(),
...
]
})
export class LoginModule { }
Luego en el archivo login.component
se importa el provider de translate y se agrega al constructor:
import { TranslateService } from '@ngx-translate/core';
@Component({
...
})
export class LoginComponent implements OnInit {
...
constructor(
...,
public translate: TranslateService,
...
) { }
...
}
Nota: Se declara public porque las private o protected no son accesibles desde el html del componente, haciendo buen uso de las propiedades private y public es f谩cil identificar que variables o m茅todos se usan en el html y cuales s贸lo en el componente ts.
En el HTML usamos el pipe de translate y el key que se agreg贸 al archivo es.json
, en el archivo login.component.html
:
<h1>{{ 'login.title' | translate }}</h1>