diff --git a/docs/en/tutorials/modular-crm/index.md b/docs/en/tutorials/modular-crm/index.md
index 856fe7957f..5cd7baaecf 100644
--- a/docs/en/tutorials/modular-crm/index.md
+++ b/docs/en/tutorials/modular-crm/index.md
@@ -7,6 +7,13 @@
# Modular Monolith Application Development Tutorial
+```json
+//[doc-params]
+{
+ "UI": ["MVC", "NG"]
+}
+```
+
````json
//[doc-nav]
{
@@ -17,9 +24,9 @@
}
````
-ABP provides a great infrastructure and tooling to build modular software solutions. In this tutorial, you will learn how to create application modules, compose and communicate them to build a monolith modular web application.
+ABP provides great infrastructure and tooling to build modular software solutions. In this tutorial, you will learn how to create application modules, compose and communicate them to build a modular monolith web application with the {{UI_Value}} UI.
-> **This tutorial focuses on modularity.** The example application's functionality and user interface are intentionally kept simple. If you want to learn real world, full featured application logic development with ABP, please follow the [Book Store tutorial](../book-store/index.md).
+> **This tutorial focuses on modularity.** The sample application's UI is intentionally kept simple so you can focus on module design and integration. For a real-world, full-featured application walkthrough with ABP, follow the [Book Store tutorial](../book-store/index.md).
## Tutorial Outline
diff --git a/docs/en/tutorials/modular-crm/part-01.md b/docs/en/tutorials/modular-crm/part-01.md
index 862f5ecc6b..d3b5d64380 100644
--- a/docs/en/tutorials/modular-crm/part-01.md
+++ b/docs/en/tutorials/modular-crm/part-01.md
@@ -7,6 +7,13 @@
# Creating the Initial Solution
+```json
+//[doc-params]
+{
+ "UI": ["MVC", "NG"]
+}
+```
+
````json
//[doc-nav]
{
@@ -28,9 +35,12 @@ In this first part of this tutorial, we will create a new ABP solution with modu
Follow the *[Get Started](../../get-started/single-layer-web-application.md)* guide to create a single layer web application with the following configuration:
* **Solution name**: `ModularCrm`
-* **UI Framework**: ASP.NET Core MVC / Razor Pages
+* **UI Framework**: {{if UI == "MVC"}}ASP.NET Core MVC / Razor Pages{{else if UI == "NG"}}Angular{{end}}
* **Database Provider**: Entity Framework Core
+{{if UI == "NG"}}> **Note:** Angular users can continue with the Angular UI steps in the upcoming parts while following the same modularity flow.
+{{end}}
+
You can select the other options based on your preference but at the **Modularity** step, check the _Setup as a modular solution_ option and add a new **Standard Module** named `ModularCrm.Catalog`:
diff --git a/docs/en/tutorials/modular-crm/part-02.md b/docs/en/tutorials/modular-crm/part-02.md
index 9e715b6c30..28cadbec11 100644
--- a/docs/en/tutorials/modular-crm/part-02.md
+++ b/docs/en/tutorials/modular-crm/part-02.md
@@ -7,6 +7,13 @@
# Setting Up the Catalog Module
+```json
+//[doc-params]
+{
+ "UI": ["MVC", "NG"]
+}
+```
+
````json
//[doc-nav]
{
@@ -57,10 +64,28 @@ Graph Build is a dotnet CLI command that recursively builds all the referenced d
## Running the Main Application
+{{if UI == "MVC"}}
+
Open the *Solution Runner* panel, click the *Play* button (near to the solution root), right-click the `ModularCrm` application and select the *Browse* command. It will open the web application in the built-in browser. Then you can navigate to the *Catalog* page on the main menu of the application to see the Catalog page that is coming from the `ModularCrm.Catalog` module:
+{{else if UI == "NG"}}
+
+Open the *Solution Runner* panel and start the `ModularCrm` application to run the backend host.
+
+Then open a terminal in the `angular` folder and start the Angular application:
+
+```bash
+yarn start
+```
+
+After the Angular app starts, open the URL shown in the terminal (typically `http://localhost:4200`), sign in, and navigate to the *Catalog* page from the main menu to verify the `ModularCrm.Catalog` module UI is integrated.
+
+> TODO: Add Angular Catalog page screenshot.
+
+{{end}}
+
## Summary
-In this part, you installed the `ModularCrm.Catalog` module to the main application and run the solution to test if it has successfully installed. In the [next part](part-03.md), you will learn how to create entities, services and a basic user interface for the catalog module.
+In this part, you installed the `ModularCrm.Catalog` module to the main application and ran the solution to verify that it was installed successfully. In the [next part](part-03.md), you will learn how to create entities, services and a basic user interface for the catalog module.
diff --git a/docs/en/tutorials/modular-crm/part-03.md b/docs/en/tutorials/modular-crm/part-03.md
index 36b418c7fb..3d14b28cdf 100644
--- a/docs/en/tutorials/modular-crm/part-03.md
+++ b/docs/en/tutorials/modular-crm/part-03.md
@@ -7,6 +7,13 @@
# Building the Catalog Module
+```json
+//[doc-params]
+{
+ "UI": ["MVC", "NG"]
+}
+```
+
````json
//[doc-nav]
{
@@ -404,6 +411,8 @@ In this section, you will create a very simple user interface to demonstrate how
As a first step, you can stop the application on ABP Studio's Solution Runner if it is currently running.
+{{if UI == "MVC"}}
+
### Creating the Products Page
Open the `ModularCrm.Catalog` .NET solution in your IDE, and find the `Pages/Catalog/Index.cshtml` file under the `ModularCrm.Catalog.UI` project:
@@ -471,6 +480,75 @@ Now, you can browse the *Catalog* page to see the list of the products:
As you can see, developing a UI page in a modular ABP application is pretty straightforward. We kept the UI very simple to focus on modularity. To learn how to build complex application UIs, please check the [Book Store Tutorial](../book-store/index.md).
+{{else if UI == "NG"}}
+
+### Updating the Catalog Angular Page
+
+First, run the `ModularCrm` application so the backend APIs are available.
+
+Then open a terminal in the `modules/modularcrm.catalog/angular` folder and run the proxy generation command:
+
+```bash
+abp generate-proxy -t ng
+```
+
+This command generates or updates TypeScript client proxies for the `catalog` APIs under `projects/catalog/src/lib/proxy`. You will use the generated `ProductService` and related DTOs in the Catalog UI project.
+
+Now, open the `projects/catalog/src/lib/components/catalog.component.ts` file and replace its content with the following code:
+
+```ts
+import { Component, OnInit, inject } from '@angular/core';
+import { ProductDto, ProductService } from '../proxy/products';
+
+@Component({
+ selector: 'lib-catalog',
+ templateUrl: './catalog.component.html',
+})
+export class CatalogComponent implements OnInit {
+ products: ProductDto[] = [];
+
+ protected readonly productService = inject(ProductService);
+
+ ngOnInit(): void {
+ this.productService.getList().subscribe(response => {
+ this.products = response;
+ });
+ }
+}
+```
+
+Now, open the `projects/catalog/src/lib/components/catalog.component.html` file and replace its content with the following code:
+
+```html
+Products
+
+
+
+
+ @for (product of products; track product.id) {
+
+ {%{{{ product.name }}}%} (stock: {%{{{ product.stockCount }}}%})
+
+ }
+
+
+
+```
+
+In a module-based Angular UI, the route and menu are configured in the module's config project. Ensure `projects/catalog/config/src/providers/route.provider.ts` includes the `/catalog` route, and `projects/catalog/src/lib/catalog.routes.ts` lazy-loads `CatalogComponent`.
+
+> TODO: Add Angular Catalog component screenshot.
+
+Finally, start the Angular app from the root `angular` folder and navigate to the *Catalog* page to see the products list:
+
+```bash
+yarn start
+```
+
+> TODO: Add Angular Catalog page screenshot.
+
+{{end}}
+
## Summary
-In this part of the tutorial, you've built the functionality inside the _Catalog_ module, which was created in the [previous part](part-02.md). In the next part, you will create a new _Ordering_ module and install it into the main application.
\ No newline at end of file
+In this part of the tutorial, you've built the functionality inside the _Catalog_ module, which was created in the [previous part](part-02.md), and created a basic {{if UI == "MVC"}}MVC{{else if UI == "NG"}}Angular{{end}} UI to list products. In the next part, you will create a new _Ordering_ module and install it into the main application.