Last active
December 26, 2021 08:03
-
-
Save jhades/f2e97da5a4d977fabb0e7857b6420d10 to your computer and use it in GitHub Desktop.
How to build Angular 2 apps using Observable Data Services - Pitfalls to avoid
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| addTodo(newTodo:Todo):Observable { | |
| let obs = this.todoBackendService.saveTodo(newTodo); | |
| obs.subscribe( | |
| res => { | |
| this._todos.next(this._todos.getValue().push(newTodo)); | |
| }); | |
| return obs; | |
| } | |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| let BehaviourSubject = new BehaviorSubject(initialState); | |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| @Injectable() | |
| export class TodoStore { | |
| private _todos: BehaviorSubject<List<Todo>> = new BehaviorSubject(List([])); | |
| public readonly todos: Observable<List<Todo>> = this._todos.asObservable(); | |
| constructor(private todoBackendService: TodoBackendService) { | |
| this.loadInitialData(); | |
| } | |
| ... | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| let currentValue = behaviorSubject.getValue(); |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| saveTodo(newTodo: Todo) : Observable> { | |
| var headers = new Headers(); | |
| headers.append('Content-Type', 'application/json; charset=utf-8'); | |
| return this.http.post('/todo', JSON.stringify(newTodo.toJS()),{headers}) | |
| .pipe( | |
| shareReplay() | |
| ); | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| export class App { | |
| constructor(private todoStore: TodoStore, | |
| private uiStateStore: UiStateStore) { | |
| } | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| onAddTodo(description) { | |
| this.todoStore.addTodo(newTodo) | |
| .subscribe( | |
| res => {}, | |
| err => { | |
| this.uiStateStore.endBackendAction(); | |
| } | |
| ); | |
| } | |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| subject.next(newValue); | |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <ul id="todo-list"> | |
| <li *ngFor="let todo of todoStore.todos | async" > | |
| ... | |
| </li> | |
| </ul> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| let subject = new Subject(); | |
| subject.subscribe(value => console.log('Received new subject value: ')) |
An Angular 7 update would be appreciated...
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
@FacelessPanda. I am going through this and it could be List from the immutable library. Typescript does not mind so far.
import { List } from 'immutable';