Browse Source

example page added

pull/24731/head
erdemcaygor 7 months ago
parent
commit
5bc485c5fb
  1. 4
      npm/ng-packs/apps/dev-app/src/app/app.config.ts
  2. 4
      npm/ng-packs/apps/dev-app/src/app/app.routes.ts
  3. 1
      npm/ng-packs/apps/dev-app/src/app/home/home.component.html
  4. 59
      npm/ng-packs/apps/dev-app/src/app/localization-test/localization-test.component.ts
  5. 10
      npm/ng-packs/apps/dev-app/src/assets/localization/en.json
  6. 10
      npm/ng-packs/apps/dev-app/src/assets/localization/tr.json

4
npm/ng-packs/apps/dev-app/src/app/app.config.ts

@ -31,6 +31,10 @@ export const appConfig: ApplicationConfig = {
registerLocaleFn: registerLocaleForEsBuild(),
sendNullsAsQueryParam: false,
skipGetAppConfiguration: false,
uiLocalization: {
enabled: true,
basePath: '/assets/localization',
},
}),
),
provideAbpOAuth(),

4
npm/ng-packs/apps/dev-app/src/app/app.routes.ts

@ -10,6 +10,10 @@ export const appRoutes: Routes = [
path: 'dynamic-form',
loadComponent: () => import('./dynamic-form-page/dynamic-form-page.component').then(m => m.DynamicFormPageComponent),
},
{
path: 'localization-test',
loadComponent: () => import('./localization-test/localization-test.component').then(m => m.LocalizationTestComponent),
},
{
path: 'account',
loadChildren: () => import('@abp/ng.account').then(m => m.createRoutes()),

1
npm/ng-packs/apps/dev-app/src/app/home/home.component.html

@ -1,6 +1,7 @@
<div class="container">
<div class="text-center mb-4">
<a routerLink="/dynamic-form" class="btn btn-primary">Go to Dynamic Form</a>
<a routerLink="/localization-test" class="btn btn-secondary ms-2">Test Hybrid Localization</a>
</div>
<div class="p-5 text-center">
<div class="d-inline-block bg-success text-white p-1 h5 rounded mb-4" role="alert">

59
npm/ng-packs/apps/dev-app/src/app/localization-test/localization-test.component.ts

@ -0,0 +1,59 @@
import { Component, inject, OnInit } from '@angular/core';
import { LocalizationPipe, UILocalizationService, SessionStateService } from '@abp/ng.core';
import { CommonModule } from '@angular/common';
import { CardComponent, CardBodyComponent } from '@abp/ng.theme.shared';
import { AsyncPipe } from '@angular/common';
@Component({
selector: 'app-localization-test',
standalone: true,
imports: [CommonModule, LocalizationPipe, CardComponent, CardBodyComponent, AsyncPipe],
template: `
<div class="container mt-5">
<h2>Hybrid Localization Test</h2>
<abp-card cardClass="mt-4">
<abp-card-body>
<h5>Backend Localization (if available)</h5>
<p><strong>MyProjectName::Welcome:</strong> {{ 'MyProjectName::Welcome' | abpLocalization }}</p>
<p><strong>AbpAccount::Login:</strong> {{ 'AbpAccount::Login' | abpLocalization }}</p>
</abp-card-body>
</abp-card>
<abp-card cardClass="mt-4">
<abp-card-body>
<h5>UI Localization (from /assets/localization/{{ currentLanguage$ | async }}.json)</h5>
<p><strong>MyProjectName::CustomKey:</strong> {{ 'MyProjectName::CustomKey' | abpLocalization }}</p>
<p><strong>MyProjectName::TestMessage:</strong> {{ 'MyProjectName::TestMessage' | abpLocalization }}</p>
</abp-card-body>
</abp-card>
<abp-card cardClass="mt-4">
<abp-card-body>
<h5>UI Override (UI > Backend Priority)</h5>
<p><strong>AbpAccount::Login:</strong> {{ 'AbpAccount::Login' | abpLocalization }}</p>
<p class="text-muted">If backend has "Login", UI version should override it</p>
</abp-card-body>
</abp-card>
<abp-card cardClass="mt-4">
<abp-card-body>
<h5>Loaded UI Localizations</h5>
<pre>{{ loadedLocalizations | json }}</pre>
</abp-card-body>
</abp-card>
</div>
`,
})
export class LocalizationTestComponent implements OnInit {
private uiLocalizationService = inject(UILocalizationService);
private sessionState = inject(SessionStateService);
loadedLocalizations: any = {};
currentLanguage$ = this.sessionState.getLanguage$();
ngOnInit() {
// Yüklenen UI localization'ları göster
this.loadedLocalizations = this.uiLocalizationService.getLoadedLocalizations();
}
}

10
npm/ng-packs/apps/dev-app/src/assets/localization/en.json

@ -0,0 +1,10 @@
{
"MyProjectName": {
"Welcome": "Welcome from UI (en.json)",
"CustomKey": "This is a UI-only localization",
"TestMessage": "UI localization is working!"
},
"AbpAccount": {
"Login": "Sign In (UI Override)"
}
}

10
npm/ng-packs/apps/dev-app/src/assets/localization/tr.json

@ -0,0 +1,10 @@
{
"MyProjectName": {
"Welcome": "UI'dan Hoş Geldiniz (tr.json)",
"CustomKey": "Bu sadece UI'da olan bir localization",
"TestMessage": "UI localization çalışıyor!"
},
"AbpAccount": {
"Login": "Giriş Yap (UI Override)"
}
}
Loading…
Cancel
Save