Merge pull request #8489 from abpframework/auto-merge/rel-4-3/256

Merge branch dev with rel-4.3

docs/en/Index.md

@@ -4,8 +4,9 @@ ABP Framework is a complete **infrastructure** based on the **ASP.NET Core** to
 
 ## Getting Started
 
-* [Getting Started Guide](Getting-Started.md) is the easiest way to start a new web application with the ABP Framework.
+* [Quick Start](Tutorials/Todo/Index.md) is a single-part, quick-start tutorial to build a simple application with the ABP Framework. Start with this tutorial if you want to quickly understand how ABP works.
-* [Web Application Development Tutorial](Tutorials/Part-1.md) is a complete tutorial to develop a full stack web application.
+* [Getting Started](Getting-Started.md) guide can be used to create and run ABP based solutions with different options and details.
+* [Web Application Development Tutorial](Tutorials/Part-1.md) is a complete tutorial to develop a full stack web application with all aspects of a real-life solution.
 
 ### UI Framework Options
 

docs/en/Tutorials/Todo/Index.md

@@ -3,7 +3,7 @@
 ````json
 //[doc-params]
 {
-    "UI": ["MVC", "Blazor", "BlazorServer"],
+    "UI": ["MVC", "Blazor", "BlazorServer", "NG"],
     "DB": ["EF", "Mongo"]
 }
 ````
@@ -24,6 +24,12 @@ You can find source code of the completed application [here](https://github.com/
 
 {{end}}
 
+{{if UI=="NG"}}
+
+* [Node v14.x](https://nodejs.org/)
+
+{{end}}
+
 ## Creating a New Solution
 
 We will use the [ABP CLI](../../CLI.md) to create new solutions with the ABP Framework. You can run the following command in a command-line terminal to install it:
@@ -35,11 +41,19 @@ dotnet tool install -g Volo.Abp.Cli
 Then create an empty folder, open a command-line terminal and execute the following command in the terminal:
 
 ````bash
-abp new TodoApp{{if UI=="Blazor"}} -u blazor{{else if UI=="BlazorServer"}} -u blazor-server{{end}}{{if DB=="Mongo"}} -d mongodb{{end}}
+abp new TodoApp{{if UI=="Blazor"}} -u blazor{{else if UI=="BlazorServer"}} -u blazor-server{{else if UI=="NG"}} -u angular{{end}}{{if DB=="Mongo"}} -d mongodb{{end}}
 ````
 
+{{if UI=="NG"}}
+
+This will create a new solution, named *TodoApp* with `angular` and `aspnet-core` folders. Once the solution is ready, open the ASP.NET Core solution in your favorite IDE.
+
+{{else}}
+
 This will create a new solution, named *TodoApp*. Once the solution is ready, open it in your favorite IDE.
 
+{{end}}
+
 ### Create the Database
 
 If you are using Visual Studio, right click to the `TodoApp.DbMigrator` project, select *Set as StartUp Project*, then hit *Ctrl+F5* to run it without debugging. It will create the initial database and seed the initial data.
@@ -69,6 +83,33 @@ Ensure the `TodoApp.HttpApi.Host` project is the startup project, then run the a
 
 You can explore and test your HTTP API with this UI. Now, we can set the `TodoApp.Blazor` as the startup project and run it to open the actual Blazor application UI:
 
+{{else if UI=="NG"}}
+
+It is good to run the application before starting the development. The solution has two main applications;
+
+* `TodoApp.HttpApi.Host` (in the .NET solution) host the server-side HTTP API.
+* `angular` folder contains the Angular application.
+
+Ensure the `TodoApp.HttpApi.Host` project is the startup project, then run the application (Ctrl+F5 in Visual Studio) to see the server-side HTTP API on the [Swagger UI](https://swagger.io/tools/swagger-ui/):
+
+![todo-swagger-ui-initial](todo-swagger-ui-initial.png)
+
+You can explore and test your HTTP API with this UI. If that works, we can run the Angular client application.
+
+First, run the following command to restore the NPM packages;
+
+````bash
+npm install
+````
+
+It will take some time to install all the packages. Then you can run the application using the following command:
+
+````bash
+npm start
+````
+
+This command takes time, but eventually runs and opens the application in your default browser:
+
 {{end}}
 
 ![todo-ui-initial](todo-ui-initial.png)
@@ -146,7 +187,7 @@ You can apply changes to the database using the following command, in the same c
 dotnet ef database update
 ````
 
-> If you are using Visual Studio, you may want to use `Add-Migration Added_TodoItem` and `Update-Database` commands in the *Package Manager Console (PMC)*. In this case, ensure that {{if UI=="MVC"}}`TodoApp.Web`{{else if UI=="Blazor"}}`TodoApp.HttpApi.Host`{{end}} is the startup project and `TodoApp.EntityFrameworkCore.DbMigrations` is the *Default Project* in PMC.
+> If you are using Visual Studio, you may want to use `Add-Migration Added_TodoItem` and `Update-Database` commands in the *Package Manager Console (PMC)*. In this case, ensure that {{if UI=="MVC"}}`TodoApp.Web`{{else if UI=="BlazorServer"}}`TodoApp.Blazor`{{else if UI=="Blazor" || UI=="NG"}}`TodoApp.HttpApi.Host`{{end}} is the startup project and `TodoApp.EntityFrameworkCore.DbMigrations` is the *Default Project* in PMC.
 
 {{else if DB=="Mongo"}}
 
@@ -242,7 +283,7 @@ namespace TodoApp
             _todoItemRepository = todoItemRepository;
         }
         
-        // TODO: Implement the methods
+        // TODO: Implement the methods here...
     }
 }
 ````
