Notes on Building a Drupal 8 Module, With a Little AngularJS

Submitted by Matthew on Sun, 03/20/2016 - 13:01

For the moment, I just want to explore some of the features that I found particularly interesting in the module I wrote to show the old Drupal 7 posts in the left sidebar.

First, to access the JSON data that comes through the web service I set up on my Drupal 7 installation at http://webmech.biz, I used the Guzzle HTTP client library, which was added to the initial Drupal 8 release.  The Guzzle API is object-oriented and easy to use:

    $client = \Drupal::service('http_client');
    $result = $client->get($uri, ['Accept' => 'application/json']);
    $result_json = $result->getBody();

To handle the JSON data that is returned from this request, Symfony provides a useful class called Serializer.  However, in Symfony 2.7--the version currently used in Drupal 8--Serializer::deserialize can only take an object as an argument, not an array of objects, which is what http://webmech.biz has returned to us.  In Symfony 2.8 and in Symfony 3 (which will be incorporated into Drupal 8 at some point in the future), Serializer::deserialize is able to deserialize arrays of objects.  But for our purposes here, it's easier just to use the good old PHP function json_decode() to access the JSON data.

The other interesting thing about this module is that it uses AngularJS to show and hide the blog post teasers when the titles are clicked.  No, that's not JQuery; it's Angular.  This is a pretty basic use of Angular and not at all necessary in this situation, but since it's my blog and I'm interested in getting more familiar with Angular, I figured, why not? 

Many people think that AngularJS is meant only to be used to manage the entire front end of a website, and not just to be placed in small divs within an external template.  Sure, that's how Angular is usually used, but it is designed to be used either as a framework for the entire front end or to manage front end activity in localized areas within the front end, which is what I have done here.  All that I had to do was wrap the blog post content in divs with the ng-app and ng-controller attributes in order to use the ng-click and ng-show functions, like this:

<div class="ng-scope" ng-app="webmechanicblockapp">
  <div class="ng-scope" ng-controller="WebMechanicBlockImport">
    <h3 ng-click="showBlogPost11 = !showBlogPost11">
      <a class="webmechanic-feed-block-title" href="">The Web Mechanic Has Moved to Drupal 8!</a>
    </h3>
    <div ng-show="showBlogPost11" class="webmechanic-feed-block-paragraph ng-hide">
      <p>Now that Drupal 8 has been released, <a href="http://webmechanic.org" target="_blank">webmechanic.org</a> has moved to a Drupal 8 platform.  Blog posts will not be migrated to the new site (since some involve custom modules that demonstrate issues specific to Drupal 7), but this Drupal 7 installation and all of its current blog posts will continue to be available at <a href="http://webmech.biz">webmech.biz</a>.</p>
    </div>
    <!-- more blog posts -->
  </div>
</div>

In the code above, webmechanicblockapp (the AngularJS app) and webmechanicblockapp (the AngularJS controller) are defined in an external JavaScript file. In this case, the app and controller do not contain any significant code; all they do here is define the scope of activity for AngularJS on the page.

 

Add new comment

Restricted HTML

  • Allowed HTML tags: <a href hreflang> <em> <strong> <cite> <blockquote cite> <code> <ul type> <ol start type> <li> <dl> <dt> <dd> <h2 id> <h3 id> <h4 id> <h5 id> <h6 id>
  • Lines and paragraphs break automatically.
  • Web page addresses and email addresses turn into links automatically.
CAPTCHA
This question is for testing whether or not you are a human visitor and to prevent automated spam submissions.