Skip to content

Commit 140666d

Browse files
sumeyyeKurtulussumeyyeKurtulus
authored
Merge pull request #24105 from abpframework/updating-the-todo-applications-docs
Updating the todo applications docs
2 parents 7286a96 + ea01f19 commit 140666d

File tree

2 files changed

+107
-99
lines changed

2 files changed

+107
-99
lines changed

‎docs/en/tutorials/todo/layered/index.md‎

Lines changed: 54 additions & 49 deletions
Original file line numberDiff line numberDiff line change
@@ -756,45 +756,46 @@ We can then use `todoService` to use the server-side HTTP APIs, as we'll do in t
756756
757757
Open the `/angular/src/app/home/home.component.ts` file and replace its content with the following code block:
758758
759-
```js
759+
```ts
760+
import {Component, inject, OnInit} from '@angular/core';
761+
import {FormsModule} from '@angular/forms';
760762
import { ToasterService } from '@abp/ng.theme.shared';
761-
import { Component, OnInit, inject } from '@angular/core';
762763
import { TodoItemDto, TodoService } from '@proxy';
763764
764765
@Component({
765-
selector: 'app-home',
766-
standalone: false,
767-
templateUrl: './home.component.html',
768-
styleUrls: ['./home.component.scss']
766+
selector: 'app-home',
767+
templateUrl: './home.component.html',
768+
styleUrls: ['./home.component.scss'],
769+
imports: [FormsModule]
769770
})
770771
export class HomeComponent implements OnInit {
771772
772-
todoItems: TodoItemDto[];
773-
newTodoText: string;
773+
todoItems: TodoItemDto[];
774+
newTodoText: string;
775+
readonly todoService = inject(TodoService);
776+
readonly toasterService = inject(ToasterService);
774777
775-
private readonly todoService = inject(TodoService);
776-
private readonly toasterService = inject(ToasterService);
778+
ngOnInit(): void {
779+
this.todoService.getList().subscribe(response => {
780+
this.todoItems = response;
781+
});
782+
}
777783
778-
ngOnInit(): void {
779-
this.todoService.getList().subscribe(response => {
780-
this.todoItems = response;
781-
});
782-
}
783-
784-
create(): void {
785-
this.todoService.create(this.newTodoText).subscribe((result) => {
786-
this.todoItems = this.todoItems.concat(result);
787-
this.newTodoText = null;
788-
});
789-
}
784+
create(): void{
785+
this.todoService.create(this.newTodoText).subscribe((result) => {
786+
this.todoItems = this.todoItems.concat(result);
787+
this.newTodoText = null;
788+
});
789+
}
790790
791-
delete(id: string): void {
792-
this.todoService.delete(id).subscribe(() => {
793-
this.todoItems = this.todoItems.filter(item => item.id !== id);
794-
this.toasterService.info('Deleted the todo item.');
795-
});
796-
}
791+
delete(id: string): void {
792+
this.todoService.delete(id).subscribe(() => {
793+
this.todoItems = this.todoItems.filter(item => item.id !== id);
794+
this.toasterService.info('Deleted the todo item.');
795+
});
796+
}
797797
}
798+
798799
```
799800
800801
We've used `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 on the view side.
@@ -805,31 +806,35 @@ Open the `/angular/src/app/home/home.component.html` file and replace its conten
805806
806807
```html
807808
<div class="container">
808-
<div class="card">
809-
<div class="card-header">
810-
<div class="card-title">TODO LIST</div>
811-
</div>
812-
<div class="card-body">
813-
<!-- FORM FOR NEW TODO ITEMS -->
814-
<form class="row row-cols-lg-auto g-3 align-items-center" (ngSubmit)="create()">
815-
<div class="col-12">
816-
<div class="input-group">
817-
<input name="NewTodoText" type="text" [(ngModel)]="newTodoText" class="form-control" placeholder="enter text..." />
818-
</div>
809+
<div class="card">
810+
<div class="card-header">
811+
<div class="card-title">TODO LIST</div>
819812
</div>
820-
<div class="col-12">
821-
<button type="submit" class="btn btn-primary">Submit</button>
813+
<div class="card-body">
814+
<!-- FORM FOR NEW TODO ITEMS -->
815+
<form class="row row-cols-lg-auto g-3 align-items-center" (ngSubmit)="create()">
816+
<div class="col-12">
817+
<div class="input-group">
818+
<input name="NewTodoText" type="text" [(ngModel)]="newTodoText" class="form-control" placeholder="enter text..." />
819+
</div>
820+
</div>
821+
<div class="col-12">
822+
<button type="submit" class="btn btn-primary">Submit</button>
823+
</div>
824+
</form>
825+
826+
<!-- TODO ITEMS LIST -->
827+
<ul id="TodoList">
828+
@for (todoItem of todoItems; track todoItem.id) {
829+
<li>
830+
<i class="fa fa-trash-o" (click)="delete(todoItem.id)"></i> {%{{{ todoItem.text }}}%}
831+
</li>
832+
}
833+
</ul>
822834
</div>
823-
</form>
824-
<!-- TODO ITEMS LIST -->
825-
<ul id="TodoList">
826-
<li *ngFor="let todoItem of todoItems">
827-
<i class="fa fa-trash-o" (click)="delete(todoItem.id)"></i> {%{{{ todoItem.text }}}%}
828-
</li>
829-
</ul>
830835
</div>
831-
</div>
832836
</div>
837+
833838
```
834839
835840
### home.component.scss

