Getting started with Drupal 8 and Angular JS

  • Patrick Wall's picture
    June 18, 2017

Some quick development notes on getting started with AngularJS and Drupal 8. More to come! 
AngularJS focuses on using model view controller (MVC) to present the application.
The HTML of the site is as simple or complex as you want. It starts out with a declaration on the app to load in the HTML tag.
You then load the JS as necessary. Note that you still have to load your dependencies still.
The base HTML template would be a good place to set super static things, i.e., the header and the footer.
Then, a simple div with ng-view is set to declare where the controller will place the loaded content.
The first declaration is the app itself. It’s given a name and any dependencies that should be loaded.
angular js setup code
Following that, it has the configuration. In this demo, we’re configuring the $routeProvider. It’s what defines which controllers to use as well as the templates based on the path of the application.
The routes need to be defined at the very beginning, so there’s no dynamic routing per se built in. There are ways around that, but for the purposes of the KWALL website, we’re just going to use static routes.
The first parameter of the ‘when’ is the route itself. It can contain parameters inside it which are denoted by colons followed by the name. It’ll select up until the next forward slash, unless you use a star (*). Then, that’ll select up until the end of the path or when you hardcode the next piece of the path. I.e., /node/:nid/edit would result in the nid of the node. If you did node/:nid*/edit and had a path of of node/some/other/path/edit, nid would be some/other/path.
The final piece is the otherwise directive. This sets what should load if nothing matches. It can also be used as a base case.
The controller is what is loaded by the router. In this demo, only a PathLoader controller is used. In it, we take a path and pass it to our service which returns some JSON.
In the declaration of the controller, the first parameter is the controller name. The second parameter is an array. I believe you can declare an arbitrary number of arguments to pass in this array, which could be the Angular “globals” or in the case of our controller, the PathService service used to make the external call.
The only thing we do in our control is some sanity checking and then pass the path over to the PathService service to fetch our JSON.
Inside the service, we leverage the built in $resource “global” to make the external call to fetch our content. The only thing we fix is setting the _format=hal_json query variable to tell Drupal to give us HAL JSON.
Back in the router, we declared which template is used. The templates should basically be set up beforehand (meaning the template isn’t selected based on the response).
Inside the template file of this demo, you can see a couple different methods of outputting the JSON response. Utilizing the curly brace format (i.e., {{ }} ) we can select down into what we want to display. The other method utilized us the ng-bind-html, which in our case, just wraps the HTML from node.body[0].value.
Then, in the index.html file, this value gets set at ng-view div.