The client-server workflow

Everyone should have already figured it out by now, yet it can still be useful to recap the interactions workflow between the client-side and the server-side components of our app:

  • The user can create a new quiz using the Create a Quiz button from the navigation menu; as soon as they click on it, it will navigate to the QuizEditComponent. The component will run in Create mode since the editMode internal property value will be set to FALSE within the constructor. Once there, he can create a new quiz and confirm the operation by clicking on the Create the Quiz button; as soon as they do that, the Angular HttpClient returns an Observable object ready to issue a PUT request call to the server-side API. That call will be handled by the QuizController, which will create the quiz within the database using an instance of the ApplicationDbContext class obtained through dependency injection.
  • Alternatively, the user can select an already-existing quiz from one of the lists in the Home view and navigate to the corresponding Quiz view; from there, he can choose to Edit or Delete that quiz using one of the available buttons. From there, these two things can happen:
    • If the user clicks on the Edit button, the application will fire the onEdit() event-handler delegate method, which will route the user to the QuizEditComponent; this time the component will run in Edit mode, as the editMode property will be TRUE. The user can change one or more values and confirm them by clicking on the Apply Changes button; as soon as they do that, the Angular HttpClient returns an Observable object ready to issue a POST request call to the server-side API. This call will be handled by the QuizController, which will persist the applied changes to the database using an instance of the ApplicationDbContext class obtained through dependency injection.
    • If the user clicks on the Delete button, the application will fire the onDelete() event-handler delegate method, which will use the Angular HttpClient to return an Observable object ready to issue a DELETE request call to the server-side API. The call will be handled by the QuizController, which will delete the quiz from the database using an instance of the ApplicationDbContext class obtained through dependency injection.

Note how the various Observable objects we're using to handle the HTTP responses will immediately fire thanks to the fluent .subscribe() call issued by the calling method, creating an asynchronous thread that will always take care of the following tasks:

  • In case of success, re-route the user to the Home view, not before outputting the good news in the console log
  • In case of failure, output the error in the console log

It's also worth noting how the Angular framework reinitializes the Home view--along with all the ItemListComponent elements--each time the user is sent back to the Home view so that he'll be able to see the changes he just made using the create, edit, and delete features immediately after they occur.

..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset
18.119.28.108