From f48f78618a326644843c01424b093f0d79448769 Mon Sep 17 00:00:00 2001 From: Sinan997 Date: Thu, 16 May 2024 13:37:01 +0300 Subject: [PATCH 1/6] update title strategy service to get project name from localized text --- .../lib/services/title-strategy.service.ts | 30 ++++++++++++------- .../packages/core/src/lib/tokens/index.ts | 3 +- ...tle-strategy-disable-project-name.token.ts | 3 ++ .../angular/projects/dev-app/src/index.html | 22 +++++++------- 4 files changed, 35 insertions(+), 23 deletions(-) create mode 100644 npm/ng-packs/packages/core/src/lib/tokens/title-strategy-disable-project-name.token.ts diff --git a/npm/ng-packs/packages/core/src/lib/services/title-strategy.service.ts b/npm/ng-packs/packages/core/src/lib/services/title-strategy.service.ts index 4cb351918d..b250009124 100644 --- a/npm/ng-packs/packages/core/src/lib/services/title-strategy.service.ts +++ b/npm/ng-packs/packages/core/src/lib/services/title-strategy.service.ts @@ -1,22 +1,19 @@ import { Injectable, effect, inject } from '@angular/core'; -import { toSignal } from '@angular/core/rxjs-interop'; import { TitleStrategy, RouterStateSnapshot } from '@angular/router'; import { Title } from '@angular/platform-browser'; -import { ConfigStateService } from './config-state.service'; +import { toSignal } from '@angular/core/rxjs-interop'; import { LocalizationService } from './localization.service'; +import { DISABLE_PROJECT_NAME } from '../tokens'; @Injectable({ providedIn: 'root', }) export class AbpTitleStrategy extends TitleStrategy { protected readonly title = inject(Title); - protected readonly configState = inject(ConfigStateService); protected readonly localizationService = inject(LocalizationService); + protected readonly disableProjectName = inject(DISABLE_PROJECT_NAME, { optional: true }) || false; protected routerState: RouterStateSnapshot; - projectName = toSignal(this.configState.getDeep$('localization.defaultResourceName'), { - initialValue: 'MyProjectName', - }); langugageChange = toSignal(this.localizationService.languageChange$); constructor() { @@ -29,15 +26,26 @@ export class AbpTitleStrategy extends TitleStrategy { } override updateTitle(routerState: RouterStateSnapshot) { + // routerState assignment is necessary for the language change this.routerState = routerState; - let title = this.buildTitle(routerState); + const title = this.buildTitle(routerState); + + let localizedText = ''; + + const projectName = this.localizationService.instant({ + key: '::AppName', + defaultValue: 'MyProjectName', + }); if (!title) { - this.title.setTitle(this.projectName()); - return; + return this.title.setTitle(projectName); + } + localizedText = this.localizationService.instant({ key: title, defaultValue: title }); + + if (!this.disableProjectName) { + localizedText += ` | ${projectName}`; } - const localizedTitle = this.localizationService.instant({ key: title, defaultValue: title }); - this.title.setTitle(`${localizedTitle} | ${this.projectName()}`); + this.title.setTitle(localizedText); } } diff --git a/npm/ng-packs/packages/core/src/lib/tokens/index.ts b/npm/ng-packs/packages/core/src/lib/tokens/index.ts index 7d0422ad7d..3e5cecd9ca 100644 --- a/npm/ng-packs/packages/core/src/lib/tokens/index.ts +++ b/npm/ng-packs/packages/core/src/lib/tokens/index.ts @@ -14,4 +14,5 @@ export * from './check-authentication-state'; export * from './http-context.token'; export * from './others-group.token'; export * from './tenant-not-found-by-name'; -export * from './compare-func.token' +export * from './compare-func.token'; +export * from './title-strategy-disable-project-name.token'; diff --git a/npm/ng-packs/packages/core/src/lib/tokens/title-strategy-disable-project-name.token.ts b/npm/ng-packs/packages/core/src/lib/tokens/title-strategy-disable-project-name.token.ts new file mode 100644 index 0000000000..afbee19528 --- /dev/null +++ b/npm/ng-packs/packages/core/src/lib/tokens/title-strategy-disable-project-name.token.ts @@ -0,0 +1,3 @@ +import { InjectionToken } from '@angular/core'; + +export const DISABLE_PROJECT_NAME = new InjectionToken('DISABLE_APP_NAME'); diff --git a/templates/module/angular/projects/dev-app/src/index.html b/templates/module/angular/projects/dev-app/src/index.html index 067936da71..88a791e8e4 100644 --- a/templates/module/angular/projects/dev-app/src/index.html +++ b/templates/module/angular/projects/dev-app/src/index.html @@ -1,13 +1,13 @@ - + - - - DevApp - - - - - - - + + + MyProjectName + + + + + + + From f073e4f70ecfaef3350ae001176014dbf05197b4 Mon Sep 17 00:00:00 2001 From: Sinan997 Date: Thu, 16 May 2024 14:28:32 +0300 Subject: [PATCH 2/6] add documentation for Title Strategy --- docs/en/UI/Angular/Title-Strategy-Service.md | 60 ++++++++++++++++++++ docs/en/docs-nav.json | 4 ++ 2 files changed, 64 insertions(+) create mode 100644 docs/en/UI/Angular/Title-Strategy-Service.md diff --git a/docs/en/UI/Angular/Title-Strategy-Service.md b/docs/en/UI/Angular/Title-Strategy-Service.md new file mode 100644 index 0000000000..41c1f183f1 --- /dev/null +++ b/docs/en/UI/Angular/Title-Strategy-Service.md @@ -0,0 +1,60 @@ +# Title Strategy For Angular + +## **ABP has a default title strategy for Angular UI**. + +This strategy is based on the title property. Provide a title property when setting a new route. +**Example:** + +```ts +{ + path: 'customers', + component: CustomersComponent, + title: 'AbpCustomers::Roles' +}, +``` + +**`Note:`** + +- It is better to use localized text in title property. It will be translated by **LocalizationService**. +- **`title`** property is already setted in **ABP internal packages**. + +## How it looks + +You create a new route and provide a **`title`** property, it will look like this **` | <projectName>`** + +### What is `projectName` and How to Customize + +- **`projectName`** is name of your application. By default ABP set's a [**`projectName`**](https://github.com/abpframework/abp/blob/f48f78618a326644843c01424b093f0d79448769/templates/app/aspnet-core/src/MyCompanyName.MyProjectName.Domain.Shared/Localization/MyProjectName/en.json#L4) for your application. This localization text is added for customization, it can be changed for different languages. + +### Disable `projectName` + +- If you dont want to show **`projectName`** in title, you can disable it. + +**app.module.ts** + +```ts +import { DISABLE_PROJECT_NAME } from '@abp/ng.core'; + +providers: [ + ..., + { provide: DISABLE_PROJECT_NAME, useValue: true} +], +``` + +- Now only title will be shown. + +## Override ABP's Default Title Strategy + +**app.module.ts** + +```ts +import { TitleStrategy } from '@angular/router'; +import { YourCustomStrategy } from './title-strategy.service.ts'; + +providers: [ + ..., + { provide: TitleStrategy, useExisting: YourCustomStrategy }, +], +``` + +- You can check [Angular Documentation](https://angular.io/api/router/TitleStrategy) to write custom **`TitleStrategy`**. diff --git a/docs/en/docs-nav.json b/docs/en/docs-nav.json index 8abc246509..d30322e277 100644 --- a/docs/en/docs-nav.json +++ b/docs/en/docs-nav.json @@ -1188,6 +1188,10 @@ { "text": "Abp Window Service", "path": "UI/Angular/Abp-Window-Service.md" + }, + { + "text": "Title Strategy", + "path": "UI/Angular/Title-Strategy-Service.md" } ] }, From ce58640dbe9f79a600e51c1a3417326615d50365 Mon Sep 17 00:00:00 2001 From: Sinan997 <sinanozturk997@gmail.com> Date: Thu, 16 May 2024 14:59:04 +0300 Subject: [PATCH 3/6] fix typos --- docs/en/UI/Angular/Title-Strategy-Service.md | 13 +++++++------ 1 file changed, 7 insertions(+), 6 deletions(-) diff --git a/docs/en/UI/Angular/Title-Strategy-Service.md b/docs/en/UI/Angular/Title-Strategy-Service.md index 41c1f183f1..4e7e98b234 100644 --- a/docs/en/UI/Angular/Title-Strategy-Service.md +++ b/docs/en/UI/Angular/Title-Strategy-Service.md @@ -3,6 +3,7 @@ ## **ABP has a default title strategy for Angular UI**. This strategy is based on the title property. Provide a title property when setting a new route. + **Example:** ```ts @@ -15,20 +16,20 @@ This strategy is based on the title property. Provide a title property when sett **`Note:`** -- It is better to use localized text in title property. It will be translated by **LocalizationService**. -- **`title`** property is already setted in **ABP internal packages**. +- It is better to use localized text in the title property. It will be translated by **LocalizationService**. +- The **`title`** property is already set in **ABP internal packages**. ## How it looks -You create a new route and provide a **`title`** property, it will look like this **`<title> | <projectName>`** +When you create a new route and provide a **`title`** property, it will look like this **`<title> | <projectName>`** ### What is `projectName` and How to Customize -- **`projectName`** is name of your application. By default ABP set's a [**`projectName`**](https://github.com/abpframework/abp/blob/f48f78618a326644843c01424b093f0d79448769/templates/app/aspnet-core/src/MyCompanyName.MyProjectName.Domain.Shared/Localization/MyProjectName/en.json#L4) for your application. This localization text is added for customization, it can be changed for different languages. +- **`projectName`** is the name of your application. By default, ABP sets a [**`projectName`**](https://github.com/abpframework/abp/blob/f48f78618a326644843c01424b093f0d79448769/templates/app/aspnet-core/src/MyCompanyName.MyProjectName.Domain.Shared/Localization/MyProjectName/en.json#L4) for your application. This localization text is added for customization and can be changed for different languages. ### Disable `projectName` -- If you dont want to show **`projectName`** in title, you can disable it. +- If you dont want to show **`projectName`** in the title, you can disable it. **app.module.ts** @@ -57,4 +58,4 @@ providers: [ ], ``` -- You can check [Angular Documentation](https://angular.io/api/router/TitleStrategy) to write custom **`TitleStrategy`**. +- You can check [Angular Documentation](https://angular.io/api/router/TitleStrategy) to write a custom **`TitleStrategy`**. From 71d43495c6036d37af2e9aef3a77333c0ec56b01 Mon Sep 17 00:00:00 2001 From: Sinan997 <sinanozturk997@gmail.com> Date: Thu, 16 May 2024 15:35:59 +0300 Subject: [PATCH 4/6] update ABP.Root interface and core module providers --- docs/en/UI/Angular/Title-Strategy-Service.md | 4 +--- .../packages/core/src/lib/core.module.ts | 17 ++++++++++------- .../packages/core/src/lib/models/common.ts | 1 + .../src/lib/services/title-strategy.service.ts | 3 +-- 4 files changed, 13 insertions(+), 12 deletions(-) diff --git a/docs/en/UI/Angular/Title-Strategy-Service.md b/docs/en/UI/Angular/Title-Strategy-Service.md index 4e7e98b234..5266bfd0a3 100644 --- a/docs/en/UI/Angular/Title-Strategy-Service.md +++ b/docs/en/UI/Angular/Title-Strategy-Service.md @@ -4,7 +4,7 @@ This strategy is based on the title property. Provide a title property when setting a new route. -**Example:** +**Example** ```ts { @@ -14,8 +14,6 @@ This strategy is based on the title property. Provide a title property when sett }, ``` -**`Note:`** - - It is better to use localized text in the title property. It will be translated by **LocalizationService**. - The **`title`** property is already set in **ABP internal packages**. diff --git a/npm/ng-packs/packages/core/src/lib/core.module.ts b/npm/ng-packs/packages/core/src/lib/core.module.ts index eb475074ce..b77849d44c 100644 --- a/npm/ng-packs/packages/core/src/lib/core.module.ts +++ b/npm/ng-packs/packages/core/src/lib/core.module.ts @@ -24,7 +24,7 @@ import { ToInjectorPipe } from './pipes/to-injector.pipe'; import { CookieLanguageProvider } from './providers/cookie-language.provider'; import { LocaleProvider } from './providers/locale.provider'; import { LocalizationService } from './services/localization.service'; -import { OTHERS_GROUP } from './tokens'; +import { DISABLE_PROJECT_NAME, OTHERS_GROUP } from './tokens'; import { localizationContributor, LOCALIZATIONS } from './tokens/localization.token'; import { CORE_OPTIONS, coreOptionsFactory } from './tokens/options.token'; import { TENANT_KEY } from './tokens/tenant-key.token'; @@ -40,12 +40,11 @@ import { DefaultQueueManager } from './utils/queue'; import { IncludeLocalizationResourcesProvider } from './providers/include-localization-resources.provider'; import { SORT_COMPARE_FUNC, compareFuncFactory } from './tokens/compare-func.token'; import { AuthErrorFilterService } from './abstracts'; -import { DYNAMIC_LAYOUTS_TOKEN } from "./tokens/dynamic-layout.token"; -import { DEFAULT_DYNAMIC_LAYOUTS } from "./constants"; +import { DYNAMIC_LAYOUTS_TOKEN } from './tokens/dynamic-layout.token'; +import { DEFAULT_DYNAMIC_LAYOUTS } from './constants'; import { AbpTitleStrategy } from './services/title-strategy.service'; import { LocalStorageListenerService } from './services/local-storage-listener.service'; - const standaloneDirectives = [ AutofocusDirective, InputEventDebounceDirective, @@ -201,12 +200,16 @@ export class CoreModule { IncludeLocalizationResourcesProvider, { provide: DYNAMIC_LAYOUTS_TOKEN, - useValue: options.dynamicLayouts || DEFAULT_DYNAMIC_LAYOUTS + useValue: options.dynamicLayouts || DEFAULT_DYNAMIC_LAYOUTS, }, { provide: TitleStrategy, - useExisting: AbpTitleStrategy - } + useExisting: AbpTitleStrategy, + }, + { + provide: DISABLE_PROJECT_NAME, + useValue: options.disableProjectNameInTitle || false, + }, ], }; } diff --git a/npm/ng-packs/packages/core/src/lib/models/common.ts b/npm/ng-packs/packages/core/src/lib/models/common.ts index 714f2422c2..704fde958a 100644 --- a/npm/ng-packs/packages/core/src/lib/models/common.ts +++ b/npm/ng-packs/packages/core/src/lib/models/common.ts @@ -15,6 +15,7 @@ export namespace ABP { localizations?: Localization[]; othersGroup?: string; dynamicLayouts?: Map<string, string>; + disableProjectNameInTitle?: boolean; } export interface Child { diff --git a/npm/ng-packs/packages/core/src/lib/services/title-strategy.service.ts b/npm/ng-packs/packages/core/src/lib/services/title-strategy.service.ts index b250009124..2b00338ab6 100644 --- a/npm/ng-packs/packages/core/src/lib/services/title-strategy.service.ts +++ b/npm/ng-packs/packages/core/src/lib/services/title-strategy.service.ts @@ -11,7 +11,7 @@ import { DISABLE_PROJECT_NAME } from '../tokens'; export class AbpTitleStrategy extends TitleStrategy { protected readonly title = inject(Title); protected readonly localizationService = inject(LocalizationService); - protected readonly disableProjectName = inject(DISABLE_PROJECT_NAME, { optional: true }) || false; + protected readonly disableProjectName = inject(DISABLE_PROJECT_NAME, { optional: true }); protected routerState: RouterStateSnapshot; langugageChange = toSignal(this.localizationService.languageChange$); @@ -26,7 +26,6 @@ export class AbpTitleStrategy extends TitleStrategy { } override updateTitle(routerState: RouterStateSnapshot) { - // routerState assignment is necessary for the language change this.routerState = routerState; const title = this.buildTitle(routerState); From b6b1b8614fb71304e803c4772d3fea51dbdd821c Mon Sep 17 00:00:00 2001 From: Masum ULU <49063256+masumulu28@users.noreply.github.com> Date: Thu, 16 May 2024 16:50:32 +0300 Subject: [PATCH 5/6] Update title-strategy.service.ts --- .../core/src/lib/services/title-strategy.service.ts | 8 +++----- 1 file changed, 3 insertions(+), 5 deletions(-) diff --git a/npm/ng-packs/packages/core/src/lib/services/title-strategy.service.ts b/npm/ng-packs/packages/core/src/lib/services/title-strategy.service.ts index 2b00338ab6..af961794f8 100644 --- a/npm/ng-packs/packages/core/src/lib/services/title-strategy.service.ts +++ b/npm/ng-packs/packages/core/src/lib/services/title-strategy.service.ts @@ -1,7 +1,7 @@ import { Injectable, effect, inject } from '@angular/core'; +import { toSignal } from '@angular/core/rxjs-interop'; import { TitleStrategy, RouterStateSnapshot } from '@angular/router'; import { Title } from '@angular/platform-browser'; -import { toSignal } from '@angular/core/rxjs-interop'; import { LocalizationService } from './localization.service'; import { DISABLE_PROJECT_NAME } from '../tokens'; @@ -29,8 +29,6 @@ export class AbpTitleStrategy extends TitleStrategy { this.routerState = routerState; const title = this.buildTitle(routerState); - let localizedText = ''; - const projectName = this.localizationService.instant({ key: '::AppName', defaultValue: 'MyProjectName', @@ -39,8 +37,8 @@ export class AbpTitleStrategy extends TitleStrategy { if (!title) { return this.title.setTitle(projectName); } - localizedText = this.localizationService.instant({ key: title, defaultValue: title }); - + + let localizedText = this.localizationService.instant({ key: title, defaultValue: title }); if (!this.disableProjectName) { localizedText += ` | ${projectName}`; } From d1c60559bba78554f39713e451650907ccee415e Mon Sep 17 00:00:00 2001 From: sumeyyeKurtulus <sumeyye.kurtulus.business@gmail.com> Date: Fri, 17 May 2024 09:04:01 +0300 Subject: [PATCH 6/6] fix: small typo in the documentation --- docs/en/UI/Angular/Title-Strategy-Service.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/en/UI/Angular/Title-Strategy-Service.md b/docs/en/UI/Angular/Title-Strategy-Service.md index 5266bfd0a3..64e94b3e17 100644 --- a/docs/en/UI/Angular/Title-Strategy-Service.md +++ b/docs/en/UI/Angular/Title-Strategy-Service.md @@ -27,7 +27,7 @@ When you create a new route and provide a **`title`** property, it will look lik ### Disable `projectName` -- If you dont want to show **`projectName`** in the title, you can disable it. +- If you don't want to show **`projectName`** in the title, you can disable it. **app.module.ts**