‎docs/en/tutorials/todo/single-layer/index.md‎

Lines changed: 53 additions & 50 deletions
Original file line numberDiff line numberDiff line change
@@ -724,43 +724,43 @@ Then, we can use the `TodoService` to use the server-side HTTP APIs, as we'll do
724724
Open the `/angular/src/app/home/home.component.ts` file and replace its content with the following code block:
725725
726726
```ts
727-
import { ToasterService } from "@abp/ng.theme.shared";
728-
import { Component, OnInit, inject } from '@angular/core';
729-
import { TodoItemDto } from "@proxy/services/dtos";
730-
import { TodoService } from "@proxy/services";
727+
import {Component, inject, OnInit} from '@angular/core';
728+
import {FormsModule} from '@angular/forms';
729+
import { ToasterService } from '@abp/ng.theme.shared';
730+
import { TodoItemDto, TodoService } from '@proxy';
731731
732732
@Component({
733-
selector: 'app-home',
734-
templateUrl: './home.component.html',
735-
styleUrls: ['./home.component.scss'],
733+
selector: 'app-home',
734+
templateUrl: './home.component.html',
735+
styleUrls: ['./home.component.scss'],
736+
imports: [FormsModule]
736737
})
737738
export class HomeComponent implements OnInit {
738739
739-
todoItems: TodoItemDto[];
740-
newTodoText: string;
740+
todoItems: TodoItemDto[];
741+
newTodoText: string;
742+
readonly todoService = inject(TodoService);
743+
readonly toasterService = inject(ToasterService);
741744
742-
private readonly todoService = inject(TodoService);
743-
private readonly toasterService = inject(ToasterService);
745+
ngOnInit(): void {
746+
this.todoService.getList().subscribe(response => {
747+
this.todoItems = response;
748+
});
749+
}
744750
745-
ngOnInit(): void {
746-
this.todoService.getList().subscribe(response => {
747-
this.todoItems = response;
748-
});
749-
}
750-
751-
create(): void {
752-
this.todoService.create(this.newTodoText).subscribe((result) => {
753-
this.todoItems = this.todoItems.concat(result);
754-
this.newTodoText = null;
755-
});
756-
}
751+
create(): void{
752+
this.todoService.create(this.newTodoText).subscribe((result) => {
753+
this.todoItems = this.todoItems.concat(result);
754+
this.newTodoText = null;
755+
});
756+
}
757757
758-
delete(id: string): void {
759-
this.todoService.delete(id).subscribe(() => {
760-
this.todoItems = this.todoItems.filter(item => item.id !== id);
761-
this.toasterService.info('Deleted the todo item.');
762-
});
763-
}
758+
delete(id: string): void {
759+
this.todoService.delete(id).subscribe(() => {
760+
this.todoItems = this.todoItems.filter(item => item.id !== id);
761+
this.toasterService.info('Deleted the todo item.');
762+
});
763+
}
764764
}
765765
```
766766
@@ -772,30 +772,33 @@ Open the `/angular/src/app/home/home.component.html` file and replace its conten
772772
773773
````html
774774
<div class="container">
775-
<div class="card">
776-
<div class="card-header">
777-
<div class="card-title">TODO LIST</div>
778-
</div>
779-
<div class="card-body">
780-
<!-- FORM FOR NEW TODO ITEMS -->
781-
<form class="row row-cols-lg-auto g-3 align-items-center" (ngSubmit)="create()">
782-
<div class="col-12">
783-
<div class="input-group">
784-
<input name="NewTodoText" type="text" [(ngModel)]="newTodoText" class="form-control" placeholder="enter text..." />
785-
</div>
775+
<div class="card">
776+
<div class="card-header">
777+
<div class="card-title">TODO LIST</div>
786778
</div>
787-
<div class="col-12">
788-
<button type="submit" class="btn btn-primary">Submit</button>
779+
<div class="card-body">
780+
<!-- FORM FOR NEW TODO ITEMS -->
781+
<form class="row row-cols-lg-auto g-3 align-items-center" (ngSubmit)="create()">
782+
<div class="col-12">
783+
<div class="input-group">
784+
<input name="NewTodoText" type="text" [(ngModel)]="newTodoText" class="form-control" placeholder="enter text..." />
785+
</div>
786+
</div>
787+
<div class="col-12">
788+
<button type="submit" class="btn btn-primary">Submit</button>
789+
</div>
790+
</form>
791+
792+
<!-- TODO ITEMS LIST -->
793+
<ul id="TodoList">
794+
@for (todoItem of todoItems; track todoItem.id) {
795+
<li>
796+
<i class="fa fa-trash-o" (click)="delete(todoItem.id)"></i> {%{{{ todoItem.text }}}%}
797+
</li>
798+
}
799+
</ul>
789800
</div>
790-
</form>
791-
<!-- TODO ITEMS LIST -->
792-
<ul id="TodoList">
793-
<li *ngFor="let todoItem of todoItems">
794-
<i class="fa fa-trash-o" (click)="delete(todoItem.id)"></i> {%{{{ todoItem.text }}}%}
795-
</li>
796-
</ul>
797801
</div>
798-
</div>
799802
</div>
800803
````
801804

0 commit comments

Comments
 (0)