Now that we have an API that is providing us the services with the JSON data of the recipes, recipe types, and individual recipes, let us look at how we can use this data to display in a page using HTML and AngularJS:
Since it is targeted towards a Drupal audience, we will not be looking deep into the consumption of services.
So for starters, let us create a directory named
recipes
inside the Drupal root directory. In the directory, we will have two files,recipe.js
andindex.html
.The
recipe.js
file will hold the code to call the API URL and parse the data object for consumption. Theindex.html
file will hold the AngularJS code and HTML to read the parsed data and display it on the page.The folder structure should be similar to this:
Drupal Root --recipe ----recipe.js ----index.html
Let's look into the
recipe.js
file, which is the AngularJS controller. As said, it will hold the JavaScript code to create an Angular Controller Module...