2

For instance, I would like to create a module like

<div ng-app="myApp" ng-controller="myCtrl">
    First Name: <input type="text" ng-model="firstName"><br>
    Last Name: <input type="text" ng-model="lastName"><br>
    <br>
    Full Name: {{firstName + " " + lastName}}
</div>
<script>
    var app = angular.module('myApp', []);
    app.controller('myCtrl', function($scope) {
        $scope.firstName = "John";
        $scope.lastName = "Doe";
    });
</script>

But what I found is that I have to create the module in PHP (For example, mymodule.module), import JavaScript file using drupal_add_js, create functions to establish a form in phpm etc.

So is there any way or an example to create a module directly with HTML?

migrated from stackoverflow.com Jun 16 '16 at 19:52

This question came from our site for professional and enthusiast programmers.

  • You can add this in body content of your page node – Thamilan Jun 15 '16 at 9:29
  • @Thamilan But this is a module. So is that weird to add it in page node? – Zhipeng YANG Jun 15 '16 at 9:32
  • or you can create one block. And in body of block you can paste this html and display the block anywhere you like. – viswanath polaki Jun 15 '16 at 9:33
  • @ZhipengYANG because you said I would like to create a page like I suggested simple way – Thamilan Jun 15 '16 at 9:36
  • @Thamilan Ok, actually it's a module. – Zhipeng YANG Jun 15 '16 at 9:42
1

No there is no way to create a Drupal module without creating the associated .module (a PHP file) and .info files. If you want your JS file to be inserted on all pages, you can have an empty .module file and add a scripts[] = myscript.js enty in the .info file. Keep in mind that Drupal is a CMS, designed to let site administrator manage content. what you are trying to do looks like embedding a JavaScript application on pages of a site whose content is managed with Drupal. While Drupal is extensible, it is very opinionated on how to build custom page.

Since you module actually mixes JavaScript and HTML, the clean way would be to have the required PHP boilerplate code to produce the HTML markup (ie. register a theme template hook and provides its default implementation) while ensuring the JavaScript file is included on the page whenever you template is rendered. Then have the required PHP code to produce a page containing your markup.

MODULE.module

/*
 * Implements hook_menu().
 */
function MODULE_menu() {
  return array(
    'my-app' => array(
      'page_callback' => 'MODULE_page',
    )
  );
}

/*
 * Page callback for MODULE app page.
 */
function MODULE_page() {
   // A simple page containing a single element rendered from out own template.
  return array(
    '#theme' => 'MODULE_app',
    '#ngApp' => 'myApp',
    '#ngController' => 'myCtrl'
  );
}

/**
 * Implements hook_theme().
 */
function MODULE_theme() {
  return array(
    'MODULE_app' => array(
      'template' => 'MODULE_app',
      'variables' => array(
        'ngApp' => 'myApp',
        'ngController' => 'myCtrl',
      )
    ),
  );
}

/*
 * Implements  hook_preprocess_HOOK().
 */    
function MODULE_preprocess_MODULE_app(&$varialbles) {
  // Add required libraries, with 
  drupal_add_js(...);
  // Add the custom JavaScript to the page.
  drupal_add_js(drupal_get_path('module', 'mymodule') . '/MODULE-app.js');
  // Add settings for the rendered element to the page.
  drupal_add_js(array('MODULE' => array($variables['id'] => array(
    'ng-app' => $variables['ngApp'],
    'ng-controller' => $variables['ngController'],
  ))), 'setting');
}

MODULE-app.tpl.php

<?php
/**
 * Add documentation here explaining what this template is and what
 * is expected from any overriding implementation (like having a root element
 * with the ng-app and ng-controller attributes, and what's available in the scope).
 */
?>
<div ng-app="<?php print $ngApp; ?>" ng-controller="<?php print $ngController; ?>">
    First Name: <input type="text" ng-model="firstName"><br>
    Last Name: <input type="text" ng-model="lastName"><br>
    <br>
    Full Name: {{firstName + " " + lastName}}
</div>

MODULE-app.js

Drupal.behaviors.MODULEApp = {
  attach: function(context, settings) {
    // Bootstrap the Angular app for any instance or our element.
    settings.MODULE.forEach(function(variables) {
      var app = angular.module(variables['ng-app'], []);
          app.controller(variables['ng-controller'], function($scope) {
            $scope.firstName = "John";
            $scope.lastName = "Doe";
          });
    });  
  }
}
0

From your example, it seems to me you want to create a Angular.js app. There's several ways of going about this, this may be one of the simpler ones:

Then set the full HTML filter for your page, and enter the HTML and set the javascript by using the JS Injector.

Also, here's a neat sample of what you want to do, using Drupal: AngularJS introduces itself to Drupal

-1

Are you sure that you really need module actually? If you only need to insert some (embed) code at some place on page then simple static block can do the job. From admin menu go to Structure -> Blocks and click "add block" link. Enter markup you need in block body save block, and from same Blocks page add it to some region so block body will be displayed on page.

  • 1
    Putting application code (HTML markup and JS) in a custom block (whose content is stored in the DB without any kind of versioning) is terrible idea (because no code versioning and DB storage). Please don't hurt the future maintainer of that site. – Pierre Buyle Jun 17 '16 at 16:40
  • That's great if you don't value developer's time. Look how much code and time your solution requires for something simple to achieve. The purpose of static block is exactly this - allowing easy and quick way to add some static code somewhere on page. Or not? – MilanG Jun 20 '16 at 11:39
  • 1
    Tha'ts great if you don't value developer's time wasted in maintenance when something break, the complete application logic is stored where it shouldn't be and there is no way to track changes made overtime, or even to ensure somebody did break anything by mistake. Go ahead if you are 100% sure that nothing will break, the application won't change, you will forever maintain the site and will remember how everything is made for the next 2 years. – Pierre Buyle Jun 20 '16 at 13:43
  • It's good for adding 3rd party embed code. Why should I keep track of code that isn't mine at all? I didn't made it and I don't know how it works. That kind of code is usually totally independent of rest of the site so if it breaks you know who to blame and you can't (shouldn't) fix it anyway. – MilanG Jun 21 '16 at 7:27
  • Congratulation, you have found a good reason not to follow a guideline. But integrating a third party application without modification was neither mentioned in the original question or your answer. – Pierre Buyle Jun 21 '16 at 19:33

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.