diff --git a/docs/en/Index.md b/docs/en/Index.md index 95052add38..cdd0908821 100644 --- a/docs/en/Index.md +++ b/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. -* [Web Application Development Tutorial](Tutorials/Part-1.md) is a complete tutorial to develop a full stack web application. +* [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. +* [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 diff --git a/docs/en/Tutorials/Todo/Index.md b/docs/en/Tutorials/Todo/Index.md index 1363933e14..c927d5c925 100644 --- a/docs/en/Tutorials/Todo/Index.md +++ b/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 +
+
+
+
TODO LIST
+
+
+ +
+ + +
+ + +
    +
  • + {%{{{ todoItem.text }}}%} +
    • +
+
+
+
+```` + +### 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 diff --git a/docs/en/Tutorials/Todo/run-without-iisexpress.png b/docs/en/Tutorials/Todo/run-without-iisexpress.png new file mode 100644 index 0000000000..41898e6c00 Binary files /dev/null and b/docs/en/Tutorials/Todo/run-without-iisexpress.png differ diff --git a/modules/setting-management/src/Volo.Abp.SettingManagement.Application/Volo/Abp/SettingManagement/SettingManagementApplicationModule.cs b/modules/setting-management/src/Volo.Abp.SettingManagement.Application/Volo/Abp/SettingManagement/SettingManagementApplicationModule.cs index 9ed44d59c0..9b7b809b47 100644 --- a/modules/setting-management/src/Volo.Abp.SettingManagement.Application/Volo/Abp/SettingManagement/SettingManagementApplicationModule.cs +++ b/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 diff --git a/templates/app/angular/src/app/home/home.component.css b/templates/app/angular/src/app/home/home.component.css new file mode 100644 index 0000000000..4e3bf68aa0 --- /dev/null +++ b/templates/app/angular/src/app/home/home.component.css @@ -0,0 +1 @@ +/* Styles for the home component */ \ No newline at end of file diff --git a/templates/app/angular/src/app/home/home.component.ts b/templates/app/angular/src/app/home/home.component.ts index c0b4602ee2..cd0aca4034 100644 --- a/templates/app/angular/src/app/home/home.component.ts +++ b/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 {