diff --git a/docs/en/UI/Angular/Config-State.md b/docs/en/UI/Angular/Config-State.md index 72c8e6c6fd..7fc202982c 100644 --- a/docs/en/UI/Angular/Config-State.md +++ b/docs/en/UI/Angular/Config-State.md @@ -288,3 +288,7 @@ Note that **you do not have to call this method at application initiation**, bec #### Environment Properties Please refer to `Config.Environment` type for all the properties you can pass to `dispatchSetEnvironment` as parameter. 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). + +## What's Next? + +* [Component Replacement](./Component-Replacement.md) \ No newline at end of file diff --git a/docs/en/UI/Angular/Permission-Management.md b/docs/en/UI/Angular/Permission-Management.md index 6e5c5d7155..ababd25e7f 100644 --- a/docs/en/UI/Angular/Permission-Management.md +++ b/docs/en/UI/Angular/Permission-Management.md @@ -76,4 +76,4 @@ Granted Policies are stored in the `auth` property of `ConfigState`. ## What's Next? -* [Component Replacement](./Component-Replacement.md) \ No newline at end of file +* [Config State](./Config-State.md) \ No newline at end of file diff --git a/docs/en/UI/Angular/Rest-Service.md b/docs/en/UI/Angular/Rest-Service.md new file mode 100644 index 0000000000..d817cab3c6 --- /dev/null +++ b/docs/en/UI/Angular/Rest-Service.md @@ -0,0 +1,3 @@ +## Rest Service + +TODO \ No newline at end of file diff --git a/docs/en/UI/Angular/Service-Proxies.md b/docs/en/UI/Angular/Service-Proxies.md new file mode 100644 index 0000000000..56d640ec54 --- /dev/null +++ b/docs/en/UI/Angular/Service-Proxies.md @@ -0,0 +1,67 @@ +## Service Proxies + +It is common to call a REST endpoint in the server from our Angular applications. In this case, we generally create **services** (those have methods for each service method on the server side) and **model objects** (matches to [DTOs](../../Data-Transfer-Objects) in the server side). + +In addition to manually creating such server-interacting services, we could use tools like [NSWAG](https://github.com/RicoSuter/NSwag) to generate service proxies for us. But NSWAG has the following problems we've experienced: + +* It generates a **big, single** .ts file which has some problems; + * It get **too large** when your application grows. + * It doesn't fit into the **[modular](../../Module-Development-Basics) approach** of the ABP framework. +* It creates a bit **ugly code**. We want to have a clean code (just like if we write manually). +* It can not generate the same **method signature** declared in the server side (because swagger.json doesn't exactly reflect the method signature of the backend service). We've created an endpoint that exposes server side method contacts to allow clients generate a better aligned client proxies. + +ABP CLI `generate-proxies` command automatically generates the typescript client proxies by creating folders which separated by module names in the `src/app` folder. +Run the following command in the **root folder** of the angular application: + +```bash +abp generate-proxy +``` + +It only creates proxies only for your own application's services. It doesn't create proxies for the services of the application modules you're using (by default). There are several options. See the [CLI documentation](../../CLI). + +The files generated with the `--module all` option like below: + +![generated-files-via-generate-proxy](./images/generated-files-via-generate-proxy.png) + +### Services + +Each generated service matches a back-end controller. The services methods call back-end APIs via [RestService](./Rest-Service.md). + + + +The `providedIn` property of the services is defined as `'root'`. Therefore no need to add a service as a provider to a module. You can use a service by injecting it into a constructor as shown below: + +```js +import { AbpApplicationConfigurationService } from '../app/shared/services'; + +//... +export class HomeComponent{ + constructor(private appConfigService: AbpApplicationConfigurationService) {} + + ngOnInit() { + this.appConfigService.get().subscribe() + } +} +``` + +The Angular compiler removes the services that have not been injected anywhere from the final output. See the [tree-shakable providers documentation](https://angular.io/guide/dependency-injection-providers#tree-shakable-providers). + +### Models + +The generated models match the DTOs in the back-end. Each model is generated as a class under the `src/app/*/shared/models` folder. + +There are a few [base classes](https://github.com/abpframework/abp/blob/dev/npm/ng-packs/packages/core/src/lib/models/dtos.ts) in the `@abp/ng.core` package. Some models extend these classes. + +A class instance can be created as shown below: + +```js +import { IdentityRoleCreateDto } from '../identity/shared/models'; +//... +const instance = new IdentityRoleCreateDto({name: 'Role 1', isDefault: false, isPublic: true}) +``` + +Initial values ​​can optionally be passed to each class constructor. + +## What's Next? + +* [Localization](./Localization.md) \ No newline at end of file diff --git a/docs/en/UI/Angular/images/generated-files-via-generate-proxy.png b/docs/en/UI/Angular/images/generated-files-via-generate-proxy.png new file mode 100644 index 0000000000..77a120a35d Binary files /dev/null and b/docs/en/UI/Angular/images/generated-files-via-generate-proxy.png differ diff --git a/docs/en/docs-nav.json b/docs/en/docs-nav.json index 5c2c3a8e64..77eadf7f35 100644 --- a/docs/en/docs-nav.json +++ b/docs/en/docs-nav.json @@ -312,6 +312,10 @@ { "text": "Angular", "items": [ + { + "text": "Service Proxies", + "path": "UI/Angular/Service-Proxies.md" + }, { "text": "Localization", "path": "UI/Angular/Localization.md"