From d948057cda0e08db3f008ab3edf5d6fa151243bd Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Halil=20=C4=B0brahim=20Kalkan?= Date: Wed, 7 Apr 2021 14:49:39 +0300 Subject: [PATCH] Add Angular option to the todoapp tutorial. --- docs/en/Tutorials/Todo/Index.md | 193 +++++++++++++++++++++++++++++++- 1 file changed, 188 insertions(+), 5 deletions(-) diff --git a/docs/en/Tutorials/Todo/Index.md b/docs/en/Tutorials/Todo/Index.md index 1363933e14..39ceb36351 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,149 @@ 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. + +Ensure that the `TodoApp.HttpApi.Host` project is running, open a command-line terminal in the `angular` folder and type the following command: + +```` +abp generate-proxy +```` + +If everything goes well, it should generate an output like shown below: + +```` +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 }} +
    • +
+
+
+
+```` + +### Index.razor.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