Browse Source

update: localization page

pull/23285/head
sumeyye 1 year ago
parent
commit
c2e3e70839
  1. 72
      docs/en/framework/ui/angular/localization.md

72
docs/en/framework/ui/angular/localization.md

@ -9,7 +9,7 @@ The Localization key format consists of 2 sections which are **Resource Name** a
```js ```js
const environment = { const environment = {
//... // ...
localization: { localization: {
defaultResourceName: "MyProjectName", defaultResourceName: "MyProjectName",
}, },
@ -49,7 +49,7 @@ Localization data is stored in key-value pairs:
```js ```js
{ {
//... // ...
AbpAccount: { // AbpAccount is the resource name AbpAccount: { // AbpAccount is the resource name
Key: "Value", Key: "Value",
PagerInfo: "Showing {0} to {1} of {2} entries" PagerInfo: "Showing {0} to {1} of {2} entries"
@ -121,12 +121,12 @@ See an example:
```ts ```ts
import { provideAbpCore, withOptions } from '@abp/ng.core'; import { provideAbpCore, withOptions } from '@abp/ng.core';
@NgModule({ export const appConfig: ApplicationConfig = {
providers: [ providers: [
// ... // ...
provideAbpCore( provideAbpCore(
withOptions({ withOptions({
..., // ...,
localizations: [ localizations: [
{ {
culture: 'en', culture: 'en',
@ -155,22 +155,18 @@ import { provideAbpCore, withOptions } from '@abp/ng.core';
], ],
}), }),
), ),
...
], ],
}) };
export class AppModule {}
``` ```
...or, you can determine the localizations in a feature module: ...or, you can determine the localizations in a feature provider configuration:
```ts ```ts
// your feature module // your feature configuration
@NgModule({ export function provideFeatureConfiguration(): EnvironmentProviders{
imports: [ return provideAbpCoreChild({
//...other imports localizations: [
CoreModule.forChild({
localizations: [
{ {
culture: 'en', culture: 'en',
resources: [ resources: [
@ -196,9 +192,8 @@ export class AppModule {}
], ],
}, },
], ],
}), })
] }
})
``` ```
The localizations above can be used like this: The localizations above can be used like this:
@ -267,8 +262,8 @@ import { Component } from "@angular/core";
@Component({ @Component({
selector: "app-root", selector: "app-root",
template: ` template: `
<abp-loader-bar></abp-loader-bar> <abp-loader-bar />
<router-outlet></router-outlet> <router-outlet />
`, `,
}) })
export class AppComponent {} export class AppComponent {}
@ -286,11 +281,12 @@ Since ABP has more than one language, Angular locale files loads lazily using [W
import { provideAbpCore, withOptions } from '@abp/ng.core'; import { provideAbpCore, withOptions } from '@abp/ng.core';
import { registerLocale } from '@abp/ng.core/locale'; import { registerLocale } from '@abp/ng.core/locale';
@NgModule({ export const appConfig: ApplicationConfig = {
providers: [ providers: [
// ...
provideAbpCore( provideAbpCore(
withOptions({ withOptions({
..., // ...,
registerLocaleFn: registerLocale( registerLocaleFn: registerLocale(
// you can pass the cultureNameLocaleFileMap and errorHandlerFn as optionally // you can pass the cultureNameLocaleFileMap and errorHandlerFn as optionally
{ {
@ -302,10 +298,9 @@ import { registerLocale } from '@abp/ng.core/locale';
), ),
}), }),
), ),
... // ...
], ],
}) };
export class AppModule {}
``` ```
### Mapping of Culture Name to Angular Locale File Name ### Mapping of Culture Name to Angular Locale File Name
@ -317,19 +312,18 @@ Some of the culture names defined in .NET do not match Angular locales. In such
If you see an error like this, you should pass the `cultureNameLocaleFileMap` property like below to the `registerLocale` function. If you see an error like this, you should pass the `cultureNameLocaleFileMap` property like below to the `registerLocale` function.
```js ```js
// app.module.ts // app.config.ts
import { registerLocale } from '@abp/ng.core/locale'; import { registerLocale } from '@abp/ng.core/locale';
// if you have commercial license and the language management module, add the below import // if you have commercial license and the language management module, add the below import
// import { registerLocale } from '@volo/abp.ng.language-management/locale'; // import { registerLocale } from '@volo/abp.ng.language-management/locale';
export const appConfig: ApplicationConfig = {
@NgModule({
providers: [ providers: [
// ... // ...
provideAbpCore( provideAbpCore(
withOptions({ withOptions({
..., // ...,
registerLocaleFn: registerLocale( registerLocaleFn: registerLocale(
{ {
cultureNameLocaleFileMap: { cultureNameLocaleFileMap: {
@ -340,18 +334,18 @@ import { registerLocale } from '@abp/ng.core/locale';
) )
}), }),
), ),
] ],
}) };
``` ```
See [all locale files in Angular](https://github.com/angular/angular/tree/master/packages/common/locales). See [all locale files in Angular](https://github.com/angular/angular/tree/master/packages/common/locales).
### Adding a New Culture ### Adding a New Culture
Add the below code to the `app.module.ts` by replacing `your-locale` placeholder with a correct locale name. Add the below code to the `app.config.ts` by replacing `your-locale` placeholder with a correct locale name.
```js ```js
//app.module.ts //app.config.ts
import { storeLocaleData } from "@abp/ng.core/locale"; import { storeLocaleData } from "@abp/ng.core/locale";
import( import(
@ -361,7 +355,7 @@ import(
).then((m) => storeLocaleData(m.default, "your-locale")); ).then((m) => storeLocaleData(m.default, "your-locale"));
``` ```
...or a custom `registerLocale` function can be passed to the `CoreModule`: ...or a custom `registerLocale` function can be passed to the abp core provider configuration options:
```js ```js
// register-locale.ts // register-locale.ts
@ -376,22 +370,22 @@ export function registerLocale(locale: string) {
) )
} }
// app.module.ts // app.config.ts
import { registerLocale } from './register-locale'; import { registerLocale } from './register-locale';
@NgModule({ export const appConfig: ApplicationConfig = {
providers: [ providers: [
// ... // ...
provideAbpCore( provideAbpCore(
withOptions({ withOptions({
..., // ...,
registerLocaleFn: registerLocale, registerLocaleFn: registerLocale,
}), }),
), ),
//... //...
] ],
}) };
``` ```
After this custom `registerLocale` function, since the en and fr added to the `webpackInclude`, only en and fr locale files will be created as chunks: After this custom `registerLocale` function, since the en and fr added to the `webpackInclude`, only en and fr locale files will be created as chunks:

Loading…
Cancel
Save