To read a comparison of React JS and Angular you can go here: https://www.abhaisasidharan.xyz/blog/angular-vs-react-better-head-headless-decoupled-drupal
- Nodejs 10 and npm
- JSON:API module: https://www.drupal.org/project/jsonapi
Assuming you already have a Drupal 8 site running, let us begin by installing nodejs and angular 6. I have used nodejs 10 and angular 6, which I then upgraded to 7. Install nodejs 10 by following instructions here https://github.com/nodesource/distributions/blob/master/README.md. To install angular globally run
npm install -g @angular/cli. You may have to use sudo depending on your permissions. To install locally, you have to run npm install @angular/cli.
We have all our requirements now, we’ll start by enabling REST services in our Drupal 8 site. I have used two methods to get my content from the backend. One is enabling REST
services in Drupal 8 core and adding the endpoints for node list and view.
The other is by a module called JSON:API. This makes most of the content, taxonomy, and blocks available at the endpoint www.yoursitename.com/api. I have yet to enable the user/login and user/register endpoints; All in good time.
Just to understand the concept of Headless Drupal I got this image from the internet:
Image Courtesy: https://www.valuebound.com/resources/blog/integrating-headless-drupal-angularjs
You can also make your views RESTful just by going to your edit view page and duplicating the view as REST export as show here:
This means you can structure your content anyway in the backend without worrying about the frontend. Once you get the content as JSON or XML in the frontend, you can display it on your angular app with as much flexibility as one can hope for.
Here is the code for the Angular 6 app: https://github.com/codingsasi/abhaisasidharan-angular which uses the API. This is just an introductory article for simple Decoupled Single Page Angular Application. I will be writing more articles about creating an Angular app from scratch. You can test this and add improvements as well. Clone the repository and run npm install. Then run ng serve to run on http://localhost:4200. You will see an exact copy of ng.abhaisasidharan.xyz.
- Enable user/login user/registration endpoints.
- Enable login with google/facebook.
- Make an android application using the API; Just because. You know. IoT? Yeah.
- Convert the entire site to Angular SPA.
- Images are now being loaded directly from the drupal site. This is convenient now because Drupal provides responsive images. The image loading is a bit slow because of this. My solution for this is to make an angular module that manages all the files and stores them on the angular side.
- More content regarding this topic.
For any queries or suggestions please comment below. Thank you.