From f36cb72e1a41d38d7b24259f9a76949a0feecd29 Mon Sep 17 00:00:00 2001 From: muhammedaltug Date: Wed, 9 Mar 2022 15:27:55 +0300 Subject: [PATCH 1/4] update en docs --- docs/en/UI/Angular/Config-State-Service.md | 2 +- docs/en/UI/Angular/Confirmation-Service.md | 31 +++++------ docs/en/UI/Angular/Environment.md | 62 ++++++++++------------ docs/en/UI/Angular/Quick-Start.md | 2 +- docs/en/UI/Angular/Testing.md | 4 +- docs/en/UI/Angular/Toaster-Service.md | 18 +++---- 6 files changed, 55 insertions(+), 64 deletions(-) diff --git a/docs/en/UI/Angular/Config-State-Service.md b/docs/en/UI/Angular/Config-State-Service.md index 3c1930d908..b3884f65e1 100644 --- a/docs/en/UI/Angular/Config-State-Service.md +++ b/docs/en/UI/Angular/Config-State-Service.md @@ -110,7 +110,7 @@ this.config.getSetting$("Abp.Identity.TwoFactor.Behaviour").subscribe(twoFactorB #### State Properties -Please refer to `ApplicationConfiguration.Response` type for all the properties you can get with `getOne` and `getDeep`. It can be found in the [application-configuration.ts file](https://github.com/abpframework/abp/blob/dev/npm/ng-packs/packages/core/src/lib/models/application-configuration.ts#L4). +Please refer to `ApplicationConfigurationDto` type for all the properties you can get with `getOne` and `getDeep`. It can be found in the [models.ts file](https://github.com/abpframework/abp/blob/dev/npm/ng-packs/packages/core/src/lib/proxy/volo/abp/asp-net-core/mvc/application-configurations/models.ts#L11). ## Set State diff --git a/docs/en/UI/Angular/Confirmation-Service.md b/docs/en/UI/Angular/Confirmation-Service.md index ef48332580..3c864d2bba 100644 --- a/docs/en/UI/Angular/Confirmation-Service.md +++ b/docs/en/UI/Angular/Confirmation-Service.md @@ -2,12 +2,10 @@ You can use the `ConfirmationService` in @abp/ng.theme.shared package to display a confirmation popup by placing at the root level in your project. - ## Getting Started You do not have to provide the `ConfirmationService` at module or component level, because it is already **provided in root**. You can inject and start using it immediately in your components, directives, or services. - ```js import { ConfirmationService } from '@abp/ng.theme.shared'; @@ -26,7 +24,7 @@ You can use the `success`, `warn`, `error`, and `info` methods of `ConfirmationS ### How to Display a Confirmation Popup ```js -const confirmationStatus$ = this.confirmation.success('Message', 'Title'); +const confirmationStatus$ = this.confirmation.success("Message", "Title"); ``` - The `ConfirmationService` methods accept three parameters that are `message`, `title`, and `options`. @@ -48,18 +46,16 @@ this.confirmation }); ``` - - The `message` and `title` parameters accept a string, localization key or localization object. See the [localization document](./Localization.md) - `Confirmation.Status` is an enum and has three properties; - - `Confirmation.Status.confirm` is a closing event value that will be emitted when the popup is closed by the confirm button. - - `Confirmation.Status.reject` is a closing event value that will be emitted when the popup is closed by the cancel button. - - `Confirmation.Status.dismiss` is a closing event value that will be emitted when the popup is closed by pressing the escape or clicking the backdrop. - + - `Confirmation.Status.confirm` is a closing event value that will be emitted when the popup is closed by the confirm button. + - `Confirmation.Status.reject` is a closing event value that will be emitted when the popup is closed by the cancel button. + - `Confirmation.Status.dismiss` is a closing event value that will be emitted when the popup is closed by pressing the escape or clicking the backdrop. If you are not interested in the confirmation status, you do not have to subscribe to the returned observable: ```js -this.confirmation.error('You are not authorized.', 'Error'); +this.confirmation.error("You are not authorized.", "Error"); ``` ### How to Display a Confirmation Popup With Given Options @@ -71,16 +67,16 @@ const options: Partial = { hideCancelBtn: false, hideYesBtn: false, dismissible: false, - cancelText: 'Close', - yesText: 'Confirm', - messageLocalizationParams: ['Demo'], + cancelText: "Close", + yesText: "Confirm", + messageLocalizationParams: ["Demo"], titleLocalizationParams: [], }; this.confirmation.warn( - 'AbpIdentity::RoleDeletionConfirmationMessage', - 'Are you sure?', - options, + "AbpIdentity::RoleDeletionConfirmationMessage", + "Are you sure?", + options ); ``` @@ -110,7 +106,7 @@ this.confirmation.warn( Do you confirm that? `, 'Are you sure?', - options, + options ); ``` @@ -138,8 +134,7 @@ success( ): Observable ``` -> See the [`Config.LocalizationParam` type](https://github.com/abpframework/abp/blob/master/npm/ng-packs/packages/core/src/lib/models/config.ts#L46) and [`Confirmation` namespace](https://github.com/abpframework/abp/blob/master/npm/ng-packs/packages/theme-shared/src/lib/models/confirmation.ts) - +> See the [`LocalizationParam` type](https://github.com/abpframework/abp/blob/master/npm/ng-packs/packages/core/src/lib/models/localization.ts#L6) and [`Confirmation` namespace](https://github.com/abpframework/abp/blob/master/npm/ng-packs/packages/theme-shared/src/lib/models/confirmation.ts) ### warn diff --git a/docs/en/UI/Angular/Environment.md b/docs/en/UI/Angular/Environment.md index 9802eb6264..026c5c5fc7 100644 --- a/docs/en/UI/Angular/Environment.md +++ b/docs/en/UI/Angular/Environment.md @@ -1,6 +1,6 @@ # Environment -Every application needs some **environment** variables. In Angular world, this is usually managed by `environment.ts`, `environment.prod.ts` and so on. It is the same for ABP as well. +Every application needs some **environment** variables. In Angular world, this is usually managed by `environment.ts`, `environment.prod.ts` and so on. It is the same for ABP as well. Current `Environment` configuration holds sub config classes as follows: @@ -30,7 +30,7 @@ export interface ApiConfig { ``` Api config has to have a default config and it may have some additional ones for different modules. -I.e. you may want to connect to different Apis for different modules. +I.e. you may want to connect to different Apis for different modules. Take a look at following example @@ -39,35 +39,34 @@ Take a look at following example // ... "apis": { "default": { - "url": "https://localhost:8080", + "url": "https://localhost:8080" }, "AbpIdentity": { - "url": "https://localhost:9090", + "url": "https://localhost:9090" } - }, + } // ... } ``` -When an api from `AbpIdentity` is called, the request will be sent to `"https://localhost:9090"`. +When an api from `AbpIdentity` is called, the request will be sent to `"https://localhost:9090"`. Everything else will be sent to `"https://localhost:8080"` -* `rootNamespace` **(new)** : Root namespace of the related API. e.g. Acme.BookStore +- `rootNamespace` **(new)** : Root namespace of the related API. e.g. Acme.BookStore ## Application ```js - export interface Application { +export interface Application { name: string; baseUrl?: string; logoUrl?: string; } ``` -* `name`: Name of the backend Application. It is also used by `logo.component` if `logoUrl` is not provided. -* `logoUrl`: Url of the application logo. It is used by `logo.component` -* `baseUrl`: [For detailed information](./Multi-Tenancy.md#domain-tenant-resolver) - +- `name`: Name of the backend Application. It is also used by `logo.component` if `logoUrl` is not provided. +- `logoUrl`: Url of the application logo. It is used by `logo.component` +- `baseUrl`: [For detailed information](./Multi-Tenancy.md#domain-tenant-resolver) ## AuthConfig @@ -75,7 +74,7 @@ For authentication, we use angular-oauth2-oidc. Please check their [docs](https: ## RemoteEnvironment -Some applications need to integrate an existing config into the `environment` used throughout the application. +Some applications need to integrate an existing config into the `environment` used throughout the application. Abp Framework supports this out of box. To integrate an existing config json into the `environment`, you need to set `remoteEnv` @@ -83,29 +82,28 @@ To integrate an existing config json into the `environment`, you need to set `re ```js export type customMergeFn = ( localEnv: Partial, - remoteEnv: any, + remoteEnv: any ) => Config.Environment; export interface RemoteEnv { url: string; - mergeStrategy: 'deepmerge' | 'overwrite' | customMergeFn; + mergeStrategy: "deepmerge" | "overwrite" | customMergeFn; method?: string; headers?: ABP.Dictionary; } ``` -* `url` *: Required. The url to be used to retrieve environment config -* `mergeStrategy` *: Required. Defines how the local and the remote `environment` json will be merged - * `deepmerge`: Both local and remote `environment` json will be merged recursively. If both configs have same nested path, the remote `environment` will be prioritized. - * `overwrite`: Remote `environment` will be used and local environment will be ignored. - * `customMergeFn`: You can also provide your own merge function as shown in the example. It will take two parameters, `localEnv: Partial` and `remoteEnv` and it needs to return a `Config.Environment` object. -* `method`: HTTP method to be used when retrieving environment config. Default: `GET` -* `headers`: If extra headers are needed for the request, it can be set through this field. +- `url` \*: Required. The url to be used to retrieve environment config +- `mergeStrategy` \*: Required. Defines how the local and the remote `environment` json will be merged + - `deepmerge`: Both local and remote `environment` json will be merged recursively. If both configs have same nested path, the remote `environment` will be prioritized. + - `overwrite`: Remote `environment` will be used and local environment will be ignored. + - `customMergeFn`: You can also provide your own merge function as shown in the example. It will take two parameters, `localEnv: Partial` and `remoteEnv` and it needs to return a `Config.Environment` object. +- `method`: HTTP method to be used when retrieving environment config. Default: `GET` +- `headers`: If extra headers are needed for the request, it can be set through this field. ## EnvironmentService -` EnvironmentService` is a singleton service, i.e. provided in root level of your application, and keeps the environment in the internal store. - +` EnvironmentService` is a singleton service, i.e. provided in root level of your application, and keeps the environment in the internal store. ### Before Use @@ -124,7 +122,6 @@ class DemoComponent { You do not have to provide the `EnvironmentService` at module or component/directive level, because it is already **provided in root**. - ### Get Methods `EnvironmentService` has numerous get methods which allow you to get a specific value or all environment object. @@ -141,9 +138,9 @@ You can use the `getEnvironment` or `getEnvironment$` method of `EnvironmentServ const environment = this.environment.getEnvironment(); // or -this.environment.getEnvironment$().subscribe(environment => { - // use environment here -}) +this.environment.getEnvironment$().subscribe((environment) => { + // use environment here +}); ``` #### How to Get API URL @@ -156,14 +153,13 @@ The `getApiUrl` or `getApiUrl$` method is used to get a specific API URL from th const apiUrl = this.environment.getApiUrl(); // environment.apis.default.url -this.environment.getApiUrl$("search").subscribe(searchUrl => { -// environment.apis.search.url -}) +this.environment.getApiUrl$("search").subscribe((searchUrl) => { + // environment.apis.search.url +}); ``` This method returns the `url` of a specific API based on the key given as its only parameter. If there is no key, `'default'` is used. - #### How to Set the Environment `EnvironmentService` has a method named `setState` which allows you to set the state value. @@ -178,4 +174,4 @@ Note that **you do not have to call this method at application initiation**, bec #### Environment Properties -Please refer to `Environment` type for all the properties. It can be found in the [config.ts file](https://github.com/abpframework/abp/blob/dev/npm/ng-packs/packages/core/src/lib/models/config.ts#L13). \ No newline at end of file +Please refer to `Environment` type for all the properties. It can be found in the [environment.ts file](https://github.com/abpframework/abp/blob/dev/npm/ng-packs/packages/core/src/lib/models/environment.ts#L4). diff --git a/docs/en/UI/Angular/Quick-Start.md b/docs/en/UI/Angular/Quick-Start.md index c17f069c5f..b487a1472b 100644 --- a/docs/en/UI/Angular/Quick-Start.md +++ b/docs/en/UI/Angular/Quick-Start.md @@ -198,7 +198,7 @@ In addition, you can [deploy your application to certain targets using the Angul - [Azure](https://github.com/Azure/ng-deploy-azure#readme) - [Firebase](https://github.com/angular/angularfire#readme) - [Netlify](https://github.com/ngx-builders/netlify-builder#readme) -- [Vercel](https://github.com/vercel/ng-deploy-vercel#readme) +- [Vercel `vercel init angular`](https://github.com/vercel/vercel/tree/main/examples/angular) - [GitHub Pages](https://github.com/angular-schule/angular-cli-ghpages/#readme) --- diff --git a/docs/en/UI/Angular/Testing.md b/docs/en/UI/Angular/Testing.md index bf6d3e1b26..bd40c7b55f 100644 --- a/docs/en/UI/Angular/Testing.md +++ b/docs/en/UI/Angular/Testing.md @@ -123,7 +123,7 @@ The **queries in Angular Testing Library follow practices for maintainable tests - [Queries](https://testing-library.com/docs/dom-testing-library/api-queries) - [User Event](https://testing-library.com/docs/ecosystem-user-event) -- [Examples](https://github.com/testing-library/angular-testing-library/tree/master/apps/example-app/app/examples) +- [Examples](https://github.com/testing-library/angular-testing-library/tree/main/apps/example-app/src/app/examples) ### Clearing DOM After Each Spec @@ -377,4 +377,4 @@ npm test -- --prod ## See Also -* [ABP Community Video - Unit Testing with the Angular UI](https://community.abp.io/articles/unit-testing-with-the-angular-ui-p4l550q3) +- [ABP Community Video - Unit Testing with the Angular UI](https://community.abp.io/articles/unit-testing-with-the-angular-ui-p4l550q3) diff --git a/docs/en/UI/Angular/Toaster-Service.md b/docs/en/UI/Angular/Toaster-Service.md index 059fd720a8..3152eba1af 100644 --- a/docs/en/UI/Angular/Toaster-Service.md +++ b/docs/en/UI/Angular/Toaster-Service.md @@ -2,12 +2,10 @@ You can use the `ToasterService` in @abp/ng.theme.shared package to display messages in an overlay by placing at the root level in your project. - ## Getting Started You do not have to provide the `ToasterService` at module or component level, because it is already **provided in root**. You can inject and start using it immediately in your components, directives, or services. - ```js import { ToasterService } from '@abp/ng.theme.shared'; @@ -26,7 +24,7 @@ You can use the `success`, `warn`, `error`, and `info` methods of `ToasterServic ### How to Display a Toast Overlay ```js -this.toaster.success('Message', 'Title'); +this.toaster.success("Message", "Title"); ``` - The `ToasterService` methods accept three parameters that are `message`, `title`, and `options`. @@ -72,12 +70,11 @@ With the options above, the toast overlay looks like this: The open toast overlay can be removed manually via the `remove` method by passing the `id` of toast: ```js -const toastId = this.toaster.success('Message', 'Title') +const toastId = this.toaster.success("Message", "Title"); this.toaster.remove(toastId); ``` - ### How to Remove All Toasts The all open toasts can be removed manually via the `clear` method: @@ -85,11 +82,13 @@ The all open toasts can be removed manually via the `clear` method: ```js this.toaster.clear(); ``` + ## Replacing ToasterService with 3rd party toaster libraries If you want the ABP Framework to utilize 3rd party libraries for the toasters instead of the built-in one, you can provide a service that implements `Toaster.Service` interface, and provide it as follows (ngx-toastr library used in example): -> You can use *LocalizationService* for toaster messages translations. +> You can use _LocalizationService_ for toaster messages translations. + ```js // your-custom-toaster.service.ts import { Injectable } from '@angular/core'; @@ -167,6 +166,7 @@ export class CustomToasterService implements Toaster.Service { } } ``` + ```js // app.module.ts @@ -178,10 +178,11 @@ import { ToasterService } from '@abp/ng.theme.shared'; { provide: ToasterService, useClass: CustomToasterService, - }, + }, ] }) ``` + ## API ### success @@ -197,8 +198,7 @@ success( - `Config` namespace can be imported from `@abp/ng.core`. - `Toaster` namespace can be imported from `@abp/ng.theme.shared`. -> See the [`Config.LocalizationParam` type](https://github.com/abpframework/abp/blob/master/npm/ng-packs/packages/core/src/lib/models/config.ts#L46) and [`Toaster` namespace](https://github.com/abpframework/abp/blob/master/npm/ng-packs/packages/theme-shared/src/lib/models/toaster.ts) - +> See the [`LocalizationParam` type](https://github.com/abpframework/abp/blob/master/npm/ng-packs/packages/core/src/lib/models/localization.ts#L6) and [`Toaster` namespace](https://github.com/abpframework/abp/blob/master/npm/ng-packs/packages/theme-shared/src/lib/models/toaster.ts) ### warn From 6f448fadb5e2cf985dec0e5cee32771aca1df380 Mon Sep 17 00:00:00 2001 From: albert <9526587+ebicoglu@users.noreply.github.com> Date: Mon, 28 Mar 2022 13:18:48 +0300 Subject: [PATCH 2/4] Update AspNet-Boilerplate-Migration-Guide.md --- docs/en/AspNet-Boilerplate-Migration-Guide.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/en/AspNet-Boilerplate-Migration-Guide.md b/docs/en/AspNet-Boilerplate-Migration-Guide.md index 52a2fced6a..e337b78a6d 100644 --- a/docs/en/AspNet-Boilerplate-Migration-Guide.md +++ b/docs/en/AspNet-Boilerplate-Migration-Guide.md @@ -1,4 +1,4 @@ -# ASP.NET Boilerplate v5+ to ABP Framework Migration +# Migrating from ASP.NET Boilerplate to the ABP Framework ABP Framework is **the successor** of the open source [ASP.NET Boilerplate](https://aspnetboilerplate.com/) framework. This guide aims to help you to **migrate your existing solutions** (you developed with the ASP.NET Boilerplate framework) to the ABP Framework. From ef627a7dd0650e985302e963d3380c2578226b49 Mon Sep 17 00:00:00 2001 From: albert <9526587+ebicoglu@users.noreply.github.com> Date: Mon, 28 Mar 2022 13:19:08 +0300 Subject: [PATCH 3/4] Update AspNet-Boilerplate-Migration-Guide.md --- docs/en/AspNet-Boilerplate-Migration-Guide.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/en/AspNet-Boilerplate-Migration-Guide.md b/docs/en/AspNet-Boilerplate-Migration-Guide.md index 52a2fced6a..e337b78a6d 100644 --- a/docs/en/AspNet-Boilerplate-Migration-Guide.md +++ b/docs/en/AspNet-Boilerplate-Migration-Guide.md @@ -1,4 +1,4 @@ -# ASP.NET Boilerplate v5+ to ABP Framework Migration +# Migrating from ASP.NET Boilerplate to the ABP Framework ABP Framework is **the successor** of the open source [ASP.NET Boilerplate](https://aspnetboilerplate.com/) framework. This guide aims to help you to **migrate your existing solutions** (you developed with the ASP.NET Boilerplate framework) to the ABP Framework. From 3f2f3bc64c6bc6adf87df7b667442c275cb36df7 Mon Sep 17 00:00:00 2001 From: Engincan VESKE Date: Mon, 4 Apr 2022 14:41:56 +0300 Subject: [PATCH 4/4] Update docs according to bs5 class renames --- docs/en/Tutorials/Part-2.md | 2 +- docs/en/Tutorials/Part-3.md | 8 ++++---- docs/en/Tutorials/Part-5.md | 2 +- docs/en/Tutorials/Part-9.md | 6 +++--- docs/en/UI/Angular/Component-Replacement.md | 4 ++-- .../How-Replaceable-Components-Work-with-Extensions.md | 2 +- docs/en/UI/AspNetCore/Tag-Helpers/Figure.md | 2 +- docs/en/UI/AspNetCore/Theming.md | 2 +- docs/pt-BR/Tutorials/Angular/Part-II.md | 2 +- docs/pt-BR/Tutorials/AspNetCore-Mvc/Part-II.md | 2 +- docs/zh-Hans/Tutorials/Part-2.md | 2 +- docs/zh-Hans/Tutorials/Part-3.md | 8 ++++---- docs/zh-Hans/UI/Angular/Component-Replacement.md | 2 +- 13 files changed, 22 insertions(+), 22 deletions(-) diff --git a/docs/en/Tutorials/Part-2.md b/docs/en/Tutorials/Part-2.md index 7c8efde9d0..e28e27a9e4 100644 --- a/docs/en/Tutorials/Part-2.md +++ b/docs/en/Tutorials/Part-2.md @@ -512,7 +512,7 @@ Open the `/src/app/book/book.component.html` and replace the content as below: {%{{{ '::Menu:Books' | abpLocalization }}}%} -
+
diff --git a/docs/en/Tutorials/Part-3.md b/docs/en/Tutorials/Part-3.md index 92e04d0b41..683032d63f 100644 --- a/docs/en/Tutorials/Part-3.md +++ b/docs/en/Tutorials/Part-3.md @@ -145,7 +145,7 @@ Open the `Pages/Books/Index.cshtml` and set the content of `abp-card-header` tag @L["Books"] - + @L["Books"] - +
{%{{{ '::Menu:Books' | abpLocalization }}}%}
-
+
-
+
-
-
+
+
diff --git a/docs/pt-BR/Tutorials/AspNetCore-Mvc/Part-II.md b/docs/pt-BR/Tutorials/AspNetCore-Mvc/Part-II.md index 763157e049..5ee4531131 100644 --- a/docs/pt-BR/Tutorials/AspNetCore-Mvc/Part-II.md +++ b/docs/pt-BR/Tutorials/AspNetCore-Mvc/Part-II.md @@ -113,7 +113,7 @@ Abra `Pages/Books/Index.cshtml`e altere a `abp-card-header`tag, como mostrado ab

@L["Books"]

 - +
-
+
diff --git a/docs/zh-Hans/Tutorials/Part-3.md b/docs/zh-Hans/Tutorials/Part-3.md index 90dd1326c3..3185dfec60 100644 --- a/docs/zh-Hans/Tutorials/Part-3.md +++ b/docs/zh-Hans/Tutorials/Part-3.md @@ -149,7 +149,7 @@ namespace Acme.BookStore.Web.Pages.Books @L["Books"] - + @L["Books"] - +
{%{{{ '::Menu:Books' | abpLocalization }}}%}
-
+
-
+