From 14feb0e52fccfc7762973fe3e51cf0fd4e461928 Mon Sep 17 00:00:00 2001 From: mehmet-erim Date: Tue, 10 Mar 2020 14:17:51 +0300 Subject: [PATCH] docs: refactor angular docs --- docs/en/Authorization.md | 2 +- docs/en/Localization.md | 6 ++++- docs/en/UI/Angular/AddingSettingTab.md | 2 +- docs/en/UI/Angular/ComponentReplacement.md | 2 +- docs/en/UI/Angular/Localization.md | 27 ++++++++++------------ docs/en/UI/Angular/PermissionManagement.md | 6 +++-- docs/en/docs-nav.json | 26 --------------------- 7 files changed, 24 insertions(+), 47 deletions(-) diff --git a/docs/en/Authorization.md b/docs/en/Authorization.md index a17a8dbba7..d92dd03151 100644 --- a/docs/en/Authorization.md +++ b/docs/en/Authorization.md @@ -367,4 +367,4 @@ This is already done for the startup template integration tests. * [Permission Management Module](Modules/Permission-Management.md) * [ASP.NET Core MVC / Razor Pages JavaScript Auth API](API/JavaScript-API/Auth.md) -* [Permissions in Angular Projects](UI/Angular/PermissionManagement/index) +* [Permissions in Angular Projects](UI/Angular/PermissionManagement.md) diff --git a/docs/en/Localization.md b/docs/en/Localization.md index a9608482cb..4091225775 100644 --- a/docs/en/Localization.md +++ b/docs/en/Localization.md @@ -190,4 +190,8 @@ Localize a string: ````js var str = testResource('HelloWorld'); -```` \ No newline at end of file +```` + +## See Also + +* [Localization in Angular UI](UI/Angular/Localization.md) \ No newline at end of file diff --git a/docs/en/UI/Angular/AddingSettingTab.md b/docs/en/UI/Angular/AddingSettingTab.md index dba9ca1a3d..2eb4e9bb61 100644 --- a/docs/en/UI/Angular/AddingSettingTab.md +++ b/docs/en/UI/Angular/AddingSettingTab.md @@ -11,7 +11,7 @@ import { Component } from '@angular/core'; @Component({ selector: 'app-your-custom-settings', template: ` - your-custom-settings works! mySetting: {%{{ mySetting$ | async }}%} + your-custom-settings works! mySetting: {%{{{ mySetting$ | async }}}%} `, }) export class YourCustomSettingsComponent { diff --git a/docs/en/UI/Angular/ComponentReplacement.md b/docs/en/UI/Angular/ComponentReplacement.md index 877e5f67b6..1236fe5c9f 100644 --- a/docs/en/UI/Angular/ComponentReplacement.md +++ b/docs/en/UI/Angular/ComponentReplacement.md @@ -27,7 +27,7 @@ export class AppComponent { } ``` -![Example Usage](./images/inaction.gif) +![Example Usage](./images/component-replacement.gif) ## Available Replaceable Components diff --git a/docs/en/UI/Angular/Localization.md b/docs/en/UI/Angular/Localization.md index 16d3837582..99716603a1 100644 --- a/docs/en/UI/Angular/Localization.md +++ b/docs/en/UI/Angular/Localization.md @@ -1,17 +1,11 @@ ## Localization in Angular Projects -There are three ways to use localization in your project: - -- [Localization pipe](#using-the-localization-pipe) in your component's template -- [Localization service](#using-the-localization-service) in your TypeScript files. -- [Config State](#using-the-config-state) - Before you read about _the Localization Pipe_ and _the Localization Service_, you should know about localization keys. The Localization key format consists of 2 sections which are **Resource Name** and **Key**. `ResourceName::Key` -> If you do not specify the resource name, it will be `defaultResourceName` which is declared in _environment.ts_ +> If you do not specify the resource name, it will be `defaultResourceName` which is declared in `environment.ts` ```js const environment = { @@ -25,9 +19,9 @@ const environment = { So these two are the same: ```html -

{%{{ '::Key' | abpLocalization }}%}

+

{%{{{ '::Key' | abpLocalization }}}%}

-

{%{{ 'MyProjectName::Key' | abpLocalization }}%}

+

{%{{{ 'MyProjectName::Key' | abpLocalization }}}%}

``` ### Using the Localization Pipe @@ -35,7 +29,7 @@ So these two are the same: You can use the `abpLocalization` pipe to get localized text as in this example: ```html -

{%{{ 'Resource::Key' | abpLocalization }}%}

+

{%{{{ 'Resource::Key' | abpLocalization }}}%}

``` The pipe will replace the key with the localized text. @@ -43,7 +37,7 @@ The pipe will replace the key with the localized text. You can also specify a default value as shown below: ```html -

{%{{ { key: 'Resource::Key', defaultValue: 'Default Value' } | abpLocalization }}%}

+

{%{{{ { key: 'Resource::Key', defaultValue: 'Default Value' } | abpLocalization }}}%}

``` To use interpolation, you must give the values for interpolation as pipe parameters, for example: @@ -53,7 +47,7 @@ Localization data is stored in key-value pairs: ```js { //... - AbpAccount: { // This is the resource name + AbpAccount: { // AbpAccount is the resource name Key: "Value", PagerInfo: "Showing {0} to {1} of {2} entries" } @@ -63,7 +57,7 @@ Localization data is stored in key-value pairs: So we can use this key like this: ```html -

{%{{ 'AbpAccount::PagerInfo' | abpLocalization:'20':'30':'50' }}%}

+

{%{{{ 'AbpAccount::PagerInfo' | abpLocalization:'20':'30':'50' }}}%}

``` @@ -134,6 +128,9 @@ this.store.selectSnapshot( ); ``` ---- - Localization resources are stored in the `localization` property of `ConfigState`. + + +## See Also + +* [Localization in ASP.NET Core](../../Localization.md) \ No newline at end of file diff --git a/docs/en/UI/Angular/PermissionManagement.md b/docs/en/UI/Angular/PermissionManagement.md index 3fde81fafa..98829cefff 100644 --- a/docs/en/UI/Angular/PermissionManagement.md +++ b/docs/en/UI/Angular/PermissionManagement.md @@ -72,6 +72,8 @@ const routes: Routes = [ ]; ``` ---- - Granted Policies are stored in the `auth` property of `ConfigState`. + +## See Also + +* [Authorization](../../Authorization.md) \ No newline at end of file diff --git a/docs/en/docs-nav.json b/docs/en/docs-nav.json index 726e0acffb..88553298e6 100644 --- a/docs/en/docs-nav.json +++ b/docs/en/docs-nav.json @@ -300,32 +300,6 @@ } ] }, - { - "text": "User Interface", - "items": [ - { - "text": "Angular", - "items": [ - { - "text": "Localization", - "path": "Angular/Localization/Index.md" - }, - { - "text": "Adding a Settings Tab", - "path": "Angular/AddingASettingsTab/index.md" - }, - { - "text": "Permission", - "path": "Angular/PermissionManagement/index.md" - }, - { - "text": "Component Replacement", - "path": "Angular/ReplaceableComponents/index.md" - } - ] - } - ] - }, { "text": "Data Access", "path": "Data-Access.md",