@@ -620,7 +661,153 @@ If you run the `TodoApp.HttpApi.Host` application, you can see the Todo API:
 
 {{end # Blazor}}
 
-{{end # Blazor || BlazorServer}}
+{{else if UI=="NG"}}
+
+### Service Proxy Generation
+
+ABP provides a handy feature to automatically create client-side services to easily consume HTTP APIs provided by the server.
+
+You first need to run the `TodoApp.HttpApi.Host` project since the proxy generator reads API definitions from the server application. However, there is a problem with IIS Express; it doesn't allow to connect to the application from another process. If you are using Visual Studio, select the `TodoApp.HttpApi.Host` instead of IIS Express in the run button drop down menu, as shown in the figure below:
+
+![run-without-iisexpress](run-without-iisexpress.png)
+
+Once you run the `TodoApp.HttpApi.Host` project, open a command-line terminal in the `angular` folder and type the following command:
+
+````bash
+abp generate-proxy
+````
+
+If everything goes well, it should generate an output like shown below:
+
+````bash
+CREATE src/app/proxy/generate-proxy.json (170978 bytes)
+CREATE src/app/proxy/README.md (1000 bytes)
+CREATE src/app/proxy/todo.service.ts (794 bytes)
+CREATE src/app/proxy/models.ts (66 bytes)
+CREATE src/app/proxy/index.ts (58 bytes)
+````
+
+We can then use the `todoService` to use the server-side HTTP APIs, as we'll do in the next section.
+
+### home.component.ts
+
+Open the `/angular/src/app/home/home.component.ts` file and replace its content with the following code block:
+
+````js
+import { ToasterService } from '@abp/ng.theme.shared';
+import { Component, OnInit } from '@angular/core';
+import { TodoItemDto, TodoService } from '@proxy';
+
+@Component({
+  selector: 'app-home',
+  templateUrl: './home.component.html',
+  styleUrls: ['./home.component.css']
+})
+export class HomeComponent implements OnInit {
+
+  todoItems: TodoItemDto[];
+  newTodoText: string;
+
+  constructor(
+      private todoService: TodoService,
+      private toasterService: ToasterService)
+  { }
+
+  ngOnInit(): void {
+    this.todoService.getList().subscribe(response => {
+      this.todoItems = response;
+    });
+  }
+  
+  create(): void{
+    this.todoService.create(this.newTodoText).subscribe((result) => {
+      this.todoItems = this.todoItems.concat(result);
+      this.newTodoText = null;
+    });
+  }
+
+  delete(id: string): void {
+    this.todoService.delete(id).subscribe(() => {
+      this.todoItems = this.todoItems.filter(item => item.id !== id);
+      this.toasterService.info('Deleted the todo item.');
+    });
+  }  
+}
+
+````
+
+We've used the `todoService` to get the list of todo items and assigned the returning value to the `todoItems` array. We've also added `create` and `delete` methods. These methods will be used in the view side.
+
+### home.component.html
+
+Open the `/angular/src/app/home/home.component.html` file and replace its content with the following code block:
+
+````html
+<div class="container">
+  <div class="card">
+    <div class="card-header">
+      <div class="card-title">TODO LIST</div>
+    </div>
+    <div class="card-body">
+      <!-- FORM FOR NEW TODO ITEMS -->
+      <form class="form-inline" (ngSubmit)="create()">
+        <input
+          name="NewTodoText"
+          type="text"
+          [(ngModel)]="newTodoText"
+          class="form-control mr-2"
+          placeholder="enter text..."
+        />
+        <button type="submit" class="btn btn-primary">Submit</button>
+      </form>
+
+      <!-- TODO ITEMS LIST -->
+      <ul id="TodoList">
+        <li *ngFor="let todoItem of todoItems">
+          <i class="fa fa-trash-o" (click)="delete(todoItem.id)"></i> {%{{{ todoItem.text }}}%}
+        </li>
+      </ul>
+    </div>
+  </div>
+</div>
+````
+
+### home.component.css
+
+As the final touch, open the `/angular/src/app/home/home.component.css` file in the `Pages` and replace with the following content:
+
+````css
+#TodoList{
+    list-style: none;
+    margin: 0;
+    padding: 0;
+}
+
+#TodoList li {
+    padding: 5px;
+    margin: 5px 0px;
+    border: 1px solid #cccccc;
+    background-color: #f5f5f5;
+}
+
+#TodoList li i
+{
+    opacity: 0.5;
+}
+
+#TodoList li i:hover
+{
+    opacity: 1;
+    color: #ff0000;
+    cursor: pointer;
+}
+````
+
+This is a simple styling for the todo page. We believe that you can do much better :)
+
+Now, you can run the application again to see the result.
+
+{{end}}
 
 ## Conclusion
 

modules/setting-management/src/Volo.Abp.SettingManagement.Application/Volo/Abp/SettingManagement/SettingManagementApplicationModule.cs

@@ -6,7 +6,6 @@ namespace Volo.Abp.SettingManagement
     [DependsOn(
         typeof(AbpSettingManagementDomainModule),
         typeof(AbpSettingManagementApplicationContractsModule),
-        typeof(AbpSettingManagementDomainModule),
         typeof(AbpEmailingModule)
     )]
     public class AbpSettingManagementApplicationModule : AbpModule

templates/app/angular/src/app/home/home.component.css

@@ -0,0 +1 @@
+/* Styles for the home component */

templates/app/angular/src/app/home/home.component.ts

@@ -5,6 +5,7 @@ import { OAuthService } from 'angular-oauth2-oidc';
 @Component({
   selector: 'app-home',
   templateUrl: './home.component.html',
+  styleUrls: ['./home.component.css'],
 })
 export class HomeComponent {
   get hasLoggedIn(): boolean {