vcgit-forge/angular-challenges
1
0
Fork 0
mirror of https://github.com/Raghu-Ch/angular-challenges.git synced 2026-02-10 12:53:03 -05:00
Code Issues Packages Projects Releases Wiki Activity

fix: more crud typos

Browse Source
This commit is contained in:
jdegand
2023-11-24 14:59:08 -05:00
parent f6d6d5633d
commit aa65fc05c7
1 changed files with 5 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
docs/src/content/docs/challenges/angular/5-crud.md
View File

@@ -14,13 +14,13 @@ WIP: The following documentation will be reviewed and improved. However, you can
## Information ## Information
Communicating and having a global/local state in sync with your backend is the heart of any application. You will need to master those following best practises to build strong and reliable Angular Application. Communicating and having a global/local state in sync with your backend is the heart of any application. You will need to master these following best practises to build strong and reliable Angular Applications.
## Statement ## Statement
In this exercice, you have a small CRUD application, which get a list of TODOS, update and delete some todo. In this exercice, you have a small CRUD application, which get a list of TODOS, update and delete some todos.
Currently we have a working exemple but filled with lots of bad practices. Currently we have a working example but filled with lots of bad practices.
### Step 1: refactor with best practices ### Step 1: refactor with best practices
@@ -28,7 +28,7 @@ What you will need to do:
- Avoid **any** as a type. Using Interface to leverage Typescript type system prevent errors - Avoid **any** as a type. Using Interface to leverage Typescript type system prevent errors
- Use a **separate service** for all your http calls and use a **BehaviourSubject** for your todoList - Use a **separate service** for all your http calls and use a **BehaviourSubject** for your todoList
- Use **AsyncPipe** to suscribe to your todo list. _(Let you handle subscription, unsuscription and refresh of the page when data has changed)_, avoir manual subscribe when it's not needed - Use **AsyncPipe** to subscribe to your todo list. _(Lets you handle subscription, unsubscription and refresh of the page when data has changed)_, avoid manual subscribe when it's not needed
- Don't **mutate** data - Don't **mutate** data
```typescript ```typescript
@@ -44,7 +44,7 @@ this.todos = [...this.todos.filter((t) => t.id !== todoUpdated.id), todoUpdated]
### Step 2: Improve ### Step 2: Improve
- Add a **Delete** button: _<a href="https://jsonplaceholder.typicode.com/" target="_blank">Doc of fake API</a>_ - Add a **Delete** button: _<a href="https://jsonplaceholder.typicode.com/" target="_blank">Doc of fake API</a>_
- Handle **errors** correctly. _(Globaly)_ - Handle **errors** correctly. _(Globally)_
- Add a Global **loading** indicator. _You can use MatProgressSpinnerModule_ - Add a Global **loading** indicator. _You can use MatProgressSpinnerModule_
### Step 3: Maintainability!! add some test ### Step 3: Maintainability!! add some test