Browse Source

Enhancements on the modularity documents

pull/23160/head
Halil İbrahim Kalkan 8 months ago
parent
commit
bab49fe02e
  1. BIN
      docs/en/solution-templates/application-module/images/new-solution-v2.png
  2. 34
      docs/en/solution-templates/application-module/index.md
  3. 6
      docs/en/tutorials/modular-crm/part-01.md

BIN
docs/en/solution-templates/application-module/images/new-solution-v2.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 131 KiB

34
docs/en/solution-templates/application-module/index.md

@ -1,18 +1,22 @@
# Module Solution Template # ABP Application Module Template
This template can be used to create a **reusable [application module](../../modules)** based on the [module development best practices & conventions](../../framework/architecture/best-practices). It is also suitable for creating **microservices** (with or without UI). This document explains how to create a **reusable [application module](../../modules)** based on the [module development best practices & conventions](../../framework/architecture/best-practices).
> Notice that the application module that is created in this tutorial is not an executable application. To see the module in action, you should install it into an executable application.
>
> It is advised to see the *[Modular Monolith Application Development Tutorial](../../tutorials/modular-crm/index.md)* to learn how to create application modules, install them into an executable web application, run and test the application. That tutorial uses the *Standard* module template, while this document explains the *DDD* module template.
## How to Start With? ## How to Start With?
You can use the [ABP CLI](../../cli) or [ABP Studio](../../studio/overview.md) to create a new project using this startup template. Alternatively, you can generate a CLI command from the [Get Started](https://abp.io/get-started) page. We will use the ABP Studio for this guide. You can use the [ABP CLI](../../cli) or [ABP Studio](../../studio/overview.md) to create a new project using this startup template. We will use the ABP Studio for this guide.
First, install the ABP Studio if you haven't installed before. You can follow the [installation guide](../../studio/installation.md) for this. First, install the ABP Studio if you haven't installed before. You can follow the [installation guide](../../studio/installation.md) for this purpose.
### Creating a New Empty Solution ### Creating a New Empty Solution
Open the ABP Studio and click the `New solution` button in the welcome page or the `File > New Solution` top menu item. Select the `Empty Solution` template and click the `Next` button. Open the ABP Studio and click the `New solution` button in the welcome page or the `File > New Solution` top menu item. Click the `empty solution` link to select the empty solution template.
![New Solution](images/new-solution.png) ![New Solution](images/new-solution-v2.png)
Enter the solution name, select the solution folder and click the `Create` button. Enter the solution name, select the solution folder and click the `Create` button.
@ -130,15 +134,15 @@ You can still create unit tests for your classes which will be harder to write (
> Domain & Application tests are using EF Core. If you remove EF Core integration or you want to use MongoDB for testing these layers, you should manually change project references & module dependencies. > Domain & Application tests are using EF Core. If you remove EF Core integration or you want to use MongoDB for testing these layers, you should manually change project references & module dependencies.
### Host Project ### Host Applications
The solution doesn't have a host application to run your module. However, you can create a [single-layer](../../get-started/single-layer-web-application.md) or [layered](../../get-started/layered-web-application.md) application and [import](../../studio/solution-explorer.md#imports) the created module into the host application. The solution doesn't have a host application to run your module. However, you can create a [single-layer](../../get-started/single-layer-web-application.md) or [layered](../../get-started/layered-web-application.md) application and [import](../../studio/solution-explorer.md#imports) the created module into the host application.
## UI You can also see the *[Modular Monolith Application Development Tutorial](../../tutorials/modular-crm/index.md)* to learn how to create application modules, install them into an executable web application, run and test the application
### Angular UI ## Angular UI
The solution will have a folder called `angular` in it. This is where the Angular client-side code is located. When you open that folder in an IDE, the folder structure will look like below: If you've selected the Angular UI, the solution will have a folder called `angular` inside it. This is where the Angular client-side code is located. When you open that folder in an IDE, the folder structure will look like below:
![Folder structure of ABP Angular module project](../../images/angular-module-folder-structure.png) ![Folder structure of ABP Angular module project](../../images/angular-module-folder-structure.png)
@ -147,7 +151,7 @@ The solution will have a folder called `angular` in it. This is where the Angula
The server-side is similar to the solution described above. After you create a *Host* application, the API and the `Angular` demo application consume it. The server-side is similar to the solution described above. After you create a *Host* application, the API and the `Angular` demo application consume it.
#### How to Run the Angular Development App ### How to Run the Angular Development App
For module development, you will need the `dev-app` project up and running. So, here is how we can start the development server. For module development, you will need the `dev-app` project up and running. So, here is how we can start the development server.
@ -179,7 +183,7 @@ The issue management page is empty in the beginning. You may change the content
Now, let's have a closer look at some key elements of your project. Now, let's have a closer look at some key elements of your project.
#### Main Module ### The Main Module
`IssueManagementModule` at the _angular/projects/issue-management/src/lib/issue-management.module.ts_ path is the main module of your module project. There are a few things worth mentioning in it: `IssueManagementModule` at the _angular/projects/issue-management/src/lib/issue-management.module.ts_ path is the main module of your module project. There are a few things worth mentioning in it:
@ -189,7 +193,7 @@ Now, let's have a closer look at some key elements of your project.
- It is prepared for configurability. The `forLazy` static method enables [a configuration to be passed to the module when it is loaded by the router](https://volosoft.com/blog/how-to-configure-angular-modules-loaded-by-the-router). - It is prepared for configurability. The `forLazy` static method enables [a configuration to be passed to the module when it is loaded by the router](https://volosoft.com/blog/how-to-configure-angular-modules-loaded-by-the-router).
#### Main Routing Module ### The Main Routing Module
`IssueManagementRoutingModule` at the _angular/projects/issue-management/src/lib/issue-management-routing.module.ts_ path is the main routing module of your module project. It currently does two things: `IssueManagementRoutingModule` at the _angular/projects/issue-management/src/lib/issue-management-routing.module.ts_ path is the main routing module of your module project. It currently does two things:
@ -198,7 +202,7 @@ Now, let's have a closer look at some key elements of your project.
You can rearrange this module to load more than one component at different routes, but you need to update the route provider at _angular/projects/issue-management/config/src/providers/route.provider.ts_ to match the new routing structure with the routes in the menu. Please check [Modifying the Menu](../../framework/ui/angular/modifying-the-menu.md) to see how route providers work. You can rearrange this module to load more than one component at different routes, but you need to update the route provider at _angular/projects/issue-management/config/src/providers/route.provider.ts_ to match the new routing structure with the routes in the menu. Please check [Modifying the Menu](../../framework/ui/angular/modifying-the-menu.md) to see how route providers work.
#### Config Module ### The Config Module
There is a config module at the _angular/projects/issue-management/config/src/issue-management-config.module.ts_ path. The static `forRoot` method of this module is supposed to be called at the route level. So, you may assume the following will take place: There is a config module at the _angular/projects/issue-management/config/src/issue-management-config.module.ts_ path. The static `forRoot` method of this module is supposed to be called at the route level. So, you may assume the following will take place:
@ -219,6 +223,6 @@ You can use this static method to configure an application that uses your module
The difference between the `forRoot` method of the config module and the `forLazy` method of the main module is that, for smallest bundle size, the former should only be used when you have to configure an app before your module is even loaded. The difference between the `forRoot` method of the config module and the `forLazy` method of the main module is that, for smallest bundle size, the former should only be used when you have to configure an app before your module is even loaded.
#### Testing Angular UI ### Testing Angular UI
Please see the [testing document](../../framework/ui/angular/testing.md). Please see the [testing document](../../framework/ui/angular/testing.md).

6
docs/en/tutorials/modular-crm/part-01.md

@ -32,10 +32,14 @@ Since modularity is a key aspect of the ABP Framework, it provides an option to
> **Note:** This tutorial will guide you through creating two modules: `Catalog` and `Ordering`. We've just created the `Catalog` module in the _Modularity_ step. You could also create the `Ordering` module at this stage. However, we'll create the `Ordering` module later in this tutorial to better demonstrate ABP Studio's module management capabilities and to simulate a more realistic development workflow where modules are typically added incrementally as the application evolves. > **Note:** This tutorial will guide you through creating two modules: `Catalog` and `Ordering`. We've just created the `Catalog` module in the _Modularity_ step. You could also create the `Ordering` module at this stage. However, we'll create the `Ordering` module later in this tutorial to better demonstrate ABP Studio's module management capabilities and to simulate a more realistic development workflow where modules are typically added incrementally as the application evolves.
> **Please complete the [Get Started](../../get-started/single-layer-web-application.md) guide and run the web application before going further.** ### About the Module Templates
The *Standard Module* template is suggested for building modular monolith applications (a single application consists of multiple modules interacting each other) and it will be used in this tutorial, while the *DDD Module* is suggested for creating reusable application modules (a generic module is used in different applications) that supports different kind of architectures. To learn more about the DD Module template, see *[Application Module Template](../../solution-templates/application-module/index.md)* document.
## The Solution Structure ## The Solution Structure
> **Please complete the [Get Started](../../get-started/single-layer-web-application.md) guide and run the web application before going further.**
The initial solution structure should be like the following in ABP Studio's *[Solution Explorer](../../studio/solution-explorer.md)*: The initial solution structure should be like the following in ABP Studio's *[Solution Explorer](../../studio/solution-explorer.md)*:
![solution-explorer-modular-crm-initial-with-modules](images/solution-explorer-modular-crm-initial-with-modules.png) ![solution-explorer-modular-crm-initial-with-modules](images/solution-explorer-modular-crm-initial-with-modules.png)

Loading…
Cancel
Save