This is the second part of a two-part series exploring the use of the Angular 6 HttpClient to make API calls against a Django back-end using Django Rest Framework. In the first part, we learned how to authenticate against Django using the Django Rest Framework JWT package. This post demonstrates how to set up the Django models and views for the micro-blogging app, as well as the Angular Service and templates.
Curious about how to make API calls with Angular 6 and the HttpClient service? This tutorial will show you some techniques for building a decoupled micro-blogging application using Angular 6 and the Django Rest Framework (DRF). Along the way, we will learn the following:
- How to set up the back end of the app using Django and the Django Rest Framework API
- Creating a simple Angular 6 single-page app which can query the API
- Authenticating users with JSON Web Tokens (JWT)
Ready? Let's get started!
With the release of Angular 6.0 in May 2018, the framework has been updated to depend on version 6.0 of the RxJS library. RxJS 6.0 has some breaking changes compared to RxJS 5.5 and older, specifically in the handling of some of the methods of the Observable class. This will affect the way Angular developers write API calls and handle other asynchronous processing in the future.
This post outlines some of the changes and how to update your API calls to the new syntax.
Note to readers, May 18, 2018: the code in this post is built for Angular 5.x. The same techniques will work with Angular 6 as long as you use the rxjs-compat Node package. To see how to upgrade this code for full, native RxJS compatibility, see this post.
Update, November 27, 2017: This post explains the Http service used in Angular 2. This is now deprecated in favor of the newer HttpClient released in Angular 4.3. This post will remain here as long as Angular 4.x is in long term support. If you are using Angular 5, consider upgrading to the newer HttpClient. You can find a tutorial for the HttpClient service in my post Angular 5: Making API calls with the HttpClient service.
Here's part #3 in the series explaining our "full stack" at a high level. If you missed part 1, or part 2 make sure to give those a read first. If you prefer, you can read the long-form post with all the content in one. Again, feel free to call me on any technicalities or suggest changes/additions in the comments!